Stitch CLI：谷歌免费的 UI 设计工具，搭配 Claude Code 重构 Help AIO 样式设计

Stitch CLI 体验分享：谷歌免费的 UI 设计工具，搭配 Claude Code 重构 Help AIO 样式设计

Google Stitch CLI 是最近半年我用过最顺手的 AI 设计工具——免费、谷歌账号直接登录、出图质量在线，终端里就能用。我的个人站 helpaio.com 最近一次翻新就是用它做的。

适合偶尔要做界面、不想学设计软件、也不想为设计再付订阅费的人。有 Claude Code 体验最佳，没有也能纯命令行跑通。

一、为什么是 Stitch

我的情况：不会设计，但要经常给网站和项目做页面。

原来的 Help AIO 无数次希望重新设计，但是总因为这样那样的原因半途而废。

很多人吐槽 AI 页面"一股 AI 味"（紫蓝渐变、圆角卡片、满屏 emoji），但最新的模型早就没那么套路了。我真正的痛点是：脑子里既没有想要的样式，也描述不出来。

"高级感"、"留白多一点"、"像 Linear 那样"——这种描述发给 AI，出来的永远差口气，一个页面来回调提示词能磨一下午。

试过的几个方案：

Claude Design：质量好，但要 Claude 付费账号，支付难还怕封号，为设计再养一个号不划算。
Open Design：开源的 Claude Design 平替，但部署要拉 Node + pnpm + Electron 全家桶，用下来功能多但细节糙。
Stitch 网页版：出图质量一直认可，但只有网页版和 MCP——画完截图、喂给 Agent、再还原，全是手工搬运。

直到谷歌最近把 Stitch 做成了 CLI，最后一块拼图补齐了。

二、Stitch CLI 是什么

Stitch 是 Google Labs 的 AI UI 设计工具：给一句话描述或一张草图/截图，生成完整界面 + 可用的 HTML/CSS，背后是 Gemini 3 系列模型。

感受：Gemini 虽然被称为美国大豆包，但从 Gemini 3 起 UI 审美一直是第一梯队。提示词写得再随意，排版、配色、间距也基本在线——比当时的 Claude Opus 4.6 强一截，比 GPT 更是强到不知道哪里去了。描述不精细时，模型的审美能兜住底，正好对上我的痛点。

Stitch CLI（@google/stitch）把这个能力搬进了终端，和网页版 / MCP 的区别：

设计变成一条命令，和代码、Git 在同一个工作流里；
往 coding Agent 里装一个 /stitch skill，Agent 自己知道怎么调；
HTML 直接落盘，不用从网页复制。

而且 Stitch CLI 不要求你用 Gemini CLI。 通过 Skill 可以装进 Claude Code、Codex 这些 Agent 里让它们自己调用——谷歌只管出图，调度方用谁随你。

我的建议：Claude Code + Stitch CLI 是目前最舒服的组合。 界面设计交给 Stitch，拿到 HTML 后的响应式、交互、数据接入交给 Claude——它的前端目前最稳。Codex 也能驱动 Stitch CLI，但 GPT 不擅长前端，接手设计稿很容易把好东西改坏。后文 Agent 示例以 Claude Code 为例，没有 Agent 也都有对应的纯命令。

三、安装和接入（五分钟）

要求 Node.js 20+，然后：

bash

npm install -g @google/stitch
stitch login        # 谷歌账号 OAuth 登录，不用绑卡

不想全局安装可以用 npx @google/stitch；CI 等无头环境用 STITCH_API_KEY 代替登录。

接着把 skill 装进你的 coding Agent：

bash

stitch agent-skills add --user                        # 装到 ~/.agents/skills，Codex、Gemini CLI 等读这个目录
stitch agent-skills add --user --dir .claude/skills   # Claude Code 只读 ~/.claude/skills，要单独指定目录

支持 Agent Skills 约定的 Agent 都能用（Claude Code、Codex、Cursor、Gemini CLI 等），更建议搭配 Claude、Kimi 这类 UI 能力强的模型。

用 Claude Code 一定要跑第二行，装完重开会话就有 /stitch 了。

