·11 分钟阅读

Google Stitch CLI 完全指南：终端生成 UI

官方 Stitch CLI 命令级上手教程：安装登录、generate 与 serve 工作流、agent-skills 一键接入 Claude Code / Cursor、dev server 快照回传，并厘清 stitch loop 与 stitch-loop 技能的区别。

S
Stitch Prompt Team
Content Team
StitchClaude Code教程AI

2026 年 10 月 1 日，Google Labs 正式发布官方 Stitch CLI（@google/stitch）。官方在发布时给了一句很有画面感的总结：Stitch 有了 MCP，有了 SDK，但一直没有 CLI——直到现在。

这句话点出了 CLI 的定位：它不是又一个"生成按钮"，而是把 Stitch 补全成第三条官方接入通道。对已经习惯在终端里工作的开发者来说，设计生成、原型预览和 Coding Agent 接入，不再必须从浏览器标签页开始。

本文是一份面向开发者的命令级上手教程：从安装登录到完整工作流，重点讲清楚三件事——CLI 能做什么、怎么和已有的 MCP / SDK 分工、以及它和社区里容易混淆的 stitch-loop 技能到底是不是一回事。

提示：Stitch CLI 目前处于快速迭代期，命令与参数可能变化。本文基于 2026 年 10 月的公开资料整理，实际操作时请以终端内 stitch --help 的输出为准。

一、Stitch 的第三块拼图：CLI 补齐了什么

在 CLI 之前，Stitch 已经有两条官方接入通道。把三者放在一起对比，分工就很清楚：

接入方式面向对象典型场景什么时候不合适
Stitch MCPCoding Agent 通过协议调用让 Claude Code、Cursor 等直接读写 Stitch 项目需要逐步手动控制流程
Stitch SDK写代码的开发者把生成能力集成进自己的工具链只想快速生成一个界面
Stitch CLI终端用户与 Agent 共用本地生成、预览、Agent 接入一步到位完全不想离开浏览器

CLI 带来三大能力：

  1. 连接本地编程 Agent：把 Stitch 能力交给终端里正在工作的 Agent。
  2. 生成界面与设计系统：与网页端一致的核心生成能力，用命令直接调用。
  3. 把本地开发服务器快照发回 Stitch：新增的反向通道，让 Stitch 看到"代码里实际长出来"的界面。

二、五分钟上手：从安装到第一个界面

安装与登录

环境要求：Node.js 20 或更高版本。

npm install -g @google/stitch
stitch login

创建项目并生成第一个界面

stitch create project --title "My App"
stitch generate screen --device DESKTOP --prompt "Clean analytics dashboard with sidebar navigation"
stitch serve

stitch serve 会在本地启动预览服务，生成结果可以立即查看，不需要切换到网页端。

核心命令速查表

命令作用
stitch login登录账号
stitch create project创建项目
stitch generate screen生成单个界面，--device 选择 DESKTOP 或 MOBILE
stitch generate variants基于当前设计生成变体，--creative-range 控制发散程度
stitch serve本地预览生成结果
stitch agent-skills add --user为本地 Coding Agent 安装 Stitch Skills

变体命令的 --creative-range 提供三个档位，与 SDK 的 variants 参数体系一致：

stitch generate variants --creative-range REFINE     # 在现有方向上微调
stitch generate variants --creative-range EXPLORE    # 探索相邻方向
stitch generate variants --creative-range REIMAGINE  # 大胆重构

三、一条命令接入所有 Coding Agent：agent-skills add

stitch agent-skills add --user

这一条命令会为以下 Agent 统一安装 Stitch Skills：

  • Claude Code
  • Cursor
  • Codex
  • Gemini CLI
  • Antigravity

装好之后，Agent 内会多出一个 /stitch 命令，可以直接完成三件事：生成屏幕、从 URL 提取设计系统、把 Stitch 原型转换为 React 组件。

和手动装 Skills 的区别

以前需要为每个 Agent 单独配置 Skills，Agent 越多，维护成本越高。现在一条命令覆盖全部，升级时也只需要重新执行一次。对已经按旧方式配置过 Skills 的项目，建议先用 CLI 的方式重装一遍，保持多个 Agent 的版本一致。

四、反向通道：把 dev server 快照发回 Stitch

传统的 Stitch 工作流是单向的：设计生成代码。CLI 补上了反方向——把本地开发服务器的快照发回 Stitch。

这一步的价值在于：Stitch 能看到真实运行中的界面，而不是一张静态截图。后续迭代基于"代码里实际长出来的样子"进行，减少用语言描述现状的沟通成本。

该能力的公开细节目前还比较有限，具体命令与支持范围请以官方文档为准。

五、stitch loop 是什么：和 stitch-loop 技能的区别

这是目前中文资料里最容易混淆的一点。两个名字非常接近，但属于完全不同的层级：

  • stitch loop（CLI 命令）：官方内部使用已久的 agentic 工作流。Agent 持续监控代码库、日志、分析和用户反馈，主动提出洞察与改进方案，定位是"全天候持续改进"。
  • stitch-loop 技能（Stitch Skills）：接力棒式的多页生成技能，解决的是"一次生成一组页面"的问题。

一句话区分：stitch loop 管持续改进，stitch-loop 技能管批量生成。 如果你是第一次见到这两个名字，记住这条就不会混。

stitch loop 的公开细节目前较少，官方尚未给出完整文档，建议持续关注后续更新。

六、实战工作流：生成、迭代、冻结 DESIGN.md、Agent 实现、验证

把 CLI 放进真实项目，推荐按下面五步走：

  1. 用 stitch generate screen 生成初始界面。
  2. 用 --creative-range 迭代出满意的设计方向。
  3. 把最终视觉规则沉淀成 DESIGN.md 并冻结。
  4. 让 Coding Agent 按 DESIGN.md 实现页面。
  5. 回到浏览器验证效果，把偏差反馈给下一轮迭代。

关键提醒：不要跳过"冻结 DESIGN.md"这一步。社区实践反复验证，直接让 Agent 凭记忆写 UI，很容易得到每一屏都是新风格的结果。DESIGN.md 的写法和校验方式，见 DESIGN.md 进 CI：用官方 lint 工具把设计规范变成可校验的工程制品。

七、已知限制与注意事项

  • alpha 阶段：功能与参数变化很快，自动化流程要注意锁定版本。
  • 额度限制：生成类命令依赖账号额度，批量操作前先确认配额。
  • "假成功"问题：社区反馈存在"报告成功但未实际修改"的情况，关键步骤建议人工复核。
  • Agent 接入不是万能：Skills 安装完成之后，仍然需要清晰、具体的任务描述。

八、常见问题（FAQ）

Q1：Stitch CLI 免费吗？

CLI 本身通过 npm 免费安装；生成能力跟随 Stitch 账号的额度体系，具体额度以官方说明为准。

Q2：已经有 MCP 了，还需要 CLI 吗？

如果工作流围绕 Coding Agent 展开，MCP 更顺手；如果习惯终端操作，或者需要脚本化、批量生成，CLI 更直接。两者可以共存，不必二选一。

Q3：安装后找不到 stitch 命令怎么办？

先确认 Node.js 版本不低于 20，再检查 npm 全局安装路径是否在 PATH 中；重新执行 npm install -g @google/stitch 通常可以解决。

九、总结

CLI 把 Stitch 从"浏览器里的设计工具"变成了"终端与 Agent 都能调用的设计能力"。对开发者来说，最重要的行动是三步：装好 CLI、用 agent-skills 打通手边的 Agent、然后把 DESIGN.md 纳入工作流。

继续阅读：

← ← 返回博客