Claude Code 的短板一直很明显：它能写逻辑，但设计出来的东西一看就是 AI 做的 。@PrajwalTomar_ 在推特上分享了一套他认为目前最接近解法的工作流：Google Stitch 2.0 + Claude Code via MCP 。
#核心思路
把设计和工程解耦：
Stitch 生成 UI（设计师角色）→ MCP 桥接到 VS Code（传输管道）→ Claude Code 实现代码（工程师角色）
Stitch 负责审美，Claude Code 负责实现。两者通过 MCP 协议直接通信，不需要截图、不需要手动复制 HTML。
#Stitch Design-to-Code 工作流
根据 Google Stitch 官方指南，完整 pipeline 分为 6 步：
Step 1 ：在 Stitch 中用文本描述、图像参考或语音输入生成 UI 设计
Step 2 ：用 Variants（设计变体）和原型工具迭代，直到满意
Step 3 ：导出 DESIGN.md——这是 Stitch 的设计系统文档，包含颜色、字体、间距、设计 Token 等信息
Step 4 ：在 VS Code 中配置 Stitch MCP Server，连接 Claude Code
Step 5 ：让 Claude Code 读取 DESIGN.md 和 Stitch 的设计输出
Step 6 ：Claude Code 对照设计实现像素级精确的代码
#设计还原度怎么保证
Design-to-Code 最难的问题是设计还原度 ——代码实现和设计稿之间的 drift。Stitch 提供了三个通道来应对：
- HTML/CSS Export ：直接导出 Stitch 生成的代码片段
- DESIGN.md ：结构化描述设计系统，Claude Code 可以精确读取
- MCP Server ：Claude Code 可以在生成过程中实时查询 Stitch 的设计信息，不需要手动同步
三通道同时生效，最小化设计与实现之间的语义丢失。
#Stitch 2.0 的核心能力
- Text to UI ：用自然语言描述界面，Gemini 生成对应设计
- Image to UI ：上传参考图，AI 提取风格特征并生成对应 UI
- Voice / Vibe Design ：用语音描述设计意图，适合快速原型阶段
- Design Variants ：一键生成多个设计变体，便于比较和选择
- DESIGN.md 导出 ：设计系统文档自动生成
MCP Server 支持两种认证方式：
- API Key ：简单直接，Key 永不过期，适合个人开发者
- OAuth（gcloud） ：更安全，Token 每小时刷新，适合团队协作
#Stitch-Kit：给 Claude Code 装上设计增强包
GitHub 上的 stitch-kit 项目提供了 35 个设计 skills，涵盖 ideation、批量生成、设计系统、迭代循环等场景，是 Stitch MCP 的功能增强层。
#什么时候用这个工作流
这套方案最适合两类场景：
Vibe coding 风格的产品原型 ：设计师或产品经理用 Stitch 快速出 UI 变体，开发者用 Claude Code 一键生成代码，不用再争论这个紫色渐变到底是不是 AI slop
需要严格设计系统的大型项目 ：通过 DESIGN.md 保证设计和代码始终同步，避免 design debt 积累