Vibe UI
Design Guide

AI 做的 UI 太丑、风格不稳定？
这是完整的设计到开发路径。

查看路径 浏览资源
↓
01 · 路径

两条路径

从 UI Kit + MCP 快速生成，到 design.md 建立长期设计规范。

1

UI Kit + MCP

使用支持 MCP 的 UI Kit，拷贝提示词后直接给 AI 编程工具即可生成。

  • Shadcn UI / HeroUI 等自带 MCP Server
  • 一键拷贝提示词（含安装 + Tailwind 规范）
  • 丢给 Codex 或 OpenCode 即可出效果
Use shadcn/ui only. Install shadcn MCP. Do not create custom components unless necessary. Use existing shadcn blocks first. Use Tailwind CSS. Keep spacing consistent. Use 8px spacing system. Do not use random colors. Do not use gradients unless requested. Always prefer existing components.
2

design.md

在大型项目中保持风格一致性。将参考图或设计系统网址发给 AI，自动生成设计规范文件，未来可迭代更新。

  • 大型项目保持风格一致
  • 发送参考图 / 网址给 AI，自动生成 design.md
  • 设计规范可随项目迭代
Design.md ├── Color ├── Typography ├── Radius ├── Layout ├── Components ├── Animation └── Do Not
02 · 设计

制作你的专属风格

两种路线，从 AI 生成到亲手设计。

路线 A：AI 生成

让 AI 生成效果图 → AI 根据效果图开发 → 完成后整理为 design.md。

效果图
→
开发
→
design.md

路线 B：自己做设计

通过 MCP 连接 AI，只设计首页首屏，其余页面让 AI 扩展写进 design.md。长图片分模块发布，每次完成后更新 design.md。

💡 小技巧：将设计好的图片发给 AI，让它自动提取设计 Token，输出为 design.md。下方 Prompt 可直接复制使用：

你是一名资深 UI 设计师和 Design System 专家。请分析我提供的图片，提取所有设计 Token，并输出为一份完整的 design.md。 提取以下信息： 1. 色彩体系：主色、辅色、强调色，附带 HEX 值 2. 字体系统：标题/正文字体族、字号、字重、行高 3. 间距系统：基础间距单位、组件间距 4. 圆角规范：按钮、卡片、输入框 5. 阴影系统：各层级阴影参数 6. 布局规范：栅格、最大宽度、断点 7. 组件规范：按钮、输入框、卡片的状态 输出 Markdown，按 Design Token → 组件规范 → 布局规范 组织。
03 · 开发

根据项目选型

设计定稿后，选择合适的技术栈。

📄

HTML

小型展示项目

最简单
⚛️

React

复杂项目首选

不熟选 React
🎨

Tailwind

自建项目样式

推荐
🔥

Next.js

前后端一体化

一体化最佳
04 · 资源

设计要素，一站找齐

字体、图标、UI Kit、模板、Prompt、Skill。

字体

英文网站

在 Google Fonts 上找到想要的字体，让 AI 引用嵌入即可使用。

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

中文网站

中文网页使用系统默认字体即可，无需额外嵌入。如需指定风格，可参考小米或苹果中国网站的字体搭配让 AI 提取。

font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

⚠️ 英文字体体积小，可以直接嵌入引用。中文字体文件较大（通常 5MB+），一般使用系统自带字体或兼容回退字体，不需要也不推荐嵌入。

图标
✦

Lucide

适合产品 UI 的线性图标。

✦

Tabler Icons

覆盖面广，风格稳定。

✦

Phosphor Icons

多种粗细和风格。

✦

Heroicons

适合 Tailwind / SaaS 产品。

推荐 UI Kit

SaaS

适合产品后台、B2B 管理界面

  • Shadcn UI — 源码式组件，MCP 友好
  • HeroUI — 默认好看，SaaS 首选
  • Mantine — 完整组件和 hooks

Landing Page

适合官网、发布页、活动页

Dashboard

适合数据密集、图表、报表

  • Tremor — 数据产品组件和图表
  • Refine — 管理系统框架
Design.md 模板
精选 15 个设计系统模板，点击卡片跳转到 GitHub 仓库浏览。
✨

干净设计

Clean — 简洁清爽
◻️

极简设计

Minimal — 少即是多
🚀

现代设计

Modern — 层次与渐变
💎

优雅设计

Elegant — 精致细节
👑

高级设计

Premium — 品质感
🏛️

奢华设计

Luxury — 高级氛围
💼

专业设计

Professional — 商务级
📊

仪表盘设计

Dashboard — 数据密度
📦

Bento 设计

Bento — 模块化分块
🏢

企业设计

Corporate — 稳重统一
💧

流畅设计

Sleek — 动感过渡
🔮

精致设计

Refined — 追求完美
🌬️

宽敞设计

Spacious — 呼吸感
🎭

当代设计

Contemporary — 平衡美学
▪️

简洁设计

Simple — 简单直接
Prompt

网站 → Design.md

Analyze this website. Create a complete Design.md. Include: Typography, Spacing, Colors, Components, Interaction, Animation

截图 → Design.md

Analyze this UI. Generate Design.md. Extract: Color system, Typography, Layout, Component rules, Spacing rules, Interaction patterns
开发工具栈推荐

推荐不同角色使用不同工具，选对路更快落地。

OpenDesign

开源设计工具，AI 驱动设计到代码的完整流程。

适合：开源爱好者、想自托管设计工具的人

Codex + Product Designer 插件

在聊天窗口输入 @product design，先做 UI 设计再开发。

适合：使用 Codex 的开发者， wanting 设计 + 开发一体化

Claude Design

Anthropic 官方设计工具，Prompt 驱动 UI 生成与迭代。

适合：Claude 用户、偏好 Prompt 工作流的人

Figma Make

Figma 自动化设计工具，从设计稿到交互一键生成。

适合：已有 Figma 习惯的设计师 / 前端

Google AI Studio

多模型对比 + 自定义 Prompt 模板，实验不同的 AI 生成方案。

适合：AI 实验爱好者、想对比不同模型效果的人

AI 效果图生成 & 设计工具

根据身份选择合适工具。

👤 非设计师 / 新手 → LoveArt

Skill + MD 提示词 + 设计系统 + 多种模型一站式覆盖，开箱即用，不需要设计基础。

💰 付费：按需订阅，入门套餐约 ¥30-99/月

🎨 原本有设计经验 → Figma（付费版）

多模型 + 图片生成 + 自定义设计系统 + 代码生成，完整专业工作流。

  • Pro $12/月/人 — 个人专业版
  • Org $25/月/人 — 团队管理 + 版本历史 + 高级协作
  • Enterprise 价格面议 — 无限画布 + SSO + 合规
  • Free 免费版 — 基础功能，限 3 文件
🧵

Google Stitch

快速绘制线框图和草图

💬

ChatGPT

对话式图像生成，描述即出图

❤️

LoveArt

新手友好，Skill + MD 全套方案

开始 Vibe UI 之旅

选择一条路径，用 AI 打造完美 UI。

回顾路径 浏览资源