Stitch CLI 快速上手

欢迎使用 Stitch CLI。无论你喜欢直接在终端里运行命令，还是通过编码智能体配合 /stitch 来驱动设计工作流，都能在几分钟内从一个空文件夹得到一个在 localhost 上运行的可交互设计。

安装 CLI

使用 npm 全局安装 @google/stitch（需要 Node.js 20 或更高版本）：

npm install -g @google/stitch
stitch --version

也可以用 npx @google/stitch 直接运行。

登录

运行 stitch login，通过浏览器使用 Google OAuth 登录。一次登录即可同时验证你的 Stitch 画布项目和工作区工作流：

stitch login

如果在无头环境或 CI 流水线中运行，请设置 STITCH_API_KEY，或在全局配置中保存 API 密钥（stitch config set apiKey "your_api_key_here" --global）。你可以随时用 stitch status 查看登录状态。

为编码智能体添加 /stitch 技能

如果你使用 Claude Code、Cursor、Gemini CLI 或 Antigravity 这类编码智能体，请安装内置的 /stitch 技能，让你的智能体知道如何替你驱动 CLI：

stitch agent-skills add --user

安装完成后，你可以直接在智能体的对话中调用 /stitch 来生成屏幕、提取并同步 DESIGN.md，或审查正在运行的应用：

从终端生成第一个屏幕

你也可以直接在 shell 中执行每一步。先创建一个 Stitch 画布项目并固定到当前目录，这样就不必在每条命令里都传 --project：

stitch create project --title "Checkout Redesign"
stitch config set project <project-id>

现在用一条提示词生成屏幕：

stitch generate screen \
  --title "Order Summary" \
  --device DESKTOP \
  --prompt "A clean two-column checkout summary on warm paper (#FAF8F5) with itemized billing, shipping selector, and a primary payment button"

屏幕生成后，启动本地预览服务器，在 localhost 上检查实时 HTML；也可以直接在浏览器中打开 Stitch 画布上的项目：

stitch serve
stitch open project

接下来去哪里

根据你正在构建的内容，选择合适的工作流：

• 生成与编辑屏幕 — 创建屏幕、探索创意变体，一次打磨一个细节。
• 与编码智能体迭代 — 上传自定义艺术素材，在第一轮提示词中框定聚焦的设计，并在 localhost 上接入交互状态。
• 同步设计系统 — 使用 /stitch 或 stitch upload design 把 DESIGN.md 规格绑定到项目。
• 捕获运行中的应用 — 从本地开发服务器捕获实时路由快照，并上传到 Stitch 画布。
• 审查应用 UI — 运行本地设计审查，将正在运行的应用与 DESIGN.md 对比。

处理现有仓库

当你希望 Stitch 分析整个代码库、发现其中的路由，并基于产品目标提出 UI 原型时，请先在本机启用一次工作区功能：

stitch enable loop

然后查看工作区指南：

• 连接仓库 — 将代码库与 Stitch 工作区配对，并关联你的画布项目。
• 优先级与上下文 — 设置长期 UI 原型目标，并附加产品规格。
• 代码库原型 — 把代码库的 UX 洞察和方案规格转化为 Stitch 画布屏幕。
• CLI 命令参考 — 所有命令、子命令和 flag 集中一处。