额度：目前免费，Standard 模式（Gemini Flash）每月约 350 次，Pro 模式（Gemini Pro）每月 50~200 次，另有 3 并发限制。我用免费账号翻新整个站花了 3 天，一次都没撞到。

四、日常怎么用：把"憋提示词"变成"挑方案"

在 Claude Code 里直接说：

code

/stitch 创建一个项目叫 "HelpAIO 改版"，生成一个深色监控仪表盘风格的首页，
包含中转站可用率榜单、价格对比卡片和最近更新公告区

或者纯命令行（skill 本质就是帮你记住这些命令）：

bash

stitch create project --title "HelpAIO 改版"
stitch config set project <project-id>     # 钉住项目，之后不用重复带 --project
stitch generate screen \
  --title "首页" \
  --device DESKTOP \
  --prompt "深色监控仪表盘风格，可用率榜单 + 价格卡片 + 公告区"
stitch serve                               # 本地预览，真实可交互的页面

先挑方向，再精修

最省时间的其实是迭代方式：以前提示词不满意只能重写，现在分两步。

第一步，先要几个方向。 generate variants 一次出 1~5 个变体，可以控制"变多少"和"变什么"：

bash

# --creative-range：REFINE 微调 / EXPLORE 中等 / REIMAGINE 推倒重来
# --aspects：只动布局和配色，别的别碰
stitch generate variants \
  --screen <screen-id> \
  --count 3 \
  --creative-range EXPLORE \
  --aspects LAYOUT,COLOR_SCHEME \
  --prompt "试试更高信息密度的布局和一套高对比配色"

第二步，选一个局部微调。 edit screen 一次只改一件事、说清楚改哪：

bash

stitch edit screen <screen-id> \
  --prompt "把顶部的 KPI 卡片换成紧凑的单行横排，右上角加一个日期范围选择器"

"先挑方向、再精修"，来回调提示词的时间省了一大半。

首屏提示词怎么写

一个踩坑经验：首屏提示词别写"给我做一个 XX 应用"，模型会把每个角落塞满假数据、假 badge。官方推荐的四段式更好用：

code

[画布] 这个页面放什么、不放什么
[原则] 每个元素都要有存在的理由
[素材] 嵌入你上传的真实图片（见下）
[内容] 精确到具体数据的文案

需要配图时：先用 Gemini 生图（1:1、撑满画幅），stitch upload screen 传进项目，再在提示词里引用——Stitch 会原样嵌入，而不是自己编占位图。

个人经验：单纯使用 Stitch 很难理解业务，配合 Claude 让它理解当前业务、写好提示词再去设计，效果会更好——这也是第六节的重点。

五、DESIGN.md：我觉得最有价值的部分

这是 Stitch 体系里最被低估的东西：把网站的视觉风格抽成一个纯文本文件，放进仓库，人和 Agent 都能读。官方定位：

文件	给谁看	定义什么
README.md	人	这个项目是什么
AGENTS.md	编码 Agent	代码怎么写
DESIGN.md	设计 Agent	东西应该长什么样

格式是 YAML front matter（颜色、字体、圆角等 token）+ Markdown 正文（设计原则），大概长这样：

yaml

---
version: alpha
name: HelpAIO Dark Monitor
colors:
  primary: "#1A1C1E"
  secondary: "#6C7278"
  tertiary: "#B8422E"
typography:
  h1:
    fontFamily: Public Sans
    fontSize: 48px
    fontWeight: 600
rounded:
  sm: 4px
  md: 8px
---

它正好解决开头的痛点：描述不出来的风格，抽一次、存下来，以后所有页面都从它出发。 我给 helpaio.com 抽了一份存进仓库，之后无论我、Claude Code 还是 Stitch 改页面，风格都不跑偏。

而且它有配套工具：

bash

npx @google/design.md lint DESIGN.md     # 校验，8 条规则，连 WCAG 对比度不够都会报
npx @google/design.md diff OLD.md NEW.md # 看两版风格差在哪
npx @google/design.md export --format tailwind DESIGN.md  # 直接导成 Tailwind 配置

