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 命令參考——所有命令、子命令與旗標，一處查齊。