Google Stitch 2.0 + Claude Code：AI 设计工作流的革命

核心观点

Google Stitch 2.0 + Claude Code 通过 MCP 连接，彻底改变了 AI 驱动的产品设计流程。一个人在一小时内就能完成过去需要数周和数千美元的专业设计工作。关键不在于 AI 生成设计，而在于 design.md 文件实现的设计系统一致性。

传统设计流程的痛点

旧流程的成本

金钱成本：雇佣设计师需要 $3,000 - $10,000
时间成本：等待数周才能拿到 Figma 文件
实现成本：还需要额外时间和费用将设计落地到代码
机会成本：等设计完成时，产品动力已经消失

AI 设计的常见问题

大多数用 AI 构建的应用看起来像”AI 垃圾”，不是因为 AI 的问题，而是工作流的问题：

功能可以工作，逻辑也正确
但 UI 看起来很普通，用户在 2 秒内就会做出判断
一致性是最大的问题：第一个页面看起来不错，第二个页面就崩了

Google Stitch 2.0 的突破

什么让 Stitch 2.0 与众不同？

Stitch 2.0 是一个 AI 原生画布，可以：

输入多种创意来源
- 现有应用的截图
- Dribbble 或 21st.dev 的灵感图片
- 任何网站的 URL（反向工程其设计）
生成多个设计变体
- 不只是一个输出，而是多个可选方案
- 可以从不同变体中提取最佳元素
自动构建完整设计系统
- 排版比例（display、headline、label、title、body）
- 主色、辅色、第三色调色板（自动生成互补色）
- 每个色调的色阶
- 组件规则和模式
- 高度和深度规范
- 设计语言的”该做”和”不该做”

关键创新：design.md

所有设计规则都自动记录在一个 design.md 文件中。这是一个纯 Markdown 文件，捕获了每一条设计规则。

这个文件改变了一切。

实际工作流程

第 1 步：在 Stitch 中设计

准备素材
- 截图现有应用的主要屏幕
- 或从 Dribbble 抓取 2-3 张灵感图片（不是复制，而是找方向）
编写聚焦的提示词
- 说明应用的功能
- 指定要重新设计的屏幕
- 设定设计方向（深色模式、极简、编辑风格等）
- 指定字体偏好（字体是提升应用感觉的最快方式）
- 示例：衬线字体用于标题，干净的无衬线字体用于正文
选择最佳变体
- 不要只接受第一个输出
- 从每个变体中提取最佳元素
- 一个的排版 + 另一个的布局 + 第三个的色彩能量
语音输入（可选）
- Stitch 现在支持语音输入
- 自动转录为提示词

为什么 Stitch 输出质量高？

Stitch 先生成图像，再生成代码。

不受 HTML 和 CSS 限制
可以想象任何视觉效果
然后从参考图像反向构建
这就是为什么设计比直接提示编码工具更精致

第 2 步：导出 design.md

在 Stitch 右侧面板点击 Design Systems
Stitch 已根据你的设计自动创建了设计系统
点击 design.md
复制整个文件
在项目根目录创建 design.md 文件
粘贴并保存

这个文件现在是你整个设计语言的唯一真实来源。

design.md 解决的核心问题

之前：每次提示 Claude Code 构建新屏幕或添加新功能时，设计会漂移

颜色会略有变化
字体会改变
间距变得不一致
应用看起来像 10 个不同的人构建的（因为每个提示都是不同的上下文）

之后：Claude Code 在每个提示中都引用 design.md

设计语言在每个屏幕、每个组件、每个新功能中保持锁定
困扰每个 AI 构建应用的一致性问题被一个 Markdown 文件解决了

可持续性：

随着产品发展不断更新 design.md
添加新的组件规则、新模式、新约束
它与你一起成长

第 3 步：通过 MCP 连接 Stitch 和 Claude Code

这是工作流变得疯狂的地方。

design.md 给 Claude Code 规则。MCP 连接给 Claude Code 更强大的东西：直接访问 Stitch 框架的实际 HTML 和 CSS。

不是设计的描述，而是真实的源代码。

设置步骤

在 Google Stitch 文档中搜索”Google Stitch MCP setup”
找到适合你平台的安装命令
在 Stitch Settings → API 部分创建 API 密钥
将安装命令和 API 密钥粘贴到 Claude Code 终端
启动新会话，Stitch 将显示为已连接

