Google Stitch & Claude Code：6 个设计稿，10 分钟搞定

Google Stitch是一款免费的AI设计工具，可将自然语言描述直接转化为高保真UI设计稿。本文分享了如何结合Claude Code分析产品需求文档，自动生成设计Prompt并批量扩展Stitch设计稿的实战经验。通过MCP连接，Claude Code能读取现有设计系统并分析缺失页面，但需要注意API Key仅支持读取操作，写入需OAuth2认证。最终形成的工作流是：Claude Code分析

良逍成长笔记

1023人浏览 · 2026-03-24 00:22:26

良逍成长笔记 · 2026-03-24 00:22:26 发布

上次写了 Claude Code + Figma MCP 画原型的教程，评论区好多人问：有没有免费的方案？

有了。Google 的 Stitch，免费，不需要设计基础，用自然语言描述就能出高保真设计稿。

这次我用 Claude Code 分析产品计划文档，让它自动算出缺哪些页面，然后批量生成 Stitch 设计 prompt，一口气从 5 个页面扩展到 11 个。整个过程大概 10 分钟。

但中间踩了一个坑 —— Claude Code 连 Stitch MCP 后，能读不能写。这个坑搜了半天才搞明白，下面一起说。

Google Stitch 是什么

简单说：Google 出的 AI 设计工具，文字描述 → 高保真 UI 设计稿。

跟 Figma 不同，Stitch 不需要你会画图。你告诉它"我要一个健康 App 的运动详情页，顶部放今日概览，下面是每段运动的卡片"，它直接生成一个可用的设计稿，带完整的色彩体系、字体、间距。

几个核心能力：

文字生成 UI — 描述页面结构，自动生成
设计系统 — 自动生成配色、字体、圆角等完整 Design System
编辑现有页面 — 选中一个屏幕，用文字描述修改内容
生成变体 — 对现有设计生成多种风格版本
导出代码 — 每个设计稿都是 HTML + CSS，可以直接用

而且：完全免费。

三种导出方式

生成的设计稿不是只能看，有三种方式用起来：

1. 导出 Figma 文件 — 团队协作时用这个，导出后在 Figma 里精修。之前有人说 Figma 免费额度有限制，Stitch 目前免费额度还很充裕。

导出 Figma

2. 导出到 Google AI Studio — 不装额外工具，直接在 Google 生态里构建应用。

导出 AI Studio

3. 通过 MCP 连接 Claude Code — 我主要用这种，让 Claude Code 读取设计系统后辅助开发。

MCP 连接配置

这篇主要讲第三种，但我的是在原有的设计稿上面去迭代和优化功能，所以需要claude补充一下prompt，但实际上也可以只针对这几个页面新增需求文档，直接发给google stitch也可以。

实战过程：从计划文档到设计稿

我在做一个 iOS 健康 App（BodyMate），之前在 Stitch 里已经有 5 个基础页面。但随着功能迭代，需要新增几个页面，现有页面也需要更新。

第一步：让 Claude Code 分析需求

我的项目 docs/plan/ 目录里有 4 份计划文档：

docs/plan/
├── CROSS_INSIGHT_PLAN.md    # 运动×体脂交叉洞察
├── SLEEP_DETAIL_PLAN.md     # 睡眠详情页
├── MULTI_SCALE_PLAN.md      # 多品牌体脂秤适配
└── WATCH_PLAN.md            # Apple Watch 集成

我让 Claude Code 做了两件事：

读取 Stitch 项目，看现在有哪些页面
读取所有计划文档，分析缺哪些页面

Claude Code 通过 Stitch MCP 读取到现有 5 个屏幕（Home Dashboard、Measurement Result、Trends History、Settings、AI Assistant），然后逐份读取计划文档，自动交叉对比后给出了结论：

需要新增 3 个页面：Workout Detail、Sleep Detail、AI Weekly Report
需要更新 3 个页面：Home Dashboard、Measurement Result、Trends History

这一步完全自动，我没有手动对比任何文档。

第二步：生成设计 Prompt

Claude Code 根据计划文档里的具体需求（页面结构、数据字段、交互方式），结合 Stitch 项目已有的设计系统（色彩、字体、间距），为每个页面生成了一段详细的设计 prompt。

比如运动详情页的 prompt，它会把计划文档里的具体指标（心率区间色彩、运动类型图标、2×3 指标网格布局）全部翻译成 Stitch 能理解的设计描述，同时引用现有设计系统的色值（主色 #4A9D5B、紫色 #5B4FA0 用于睡眠等）。

Claude Code 生成优化 prompt

这一步的价值在于：Claude Code 同时理解产品需求和设计系统，生成的 prompt 比我自己写的要准确得多。

第三步：在 Stitch 里生成

把 prompt 粘贴到 Stitch 网页端，选择 App 或 Web 类型，点击生成：

Stitch 生成界面

新建 3 个页面 + 编辑 3 个现有页面。每个页面生成大概 1-2 分钟。

最终效果：从 5 个页面扩展到 11 个，新页面和原有页面风格完全统一。

Claude Code 连接 Stitch MCP

