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 提供了三个通道来应对：

  1. HTML/CSS Export：直接导出 Stitch 生成的代码片段
  2. DESIGN.md：结构化描述设计系统，Claude Code 可以精确读取
  3. 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 积累