任務技能（Skills）
Stitch Skills
讓 AI 根據文字或參考圖設計頁面，再把設計轉成前端組件。
內容介紹
少裝一點整理 · 依據項目公開文件
適合想先看界面設計、再開發網頁或應用的人。這個技能包連接你自己的 Google Stitch 項目，指導 AI 生成和修改頁面、整理設計樣式，並按所選技能轉換為 React 等界面程式碼。使用前需要可用的 Stitch 帳號、項目權限和配置好的 MCP 連接，也就是讓助手調用設計工具的接口。按文件選擇技能並保留所需配套文件。儲存庫由 Google Labs 程式碼組織發佈，但文件注明不屬於 Google 官方支持的產品；服務額度以官方說明為準。
開始使用
先核對使用條件，再選擇你的 AI 助手查看接入步驟。
- 需要準備
- 可使用外掛的 Codex、Claude Code 或 Cursor；後兩者的安裝命令需要 Node.js 和 npm。
- 先在 Stitch 使用自己的帳號，再按官方說明準備 MCP 連接憑據；生成設計需要聯網。
- 費用說明
- 外掛程式碼採用 Apache-2.0 開放原始碼許可；Stitch 的可用額度與限制以帳號內說明為準，AI 助手使用費用另計。
- 需要的權限
- MCP 可讀取或修改授權範圍內的 Stitch 項目；設計提示詞和選擇上傳的圖片、HTML 等資料會發送到 Stitch，生成文件會保存到本地。只上傳獲准使用的資料，帳號憑據保存在自己的助手配置中。
Codex有官方接入說明
當前 README 單獨列出 Codex 的安裝方式；還需連接 Stitch MCP（讓助手存取你的 Stitch 設計的工具連接）。
接入步驟
- 在 Codex 的“設定 → 外掛市場 → 添加”中填寫來源 https://github.com/google-labs-code/stitch-skills，Git ref 填 main。
- 在新增的市場安裝 stitch-design；第一次只使用設計外掛即可。
- 按下方 Stitch MCP setup 配置帳號憑據和連接，開啓新會話後讓它列出自己的 Stitch 項目。
怎樣確認接入有效
應能得到自己的真實項目列表；沒有項目時返回空列表也可用於核對連接。之後再請求生成一個測試頁面，並在 Stitch 中檢查結果；裝好技能不等於 MCP 已連接。
官方依據
Claude Code有官方接入說明
當前 README 單獨列出 Claude Code 的安裝方式；還需連接 Stitch MCP（讓助手存取你的 Stitch 設計的工具連接）。
接入步驟
- 在要使用的項目目錄打開終端，確認已安裝 Node.js 和 npm。
- 執行 npx plugins add google-labs-code/stitch-skills --scope project --target claude-code，按安裝提示核對外掛。
- 按下方 Stitch MCP setup 配置帳號憑據和連接，開啓新會話後讓它列出自己的 Stitch 項目。
怎樣確認接入有效
應能得到自己的真實項目列表；沒有項目時返回空列表也可用於核對連接。之後再請求生成一個測試頁面，並在 Stitch 中檢查結果；裝好技能不等於 MCP 已連接。
官方依據
Cursor有官方接入說明
當前 README 單獨列出 Cursor 的安裝方式；還需連接 Stitch MCP（讓助手存取你的 Stitch 設計的工具連接）。
接入步驟
- 在要使用的項目目錄打開終端，確認已安裝 Node.js 和 npm。
- 執行 npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor，按安裝提示核對外掛。
- 按下方 Stitch MCP setup 配置帳號憑據和連接，開啓新會話後讓它列出自己的 Stitch 項目。
怎樣確認接入有效
應能得到自己的真實項目列表；沒有項目時返回空列表也可用於核對連接。之後再請求生成一個測試頁面，並在 Stitch 中檢查結果；裝好技能不等於 MCP 已連接。
官方依據
官方依據
接入說明核對於 2026-10-13 · 依據公開文件整理，未逐一安裝實測。
可以怎麼用
- 根據文字或參考圖生成、修改頁面
- 整理設計樣式並保持頁面一致
- 按所選技能將設計轉換為前端組件
官方項目與文件
專案說明譯文
與 Stitch MCP 伺服器配合使用的 Agent Skills 技能庫。每個技能遵循開放 Agent Skills 標準，面向 Antigravity、Gemini CLI、Claude Code、Cursor 等編程助手。
用途相近的外掛
優先匹配當前外掛的主要用途，再參考共同用途和收藏數；接入方法可能不同。
- Anthropic Skills · Frontend Design — 從產品用途出發，規劃頁面、編寫介面，再檢查布局、文字和互動是否合適。
- Taste Skill — 讓展示型網站有明確的設計方向，完成後再用瀏覽器檢查真實效果。
- Text to CAD — 把尺寸和形狀要求交給 AI，生成可繼續修改的三維零件模型。