·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 納入工作流程。

繼續閱讀：

← ← 返回部落格