Vibe UI
Design Guide

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

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

两条路径

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

1

UI Kit + MCP

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

仅使用 shadcn/ui 组件。 安装 shadcn MCP。 除非必要,不要创建自定义组件。 优先使用已有的 shadcn 代码块。 使用 Tailwind CSS。 保持间距一致,使用 8px 间距系统。 不要使用随机颜色。 除非明确要求,不要使用渐变。 始终优先使用已有组件。
2

design.md

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

  • 大型项目保持风格一致
  • 发送参考图 / 网址给 AI,自动生成 design.md
  • 设计规范可随项目迭代
Design.md ├── Color ├── Typography ├── Radius ├── Layout ├── Components ├── Animation └── Do Not
推荐 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 — 简单直接

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 产品。

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 的开发者,想获得设计 + 开发一体化

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。

回顾路径 浏览资源