Google Stitch + DESIGN.md + Claude Code：AI 原生 UI 设计工作流实战指南 苏米注：本文基于 Google 官方文档和社区实践整理，详细介绍如何用 Stitch+DESIGN.md+Claude Code 构建一致性的 UI 设计工作流。这套方案的核心价值在于将设计系统从"人工维护"转变为"AI 可读"，大幅降低高质量 UI 的实现门槛。
痛点：为什么 AI 生成的界面总是"丑得像头猪"？
很多开发者用 AI 做过产品或网站，功能实现了，逻辑没问题，但界面视觉效果始终不理想。问题不在于 AI 不够聪明，而在于没有给它足够的设计规范——每次生成界面时，AI 只能"靠猜"，导致颜色、字体、间距不一致，最终产品看起来像多个不同人设计的。
传统解决方案是找专业设计师，但成本高（少则五六千，多则几万）、周期长（数周），且设计稿转代码还需要额外时间。
现在，借助 Google Stitch + DESIGN.md + Claude Code 的组合，这套流程可以被大幅简化。
Google Stitch：AI 原生 UI 设计工具
产品定位：Google Labs 出品的 AI 原生 UI 设计工具，基于 Gemini 模型，可从文字描述、截图、草图直接生成高保真多页面界面。
访问地址：stitch.withgoogle.com（完全免费）
使用额度：每月 350 次标准生成 + 50 次实验模式额度。
核心能力：
- 截图重设计：上传现有界面截图，让 Stitch 重新设计
- 灵感图参考：拖入参考图，指定设计风格方向
- 网站风格解析：粘贴网址，反向解析设计风格并生成类似界面
- 语音输入：直接语音描述需求，自动转成 prompt 执行
生成逻辑：Stitch 与 Claude Code、Cursor 等工具的本质区别在于——它先生成图片，再转成代码。这意味着视觉设计阶段不受 HTML/CSS 限制，可以"想象"任何效果，再反向实现。
DESIGN.md：游戏规则的改变者
Stitch 只是设计工作流的一半，真正让流程完整的是 DESIGN.md 文件。
DESIGN.md 是什么？
DESIGN.md 是一个普通的 Markdown 文件，但里面包含整套产品的设计语言：颜色、字体、组件规范、设计哲学、禁止事项等，全部用自然语言写清楚。
类比理解：如果你熟悉 Claude Code 的 CLAUDE.md（编码规范文件），DESIGN.md 就是把这套模式从"代码层"扩展到"设计层"。
Google 官方定义：一份纯文本设计系统文档，AI Agent 可以读取它来生成一致的用户界面。没有 Figma 导出、没有 JSON 格式、无需特殊工具，就是 Markdown 文件。
核心价值：DESIGN.md 不是 Figma 的替代品，而是设计系统到 AI Coding Agent 之间的桥梁，让 design-to-code 不再靠猜。
AGENTS.md vs DESIGN.md：
| 文件 | 读者 | 作用 |
|---|---|---|
| AGENTS.md | Coding Agent | 教它怎么构建项目（"怎么做"） |
| DESIGN.md | Design Agent | 告诉它项目应该长什么样（"长什么样"） |
社区资源库：github.com/VoltAgent/awesome-design-md（接近 10K Star）
完整工作流：Stitch + DESIGN.md + Claude Code
以下是完整的六步工作流，以 Claude Code 为例（其他 AI Coding Agent 如 Codex、Antigravity、Gemini CL 等也适用）。
第一步：准备素材
- 改造已有产品：截图现有界面，拖到 Stitch 画布
- 从零开始：找 2-3 张参考图，确定大致方向（非直接复制）
第二步：编写聚焦的 prompt
告诉 Stitch 产品功能、要改的页面、设计风格（如暗色系、极简、编辑感等）。字体方向可指定，例如"标题用衬线体配正文无衬线体"（适合大多数 SaaS 产品）。
第三步：多版本筛选与组合
Stitch 会生成多个版本。不要只看第一个，逐一浏览所有版本，可以从不同版本中提取字体、布局、配色等元素进行组合。
第四步：导出 Design System
设计完成后，在右侧面板找到「Design Systems」功能，Stitch 会自动生成完整的设计系统（字体规范、颜色体系、组件规则、间距标准）。找到 design.md，复制全部内容。
第五步：创建项目 DESIGN.md 文件
在项目根目录新建 DESIGN.md 文件，粘贴第四步复制的内容并保存。这个文件从此成为整个产品设计语言的唯一标准。
第六步：连接 Stitch MCP
通过 MCP 协议将 Stitch 与 Claude Code 连接。
操作步骤：
- 访问 Stitch 官方文档，搜索"MCP setup"找到对应安装命令
- 针对 Claude Code 的安装命令示例：
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: api-key" -s user - 在 Stitch Settings 的 API 部分生成 API Key
- 将"安装命令 + API Key"一起配置给 Claude Code
- 重启 Claude Code 或会话，确认 Stitch 显示为已连接
使用示例：连接后，可以直接告诉 Claude Code：
"按照 Google Stitch 里 dashboard 页面的桌面端框架，用 Stitch MCP 来更新界面"
Claude Code 会自动列出 Stitch 项目，找到对应框架，获取真实 HTML/CSS 源码，然后在实际项目中重建界面。由于读取的是真实设计代码，hover 效果和过渡动画也会被正确实现。
苏米注：Stitch 有时会设计出产品中没有的功能模块（如"最近活动"面板、"通知中心"），因为它基于 System Prompt 猜测完整产品该有的功能。让 Claude Code 执行时，要明确告知哪些功能实际存在、哪些该跳过，避免后续删除工作。
DESIGN.md 核心内容解析
Google 官方定义了 4 个核心章节，VoltAgent 社区扩展到 9 个章节。
Google 官方 4 章
第一章：视觉主题与氛围
用感受描述产品性格，如"温暖、编辑感、值得信赖"。这是文档的精神内核，先定性格再定参数。
第二章：颜色体系
每个颜色包含"语义命名 + 用途说明"，而非直接列色值。例如："Terracotta Brand #c96442，用于品牌强调色和 CTA 按钮"。
第三章：字体规则
字体家族、字重、字号、行高、字母间距等关键信息。
第四章：组件样式
按钮、卡片、导航、输入框等组件的形状、颜色、交互状态，用自然语言描述。
VoltAgent 社区扩展 9 章
在官方 4 章基础上，增加了：
- 布局原则
- 阴影与层次体系
- 设计禁忌（特别重要）
- 响应式规则
- AI 提示词指南
设计禁忌章节：AI 在没有负面约束时会"自作聪明"，如在不该用品牌色的地方用品牌色、混用多种字体、在深色背景上用中性灰阴影等。明确写成"不允许"可避免大量返工。
AI 提示词指南：提供包含具体数值和色值的可执行提示词，例如：
"在 Parchment 背景 #f5f4ed 上创建一个 hero 区域，标题用 64px Anthropic Serif 字重 500，行高 1.10，文字颜色用 Near Black #141413，副标题用 Olive Gray #5e5d59 20px，CTA 按钮用 Terracotta Brand #c96442，圆角 12px"
设计规范关键细节
颜色系统
- 语义命名：用"Warm Sand"而非"浅灰"，用"Terracotta Brand"而非"橙色"——语义名称告诉 AI 何时使用
- 阴影纳入色彩体系：Stripe 的阴影是
rgba(50,50,93,0.25)的蓝调，这是品牌色的延伸
字体规范
除了基础字体家族和字号，OpenType 特性开关很关键。例如 Stripe 的 Sohne 字体在字重 300 配合 ss01 字形替换时才有品牌感。
阴影与深度系统
深色界面常见陷阱：在深色背景上用中性灰阴影完全看不见。
- Linear 方案：用半透明白色边框代替阴影
- Claude 方案：Ring Shadow 系统（
0px 0px 0px 1px阴影模拟柔和边框）
圆角体系
圆角不是单一数字，而是有性格的体系：
| 品牌 | 圆角 | 气质 |
|---|---|---|
| Stripe | 4px | 精确、专业、金融感 |
| Claude | 8-12px | 温暖但不失专业 |
| Linear | 最大 22px | 现代、流畅 |
| Notion | 9999px（胶囊形） | 亲和、标签化 |
现成设计规范资源库
如果不想从头编写 DESIGN.md，可以直接使用现成资源。
VoltAgent awesome-design-md 仓库：整理 6 大类、54 家公司的完整品牌设计规范，包括 Claude、xAI、Cursor、ElevenLabs、Supabase、Vercel、Lovable、Stripe、Notion、Apple、Uber、Airbnb 等。
每家公司的资料包含：
- 核心 DESIGN.md 设计说明
- 亮色版本交互式文件
- 暗色版本交互式文件
- dark 和 light 界面效果预览
风格选择建议：
- 温暖人文、编辑感、文学气息：从 Claude 的 DESIGN.md 开始
- 极暗极简、工程师审美：选 Linear
- 金融感、精密奢华、字体偏轻：选 Stripe
- 温暖极简、留白多、消费者产品感：选 Notion
- 开发者平台、黑色主题、绿色：选 Vercel 或 Supabase
从设计到上线：完整产品交付
完成 UI 设计后，Claude Code 可帮助完成后续交付工作：
- 认证模块：接 Supabase，设置用户账户、登录流程、权限安全规则
- 支付系统：接 Stripe，自动创建结账流程并连接用户系统（先用测试卡
4242 4242 4242 4242在沙盒模式验证） - 邮件通知：接 Resend，自动配置密码重置、欢迎邮件、通知消息
- 部署上线：推到 GitHub 并部署到 Vercel，后续改动自动同步
苏米注：你不需要理解 Stripe 的 webhook 机制或 Supabase 的安全模式，告诉 Claude Code 需求，它会主动索要所需凭据。
当前局限与注意事项
这套工作流虽强大，但也有局限：
- 字体调整：在 Claude Code 应用 Stitch 设计后，有时需要手动调整字体
- 颜色偏差：色值不总是精准复刻
- 复杂设计理解：Stitch MCP 读取 HTML/CSS，遇到特别复杂的设计，Claude Code 的理解可能与 Stitch 画布上不完全一致
- Token 成本：会话越长，token 消耗越多，需保持 prompt 专注
- 格式限制：目前不支持导出 React、Vue、SwiftUI 格式（在 Roadmap 上）
- 协作功能：暂不支持实时协作和多人评论，是单用户工具
- 微交互与动画：hover 效果和过渡动画有时是 Claude Code 读取代码后推断添加，非 Stitch 原生设计
尽管存在局限，这套工作流的核心价值在于：过去只有资金充足、有专业团队的公司才能维护完整设计系统，现在独立开发者或小团队也能以极低成本实现高质量 UI 设计。
总结
核心价值：一个人、一个下午或一两天，就可以做出以前需要花费几千到几万元、数周时间才能得到的结果。
工作流公式：Stitch（设计生成）+ DESIGN.md（设计规范）+ Claude Code（代码实现）= 一致性高质量 UI
虽然流程还不完美，但已比之前所有方案更优秀，且 Google 在持续快速更新 Stitch，缺口正在缩小。