导出 Tailwind 很实用，不用手抄色值。

六、拿 helpaio.com 翻新当例子

整个翻新我没手敲一条 stitch 命令，全程在 Claude Code 里用大白话说，Claude 自己去调 Stitch。这也是第四节末尾说的重点：Stitch 不懂你的业务，Claude 懂——它先读代码、搞清楚页面是干什么的，再替我把提示词写好交给 Stitch。

1. 先让 Claude 理解页面，再抓现状

code

/stitch 先读一下首页的代码，搞清楚每个区块是干什么的。
然后把本地跑着的 http://localhost:23333 首页抓下来，传到 Stitch 项目里当参考

Claude 背后跑的是 stitch capture + stitch upload screen：先在本地生成规范化 HTML 和一张 1280×800 验证截图，检查没问题才上传，对隐私敏感的项目很友好。

2. 抽 DESIGN.md

code

/stitch 从现有代码里提取一份 DESIGN.md，同步到 Stitch 项目

Claude 会写好 DESIGN.md、校验格式，再用 stitch upload design 绑定到项目，之后生成的页面都按这份规范走。

3. 出改版方向

code

/stitch 基于首页出 3 个改版方向，重点是可用率榜单更醒目、整体更有层次，配色可以大胆一点

这一步 Claude 的价值最明显：它知道"可用率榜单"背后是什么数据、哪些信息最重要，写给 Stitch 的提示词比我自己憋的具体得多。挑中一版后，继续一句话让它局部微调。

4. 本地审查

code

/stitch 对照 DESIGN.md 审查一下首页，列出最该修的问题

意外好用的功能：随手写的灰色、破坏 4px 网格的间距、不够的对比度都会被揪出来。全程本地跑，不调云端，报告精确到 CSS 选择器和截图区域，Claude 还会停下来让你挑先修哪些。

5. 落地成代码

code

/stitch 把选中的那版设计稿拉下来，按它改造首页，现有的数据接口和交互保持不变

Claude 用 stitch get screen --code 拉下 HTML，然后接手响应式、交互、数据接入——Stitch 的 HTML 只是半成品，上线还得靠前端硬功夫。

整个流程我只负责说需求和挑方案，设计和写代码第一次不用在两个软件之间来回导文件。

七、和 Claude Design、OpenDesign 比，我为什么留下它

不是评测，只是个人选择理由：

维度	Stitch CLI	Claude Design	OpenDesign
价格	免费，谷歌账号即可	Claude 付费订阅	免费开源（自带模型 key）
门槛	npm 一行，不用绑卡	开卡难，还有封号风险	要部署一整套本地服务
Agent 集成	CLI + skill + MCP，各家通吃	只在 Claude 生态里	支持很多 Agent，但走 MCP 且偏重
出图质量	Gemini 3 驱动，审美在线	标杆水平，生态连接器多	取决于你自己的模型
隐私/本地化	审查本地跑，素材先落盘	纯云端	本地优先，这点最好
短板	Labs 实验项目，政策随时可能变；有 3 并发限制	闭源、锁 Anthropic	功能多但糙，质感一般

我的情况：已有 Claude Code 订阅，不想再开第二张卡，也不想维护本地服务，Stitch CLI 正好免费补上设计这块。

公平地说：需要把设计稿直接推到 Vercel / Canva / Adobe，Claude Design 的连接器生态是 Stitch 没有的；在意数据完全不出本机，OpenDesign 最彻底。

八、收尾

适合偶尔要做界面、不想学设计软件、也不想为设计再付订阅费的人。有 Claude Code 体验最佳，没有也能纯命令行跑通。

一句话：Stitch CLI 出设计，coding Agent 落地，设计住进了终端；DESIGN.md 则把"风格"变成了可版本管理的资产。

最后提醒：这是 Google Labs 实验项目，额度和政策说变就变（谷歌砍项目的速度大家都懂）。重要设计记得 stitch get screen --code 拉下 HTML、DESIGN.md 存进仓库。

附：文中涉及的命令在 Stitch CLI 官方文档都能查到，DESIGN.md 规范见 @google/design.md。