Stitch Skills 是什麼、怎麼安裝使用：配合 Google Stitch 的設計 Skills（文字生成介面、DESIGN.md、設計轉 React）

本文根據 google-labs-code/stitch-skills 倉庫 README 整理，資料核對於 2026-10-11。截至當日，GitHub 顯示該倉庫約 8463 Star、1108 Fork，最近一次推送在 2026-08-17；skills.sh 榜單上其中的 design-md 技能累計安裝約 6.3 萬次。技能清單以倉庫為準。

是什麼

Stitch 是 Google Labs 的 AI 介面設計工具：用文字或圖片生成介面設計稿。Stitch Skills 是圍繞它的一組 Agent Skills 和插件，README 說它遵循 Agent Skills 開放標準，兼容 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 等編程智能體，OpenCode 需要手動安裝。

它解決的是「設計工具」和「寫代碼的智能體」之間的銜接：讓智能體直接在 Stitch 裏出圖、改圖、管理設計規範，再把結果變成項目裏的組件代碼。這些技能都依賴 Stitch MCP 服務——README 把它列為前置條件，要先按 Stitch 文檔完成 MCP 的註冊和認證。

包含哪些 Skill

README 分三個插件列出：

設計（stitch-design）

• code-to-design：把前端代碼（React、Vue 等）轉成 Stitch 裏的設計；
• generate-design：用文字或圖片生成新介面、編輯已有介面、生成設計變體；
• manage-design-system：管理設計系統，上載 DESIGN.md 並把主題應用到各個介面；
• extract-design-md：直接從前端源碼裏提取出一份完整的 DESIGN.md；
• extract-static-html：從運行中的網頁應用提取自包含的靜態 HTML；
• upload-to-stitch：把本地圖片、設計稿、HTML 上載到 Stitch 項目。

構建（stitch-build）

• react-components：把 Stitch 的介面轉成 React 組件體系，帶自動校驗；
• react-native：轉成 React Native 組件；
• remotion：用 Remotion 為 Stitch 項目生成走查影片；
• shadcn-ui：集成和使用 shadcn/ui 組件的指導；
• react-vite-dashboard：把介面轉成 React 加 Vite 的儀表盤。

工具（stitch-utilities）

• design-md：分析 Stitch 項目，生成語義化描述的 DESIGN.md；
• enhance-prompt：把含糊的介面想法改寫成更適合 Stitch 的提示詞；
• stitch-loop：從一句話出發生成完整的多頁網站，並自動校驗；
• taste-design：生成強調高質感、避免千篇一律的 DESIGN.md。

怎麼安裝

README 推薦以插件方式安裝。Claude Code（裝到當前項目）：

bash
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

Cursor 把後半段換成 --scope workspace --target cursor。Codex 用 codex plugin marketplace add google-labs-code/stitch-skills --ref main 添加市場後，按需安裝 stitch-design、stitch-build、stitch-utilities。只想挑幾個技能，README 也給了 npx skills add google-labs-code/stitch-skills。OpenCode 需要手動把技能文件夾複製到 .opencode/skills/ 並自行配置 MCP。

怎麼用

README 的示例提示：

• 「給一個約會靈感類的手機應用做一個瀏覽頁」——generate-design；
• 「掃描 /src，把設計系統提取到 .stitch/DESIGN.md」——extract-design-md；
• 「把 Stitch 項目裏的所有介面轉成 React 組件」——react-components；
• 「優化這句提示詞：做一個設定頁」——enhance-prompt。

適合誰 / 不適合誰

適合：

• 已經在用 Stitch 出設計稿、想打通到代碼的前端開發者和獨立開發者；
• 想用 DESIGN.md 這種文本化設計規範約束 AI 輸出的團隊。

不適合：

• 不用 Stitch 的人——絕大多數技能離開 Stitch MCP 無法工作；
• 設計流程以 Figma 為核心的團隊。

注意事項

• 許可：Apache-2.0。README 聲明這不是 Google 官方支持的產品。
• 需要 Google 帳號和 Stitch 的訪問條件：Stitch 屬於 Google Labs 的實驗性產品，可用地區、額度與條款以其官網為準，國內網絡訪問受限。
• 會上載內容：code-to-design、upload-to-stitch 等技能會把你的前端代碼或頁面快照傳到 Stitch，涉及未公開的產品時先確認是否合適。
• 技能命名：部分技能的名字帶 stitch:: 前綴，README 提到某些工具（如 OpenCode）要求改成短橫線命名後才能加載。