使用方式

提示 Claude Code：

"使用 Stitch MCP 更新仪表板屏幕，以匹配 Google Stitch 中桌面框架的布局。"

Claude Code 会：

列出你的 Stitch 项目
找到正确的框架
获取源代码
重建你的 UI 以匹配

整个过程只需几分钟。

注意事项

Stitch 有时会设计你应用中尚不存在的功能（如”最近活动”部分或通知面板）。

解决方案：

明确告诉 Claude Code 要包含什么、跳过什么
准确说明代码库中实际构建了哪些功能
否则你会花时间删除不应该存在的东西

第 4 步：构建完整产品

在同一个 Claude Code 会话中处理所有集成：

认证（Supabase）

连接 Supabase
生成令牌并交给 Claude Code
自动设置用户账户、登录流程、角色级安全
会话在刷新时持久化

支付（Stripe）

在 Stripe 仪表板中创建产品和定价
提供公钥和私钥给 Claude Code
自动找到产品 ID、构建结账流程、连接到用户系统
先在沙盒模式测试（测试卡：4242 4242 4242 4242）

邮件（Resend）

连接 Resend
自动设置密码重置、欢迎邮件、通知
Claude Code 构建边缘函数并连接到认证流程

部署（GitHub + Vercel）

推送到 GitHub
部署到 Vercel（一键完成）
之后的每次更改自动反映在实时站点上

关键优势：Claude Code 会指导你完成每个集成

不需要理解 Stripe 的 webhook 系统
不需要了解 Supabase 的安全模型细节
告诉 Claude 你想要什么，它会询问需要的具体凭据

诚实的局限性

作者强调了一些不完美的地方：

字体：从 Stitch 应用设计后，有时需要手动调整
颜色：不总是以完全正确的色调传递
复杂布局：MCP 读取 HTML 和 CSS，如果 Stitch 生成特别复杂的内容，Claude 可能会有不同的解释
Token 消耗：较长的会话会花费更多，需要保持提示聚焦

但这些都不会改变根本性的转变：

过去需要数千美元和数周时间的工作
现在一个人在一个下午就能完成
工作流还不完美，但比之前的一切都好得多
而且 Google 正在快速更新 Stitch，差距正在迅速缩小

这是新标准

过去的现实

有资金的团队：有设计师、品牌指南、Figma 系统、专人维护设计一致性
独立开发者和小团队：从未有过这些资源

2026 年的现实

如果你在 2026 年用 AI 构建产品，并且：

仍在为 MVP 级别的工作支付数千美元给设计师
或者因为不知道如何修复设计而发布看起来像”AI 垃圾”的应用

这个工作流现在存在了。它有效。已经过测试。

关键启发

1. 设计系统的民主化

过去只有大公司才能负担得起的设计系统，现在任何独立开发者都可以拥有：

完整的排版系统
一致的色彩体系
组件规则和模式
全部自动生成并文档化

2. design.md 是关键创新

不是 AI 生成的设计本身，而是：

单一真实来源：一个文件控制整个设计语言
上下文持久化：每次提示都引用同一套规则
可演化：随着产品成长而更新

这解决了 AI 驱动开发中最大的痛点：一致性。

3. 工作流 > 工具

文章反复强调：

如果你的应用看起来像”AI 垃圾”，不是 AI 的问题
是工作流的问题
正确的工作流可以让一个人完成整个团队的工作

4. 成本对比

项目	传统方式	新工作流
设计师费用	$3,000 - $10,000	$0
时间	数周	1 小时
实现成本	额外费用	包含在内
一致性维护	需要专人	自动化

5. 技术栈整合

完整的现代 AI 驱动开发栈：

设计：Google Stitch 2.0
开发：Claude Code
认证：Supabase
支付：Stripe
邮件：Resend
部署：GitHub + Vercel

所有这些都可以在一个会话中完成，Claude Code 指导整个过程。

行动清单

尝试 Google Stitch 2.0 生成设计系统
学习如何编写有效的设计提示词
在项目中实施 design.md 工作流
测试 Stitch MCP 与 Claude Code 的集成
探索完整的技术栈整合（Supabase + Stripe + Resend）

来源：X/Twitter - @PrajwalTomar_