配置方法

最简单的方式：在 Stitch 网页端打开项目，点导出，选择 Claude Code MCP，会直接显示连接配置和 API Key。

MCP 配置页面

复制配置信息，直接发给 Claude Code，让它帮你连接：

Claude Code 连接

也可以手动执行命令：

claude mcp add stitch "https://stitch.googleapis.com/mcp" \
  -t http \
  -H "X-Goog-Api-Key: 你的API_KEY"

配置完用 claude mcp list 确认，看到 stitch: ✓ Connected 就 OK。

能做什么

连上之后，Claude Code 获得了 8 个工具：

工具	功能
`list_projects`	列出所有项目
`get_project`	查看项目详情（含完整设计系统）
`list_screens`	列出项目中的所有屏幕
`get_screen`	查看某个屏幕的详情
`create_project`	创建新项目
`generate_screen_from_text`	文字生成新屏幕
`edit_screens`	编辑现有屏幕
`generate_variants`	生成设计变体

看起来读写都有，对吧？坑就在这里。

踩坑：能读不能写

现象

我让 Claude Code 直接调用 generate_screen_from_text 生成新页面，API 调用返回了 “completed”，没报错。

但等了两分钟去看 —— 啥也没生成。

又试了 edit_screens 编辑现有页面，同样返回 “completed”，同样没生效。

反复试了好几轮，所有读取操作（list、get）都正常，所有写入操作都静默失败。

原因

翻了 Google AI 开发者论坛才找到答案：

“API keys are not supported by this API. Expected OAuth2 access token or other authentication credentials that assert a principal.”

翻译成人话：API Key 只够用来读数据，生成和编辑需要 OAuth2 认证。

API Key 权限对比

真正坑的是它不报错，直接返回成功，你以为生成好了，结果啥都没有。

解决方案

有两条路：

方案 A：切换到 OAuth2 认证（完整方案）

# 1. 确保装了 gcloud CLI
brew install google-cloud-sdk

# 2. OAuth2 登录
gcloud auth application-default login

# 3. 启用 Stitch API
gcloud services enable stitch.googleapis.com

然后用 stitch-sdk 的 proxy server 代替直连，它会自动处理 OAuth2 token 刷新。

方案 B：Claude Code 生成 prompt，手动在 Stitch 网页端执行（我用的）

说实话，方案 B 反而更实用。因为 Claude Code 的核心价值不是"代替你按按钮"，而是分析需求 + 生成高质量 prompt。这部分它做得非常好，我手动粘贴到 Stitch 里只需要几秒钟。

我的工作流总结

产品计划文档（.md）
    ↓  Claude Code 读取分析
现有 Stitch 设计稿
    ↓  Claude Code 交叉对比
缺口分析（需要新增/编辑哪些页面）
    ↓  Claude Code 生成 prompt
Stitch 网页端粘贴执行
    ↓  Stitch AI 生成设计
完整设计稿（11 个页面）

核心思路：用 Claude Code 做"大脑"（分析、决策、生成指令），用 Stitch 做"手"（执行设计）。

完整工作流

对比我之前写过的 Claude Code + Figma MCP 方案：

维度	Stitch	Figma MCP
成本	免费	需要 Figma 付费账号
设计质量	高保真，有完整设计系统	取决于 Figma 模板
MCP 读写	读 OK，写需要 OAuth2	读写都 OK
学习门槛	零基础可用	需要了解 Figma
适合场景	快速出原型、验证想法	精细设计、团队协作

再往前看一步，Stitch 接入之后，完整的 Vibecoding 工作流可以打通：

AI 讨论需求 → 输出需求文档
    ↓
需求文档发给 Stitch → 明确主题颜色和样式 → 生成设计稿
    ↓
Claude Code 通过 MCP 读取 Stitch 设计系统
    ↓
直接进入前端开发（设计稿的色值、字体、间距全部自动继承）

从需求到设计到代码，一条链路打通，中间不断档。

几个实用建议

个人感觉Prompt 越具体越好 — 不要只写"做一个运动页面"，要写清楚每个卡片的结构、数据、色值。Claude Code 帮你生成的 prompt 就很详细，这也是为什么效果好。——但google stitch的初衷貌似是希望可以给你设计灵感，所以你应该也可以不具体，看看他可以给你一些什么意想不到的设计。-感兴趣的可以去尝试下。
先建设计系统 — 在 Stitch 里先创建项目、配好主色调和字体，后续生成的页面会自动继承这些设定，风格统一。
编辑比新建好用 — 如果已有类似页面，用编辑功能在上面改，比从头生成更容易保持风格一致。
MCP 配置别删 — 虽然写不了，但读取功能很有价值。Claude Code 能直接读取你的设计系统配置（色值、字体、间距），生成 prompt 时会自动引用这些参数。

我之前写过 Claude Code + Figma 画原型的完整教程（那篇有 1038 次转发），这次算是补上了免费方案。两个工具各有适用场景，不冲突。

如果你也在做 App、做独立开发，Stitch 值得试试。尤其是早期验证阶段，

有问题可以留言，我看到都会回。