Agent Skills 入門

Stitch Design Skills 是一組代理程式指令，為你的程式碼代理程式增添設計超能力——產生螢幕、擷取設計系統、建構多頁面網站，並將設計轉換成 React 元件。它們可搭配任何支援 Agent Skills 標準的代理程式：Gemini CLI、Claude Code、Cursor 或 Antigravity。

安裝外掛套件

在專案目錄中執行：

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

這會安裝全部三個外掛（stitch-design、stitch-build、stitch-utilities），共 13 項技能。

選擇你的代理程式目標

# Claude Code
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

# Cursor
npx plugins add google-labs-code/stitch-skills --scope project --target cursor

# Gemini CLI
npx plugins add google-labs-code/stitch-skills --scope project --target gemini-cli

Antigravity 使用者：plugins CLI 尚未支援以 Antigravity 為目標。請改用選擇性安裝章節中的 npx add-skill 命令。

選擇性安裝（選用）

如果你只需要特定技能，請執行下列命令並選取你要的技能：

npx skills add google-labs-code/stitch-skills

許多技能彼此相依。例如 code-to-design 技能需要 extract-static-html、extract-design-md 與 upload-to-stitch。完整安裝外掛是比較保險的選擇。

連接 Stitch MCP 伺服器

這些技能透過 Model Context Protocol 與 Stitch 溝通。請依照 Stitch MCP 設定說明註冊伺服器並設定你的 API 憑證。

連接後，你的代理程式就能存取 list_projects、generate_screen_from_text 與 get_screen 等工具。

驗證連線

你應該會看到既有的專案——若是第一次使用 Stitch，則會看到空清單。如果看到錯誤，請再次確認 MCP 伺服器正在執行，且你的 API 金鑰有效。

產生你的第一張螢幕

從粗略的想法開始。enhance-prompt 技能會把模糊的概念轉換成結構化、可直接用於生成的提示詞。

留意產出內容——該技能會加入平台規範、把頁面結構化為編號章節、以具體的 UI/UX 關鍵字取代模糊用語，並產生帶有色彩角色的設計系統區塊。這段強化後的提示詞，產生的結果會遠比原始版本好得多。

現在開始生成：

這需要 15–30 秒。完成後，你會看到包含螢幕 ID 與檔案路徑的確認訊息。開啟產生的截圖來查看你的設計——一個完整的登陸頁面，包含 hero 區塊、功能卡片、導覽與頁尾，全都來自單一段文字提示詞。

接下來

你已安裝技能、連接 Stitch，並產生了第一張螢幕。接下來可以前往：

• 從你的程式碼庫匯入——從既有原始碼擷取 DESIGN.md
• 程式碼轉設計往返——把 React 應用程式匯入 Stitch、編輯設計，再匯出回元件
• 以循環方式建構——從單一概念產生整個網站
• 技能參考——全部 13 項技能的完整目錄

疑難排解

問題	解決方式
找不到 npx plugins	安裝 Node.js 18+：node --version
MCP 伺服器沒有回應	驗證設定：MCP 設定指南
技能未出現在代理程式中	安裝後重新啟動代理程式工作階段
權限錯誤	使用 --scope project 而非 --scope global
API 金鑰錯誤	確認代理程式 MCP 設定中的金鑰尚未過期