主题
AI 设计工作流：有设计师用设计稿，没设计师 AI 就是设计师
AI 学习系列第六篇 · 进阶教程 前置阅读：如何学习 AI 基础 → Vibe Coding 实战教程 → MCP 与 Skills 指南 → 本篇
写在前面
小公司的前端在 UI 设计这件事上，通常面临两种处境：
处境 A：有设计师——设计师出 Figma/即时设计/MasterGo 的稿子，你负责还原。痛点是还原慢、像素级对齐累、改需求又要重来。
处境 B：没设计师——前端自己凑界面。去 Element UI 文档抄几个组件拼起来，能用但不好看。老板看了说"能不能弄好看点"，你心里想"我是写代码的不是做设计的"。
好消息是 AI 在这两种场景下都能大幅减轻你的负担：
- 有设计师 → AI 帮你高效还原设计稿，从"照着做"变成"一句话生成"
- 没设计师 → AI 直接当你的设计师，从需求到界面一步到位
Part A · 有设计师：从设计稿到代码
第一章 · 设计工具现状：你的设计师在用什么？
在聊"怎么用 AI"之前，先搞清楚你的设计师在用什么工具。不同工具的 AI 协作能力差距很大。
1.1 国内设计工具格局（2026）
| 工具 | 国内使用情况 | AI 能力 | 代码导出 | 适合谁 |
|---|---|---|---|---|
| 即时设计 | 国内增长最快，免费策略吸引大量用户 | 文字生成 UI 原型（每天 20 次免费）、AI 生成图片 | 基础 CSS 参数查看 | 国内中小团队首选 |
| MasterGo | 企业客户多，主打团队协作和设计系统 | 设计稿转代码（D2C）、设计系统管理 | React/CSS 代码导出 | 重视规范的团队 |
| Figma | 全球主流，国内大厂和外企用得多 | MCP Server（公测中）、插件生态最丰富 | 通过插件导出多种格式 | 有条件使用国际工具的团队 |
| Sketch | 份额持续下降，但老团队还在用 | AI 能力较弱，依赖第三方插件 | 基础 CSS 导出 | 正在迁移中的 Mac 团队 |
| Pixso | 国产替代方案，免费版够用 | 基础 AI 功能 | CSS 参数导出 | 预算敏感的小团队 |
现实情况：不要纠结"哪个工具最好"。你的设计师用什么，你就配合什么。你需要知道的是：不管设计师用什么工具，AI 都能帮你加速还原。
1.2 各工具的 AI 特色
即时设计的亮点是"AI 生原型"——用文字描述就能生成 UI 设计稿。设计师可以用它快速出方案，前端也可以用它在没有设计师的时候自己生成界面原型。
MasterGo的亮点是"D2C"（Design to Code）——设计稿直接转成前端代码。虽然生成的代码通常需要优化，但比从零写快很多。
Figma的亮点是生态——MCP Server 让 AI 可以直接读取 Figma 文件的结构和样式数据，不是"看图猜"，而是精确读取。
第二章 · 设计稿 → 代码的四种 AI 工作流
2.1 方式一：截图 → AI 还原（最简单，所有工具通用）
这是门槛最低的方式——把设计稿截图，直接扔给 AI。
操作流程：
- 在设计工具里截图（或导出 PNG）
- 在 Trae 或 Claude Code 中发给 AI
根据这张设计稿截图，用 Vue 3 + Tailwind CSS 还原这个页面。
要求：
- 布局、间距、字号尽量贴近设计稿
- 图片用占位符（placeholder）
- 颜色从截图中取色
- 做好响应式，手机端自动适配优点：
- 不依赖任何特定设计工具
- Sketch、Figma、即时设计、MasterGo 导出的图都能用
- 简单页面 5 分钟就能还原
局限：
- AI 是"看图猜"，间距和字号可能有偏差
- 复杂的交互（hover 效果、动画）看不出来
- 多层嵌套的组件结构可能猜不准
适用场景：简单的展示页面、着陆页、活动页。
技巧：截图时把设计稿放到 100% 缩放，截完整的页面而不是局部。如果设计稿有标注（间距、字号），把标注也截上，AI 还原的准确度会高很多。
2.2 方式二：设计工具导出代码 → AI 优化
操作流程：
- 在 MasterGo 中使用 D2C 功能导出代码，或者从 Figma 插件导出
- 把导出的代码给 AI 优化
这是从 MasterGo 导出的 React 代码。
代码能用但有以下问题，帮我优化：
1. 把内联样式改成 Tailwind CSS 类
2. 把长组件拆分成子组件（超过 100 行的拆开）
3. 加上响应式（导出的是固定宽度的）
4. 清理冗余的 div 嵌套
5. 把写死的文字改成 props，方便复用优点：
- 比"看图猜"精确——导出的代码有精确的像素值
- AI 优化已有代码比从零生成更可靠
局限：
- 需要设计工具支持代码导出（MasterGo 的 D2C 最成熟）
- 导出的代码通常很"脏"——大量内联样式、不语义化的 div 嵌套
适用场景：需要高还原度的页面，设计师用 MasterGo 或 Figma。
2.3 方式三：Figma MCP Server（最精确，仅限 Figma）
如果你的团队用 Figma，这是目前最强的方案。
原理：Figma MCP Server 让 AI 可以直接读取 Figma 文件的结构化数据——不是"看图"，而是读取每个图层的精确属性（位置、大小、颜色、字体、间距、圆角等）。
配置方式：
在 Claude Code 中：
bash
claude mcp add figma -s user -- npx figma-developer-mcp --figma-api-key=你的API密钥使用方式：
读取 Figma 文件 [文件链接] 中的 "首页" 页面，
用 Vue 3 + Tailwind CSS 生成代码。
要求：
- 精确还原颜色、字号、间距
- 组件结构要合理（不要一个巨型 template）
- 图标用 heroicons 替代
- 图片用 placeholder优点：
- 精确度最高——AI 读的是结构化数据，不是图片
- 能识别组件层级和设计 Token
- 和 Figma 的组件系统能对应上
局限：
- 仅限 Figma 用户
- MCP Server 目前是公测阶段，可能有 bug
- 需要 Figma API 密钥（免费账户可获取）
适用场景：长期项目、需要高还原度、设计师用 Figma。
2.4 方式四：Design Token → AI 生成设计系统
这种方式不是还原某个具体页面，而是从设计稿中提取"设计语言"，让 AI 后续所有生成都遵循这个语言。
操作流程：
- 从设计稿中提取 Design Token（颜色、字号、间距、圆角等参数）
- 让 AI 基于这些 Token 生成 Tailwind 配置或 CSS 变量
- 以后所有页面都基于这套配置生成
从我们的设计稿中，我提取了以下 Design Token：
颜色：
- 主色：#2563EB
- 辅色：#7C3AED
- 成功：#059669
- 警告：#D97706
- 错误：#DC2626
- 背景：#F8FAFC
- 正文：#1E293B
- 次要文字：#64748B
字号：
- 标题1：28px / 加粗
- 标题2：22px / 加粗
- 标题3：18px / 加粗
- 正文：16px / 常规
- 辅助文字：14px / 常规
- 小字：12px / 常规
间距基数：4px（使用 4 的倍数：4/8/12/16/20/24/32/48）
圆角：小 4px / 中 8px / 大 12px / 圆 9999px
阴影：sm(0 1px 2px rgba(0,0,0,0.05)) / md(0 4px 6px rgba(0,0,0,0.1))
请：
1. 生成 tailwind.config.js 中的自定义主题配置
2. 生成一个 CSS 变量文件作为备用
3. 把这套配置写进 CLAUDE.md，让 AI 后续生成代码时自动使用优点：
- 一次提取，终身受用——后续所有页面自动风格统一
- 不依赖任何特定设计工具
- Design Token 是前端和设计师的"共同语言"
适用场景：长期维护的产品，需要风格一致性。
第三章 · 和设计师协作的实用建议
3.1 帮设计师建立"AI 友好"的习惯
如果你能影响设计师的工作方式，这些习惯能让 AI 还原更准确：
| 习惯 | 为什么有帮助 |
|---|---|
| 用 8px 网格对齐 | AI 生成的间距更规整 |
| 组件命名规范（如 Button/Primary） | AI 能识别组件类型 |
| 标注关键间距和字号 | 截图时 AI 能读到精确数值 |
| 使用设计工具的组件/样式功能 | 导出的代码更结构化 |
| 控制颜色数量（主色+辅色+灰阶） | AI 不会生成一堆相近但不同的颜色 |
3.2 不要追求 100% 像素级还原
以前没有 AI 的时候，像素级还原是前端的基本功。现在有了 AI，策略应该变成：
AI 生成 90% → 你手动微调 10%那 10% 通常是：
- 微妙的间距差异（32px 和 28px 的区别肉眼看不出）
- 特殊的 hover/active 状态效果
- 和设计稿不一样但"更合理"的响应式处理
给设计师的沟通话术："我用 AI 快速还原了一版，90% 是对的，我们一起看看哪些地方需要微调。" ——比你花两天闷头切图然后被说"这个间距不对"好多了。
Part B · 没设计师：AI 就是你的设计师
第四章 · 用 AI 从零设计界面
4.1 方式一：自然语言 → AI 直接生成页面
最直接的方式：你描述你想要什么，AI 生成代码。
关键技巧：描述"感觉"而不是"实现"。
❌ 差的描述（太技术化）：
"用 flex 布局做一个侧边栏 240px + 右侧内容区，
顶部 64px 导航栏，使用 #f5f5f5 背景色"
✅ 好的描述（描述感觉和参考）：
"做一个项目管理工具的后台界面，类似 Linear 的风格：
- 左侧是深色的窄侧边栏，带项目列表
- 右侧是浅色的主内容区，显示任务列表
- 整体感觉要简洁、专业、信息密度高
- 用 Vue 3 + Tailwind CSS 实现"为什么"描述感觉"更好？因为当你说"类似 Linear"，AI 知道那意味着什么风格——暗色侧边栏、紧凑的间距、无衬线字体、蓝紫色调。这比你自己指定 #f5f5f5 或 flex 240px 能得到更协调的结果。
4.2 方式二：找参考 → AI 复刻风格
这是出好看结果最快的方式。
- 去 Dribbble、Mobbin 或者直接找一个你觉得好看的网站
- 截图
- 告诉 AI："参考这个风格，做我的页面"
参考这张截图的设计风格（简洁、卡片式布局、蓝色主题），
为我做一个 SaaS 产品的定价页面。
内容：
- 三个套餐：免费版 / 专业版 $29/月 / 团队版 $99/月
- 每个套餐列出 5-6 个功能点
- 推荐套餐要突出显示
- 底部一个 FAQ 区域
技术栈：Vue 3 + Tailwind CSS注意：不要抄袭整个设计，而是参考"风格"——配色方案、布局方式、组件风格。这是合法合规的，就像你参考某个装修风格来装修自己的房子。
4.3 方式三：即时设计 AI → 导出 → AI 写代码
如果你想先"看到"设计再写代码，可以用即时设计的 AI 功能做中间步骤：
- 打开即时设计，使用"AI 生原型"功能
- 输入："做一个外卖 App 的首页，包含搜索栏、分类导航、推荐商家列表"
- AI 生成设计稿（每天免费 20 次）
- 在设计稿上调整——移动元素、改颜色、换布局
- 满意后截图
- 把截图给 Claude/Trae，生成前端代码
这个"半自动"流程的好处是：你先有一个可视化的设计做参考，而不是直接从文字跳到代码。
AI 生成设计 → 你肉眼审核 → 截图 → AI 生成代码 → 你审核代码每一步都有人工检查，结果可控。
4.4 用 Skill 提升设计质量
如果你用 Claude Code，可以利用 ui-ux-pro-max 等设计类 Skill。这些 Skill 内置了专业的设计知识（风格参数、配色方案、字体搭配），让 AI 生成的 UI 不是"能用"而是"好看"。
/ui-ux-pro-max
用极简主义风格，设计一个个人博客首页：
- 技术栈：React + Tailwind
- 配色：黑白灰 + 一个强调色
- 字体搭配要有设计感
- 要有"呼吸感"（大量留白）Skill 的价值在于：没有它，AI 生成的是"通用"的界面；有了它，AI 会运用专业设计知识来做决策——比如什么风格该用什么圆角、什么间距、什么阴影。
第五章 · 不懂设计也能做出好看的 UI
5.1 四个设计原则速成
你不需要学完一本设计书。AI 时代，你只需要知道这四个字母：CRAP（对比、重复、对齐、亲密性）。
| 原则 | 含义 | 常见错误 | 告诉 AI 怎么说 |
|---|---|---|---|
| Contrast（对比） | 不同的东西要明显不同 | 标题和正文字号差不多 | "标题要足够大，和正文形成对比" |
| Repetition（重复） | 相同的东西要保持一致 | 按钮有的圆角有的直角 | "所有按钮风格统一" |
| Alignment（对齐） | 所有元素要有视觉上的对齐线 | 文字和图片随便放 | "所有内容左对齐" |
| Proximity（亲密性） | 相关的内容要靠近，不相关的要拉开 | 标题离上一段比离下一段还近 | "每个区块之间留足间距" |
你不需要自己去实现这些，只需要在 prompt 里提一句，AI 就会注意。
5.2 配色：不要自己选
自己选颜色是设计灾难的起源。以下是安全的做法：
最懒的方式：告诉 AI 一个参考
配色参考 Stripe 的官网风格用 Tailwind 默认的 blue 色系作为主色稍微花点心思：指定一个风格
用莫兰迪色系，整体感觉柔和、高级深色主题，类似 Discord/Slack 的深灰色调绝对安全的保底方案：
只用黑白灰 + 一个强调色（蓝色）。
不要用超过 3 种颜色。记住：颜色少 = 不容易出错。一个主色 + 一组灰阶，就能做出很专业的界面。
5.3 字体：不要纠结
| 场景 | 字体方案 | 说明 |
|---|---|---|
| 中文项目 | system-ui, sans-serif | 用系统默认字体，各平台都好看 |
| 英文项目 | Inter | 免费、现代、可读性强 |
| 代码展示 | JetBrains Mono 或 Fira Code | 等宽字体 |
| 不想操心 | 告诉 AI "用 Tailwind 默认字体" | 最安全 |
不要在字体上花超过 5 分钟。
5.4 布局：用现成的模式
没有设计天赋？没关系。好看的界面大多是"模式"的组合。告诉 AI 用哪个模式就行：
常用布局模式：
"用 Bento Grid 布局" → 大小不等的卡片网格（像 Apple 官网）
"用经典 Dashboard 布局" → 左侧边栏 + 顶部导航 + 右侧内容区
"用 Hero + 卡片列表" → 顶部大图 + 下方卡片网格（着陆页常用）
"用单列居中布局" → 窄内容区居中（博客、文档常用）你不需要自己想布局，只需要选一个和你需求最匹配的模式。
第六章 · 组件库：一次搞定，反复使用
6.1 小公司版"设计系统"
大公司有 Ant Design、Element Plus 这种完整的设计系统。小公司不需要那么重——你只需要一套统一的基础组件。
帮我建立一套项目基础组件，用 Vue 3 + Tailwind CSS：
1. Button 组件：三种类型（primary/secondary/danger）× 三种大小（sm/md/lg）
2. Card 组件：带标题、内容、底部操作区
3. Input 组件：文本输入 + 错误状态 + 禁用状态
4. Modal 组件：居中弹窗、带遮罩、可关闭
5. Table 组件：基础表格、斑马纹、可排序列头
6. Badge 组件：状态标签（成功/警告/错误/信息）
风格要求：
- 统一圆角 8px
- 统一间距基数 4px
- 主色 #2563EB
- 简洁现代，不要花哨的装饰
每个组件放在 src/components/ui/ 目录下。6.2 把规范固化到 CLAUDE.md 或 Skill
组件建好后，把设计规范写进 CLAUDE.md：
markdown
# 设计规范
## 组件使用
所有 UI 组件从 src/components/ui/ 导入，不要自己写新的基础组件。
已有组件：Button, Card, Input, Modal, Table, Badge
## 样式规则
- 颜色：主色 text-blue-600，背景 bg-slate-50，文字 text-slate-900
- 圆角：统一 rounded-lg（8px）
- 间距：使用 Tailwind 的 space 类，基数为 4（p-1=4px, p-2=8px...）
- 不写自定义 CSS，全部用 Tailwind 类
- 不用 !important这样以后让 AI 生成任何新页面，它都会自动使用你的组件、遵循你的规范。第一个页面需要从零建立规范，后续页面就是"自动驾驶"了。
6.3 或者直接用现成的组件库
如果不想自己建组件，直接用：
| 组件库 | 技术栈 | 风格 | 适合场景 |
|---|---|---|---|
| shadcn/ui | React + Tailwind | 简洁现代，高可定制 | 需要自定义风格的项目 |
| Element Plus | Vue 3 | 企业级，中规中矩 | 后台管理系统 |
| Ant Design Vue | Vue 3 | 企业级，功能丰富 | 复杂的后台系统 |
| Naive UI | Vue 3 | 现代、可定制 | 追求好看的项目 |
| daisyUI | 任意框架 + Tailwind | 多主题，轻量 | 快速出活 |
告诉 AI 你用哪个组件库，它就会用对应的组件来生成代码。
用 Element Plus 组件库，帮我做一个订单管理页面：
- 顶部：筛选区域（日期范围 + 订单状态下拉 + 搜索框）
- 中间：订单数据表格（使用 el-table）
- 底部：分页（使用 el-pagination）附录 A · 各设计工具 AI 能力对比
| 能力 | 即时设计 | MasterGo | Figma | Sketch |
|---|---|---|---|---|
| AI 生成 UI 原型 | ✅ 免费 20 次/天 | ❌ | ✅ 插件支持 | ❌ |
| 设计稿转代码 | 基础（CSS 参数） | ✅ D2C 功能 | ✅ 插件 + MCP | 基础 |
| MCP Server | ❌ | ❌ | ✅ 公测中 | ❌ |
| Design Token 导出 | 手动 | ✅ | ✅ 插件支持 | 手动 |
| AI 图片生成 | ✅ | ❌ | ✅ | ❌ |
| 免费可用性 | ✅ 完全免费 | 免费版有限制 | 免费版有限制 | 付费 |
附录 B · "没有设计师"的 Prompt 模板
模板 1：从零设计页面
用 [技术栈] 设计并实现 [页面类型]。
风格参考：[参考网站或风格名称]
内容：
- [区域 1 的内容]
- [区域 2 的内容]
- [区域 3 的内容]
设计要求：
- 简洁现代，大量留白
- 颜色不超过 3 种
- 做好移动端适配模板 2：参考截图生成
参考这张截图的设计风格（不是内容），
为我做一个 [你的页面类型]。
保留的风格元素：[比如配色、布局方式、卡片风格]
我的内容：[你的实际内容]
技术栈：[Vue/React + Tailwind]模板 3：还原设计稿
根据这张设计稿，用 [技术栈] 还原页面。
要求：
- 布局和间距尽量精确
- 颜色从设计稿取色
- 做好响应式适配
- 图片用 placeholder
- 图标用 [heroicons/lucide] 替代模板 4：建立组件库
用 [技术栈] 建立一套基础 UI 组件：
[列出需要的组件]
风格要求：
- [主色/圆角/间距规则]
- [参考风格]
每个组件需要支持：
- 多种尺寸（sm/md/lg）
- 多种状态（正常/hover/禁用/加载中）
- Props 类型定义附录 C · 推荐的免费设计参考资源
| 资源 | 网址 | 用途 |
|---|---|---|
| Dribbble | dribbble.com | 找视觉风格灵感 |
| Mobbin | mobbin.com | 移动端和 Web App 真实设计参考 |
| Refero | refero.design | 按行业/类型分类的 Web 设计参考 |
| Tailwind UI | tailwindui.com | 官方 Tailwind 组件示例（部分免费） |
| 未设计 | weidesign.com | 中文 UI 设计灵感 |
| 站酷 | zcool.com.cn | 国内设计师作品社区 |
使用方式：找到你喜欢的设计 → 截图 → 扔给 AI → "参考这个风格做我的页面"。
这比自己从零设计高效 10 倍，效果也好 10 倍。