·12 分鐘閱讀

Google Stitch + OpenCode 實戰：手動安裝 Skills 並設定 MCP

寫給 OpenCode 使用者的 Stitch Skills 手動安裝教學：複製技能目錄、避開命名陷阱（stitch:: 前綴與 kebab-case 驗證）、在 opencode.json 註冊 Stitch MCP，並附上與 Claude Code / Cursor 的安裝對照。

S
Stitch Prompt Team
Content Team
StitchOpenCodeAI教學GitHub

Google Stitch 的 Agent Skills（stitch-skills）讓 AI 程式設計代理直接操作 Stitch：生成介面、管理設計系統、把設計匯出成元件。官方儲存庫為 Claude Code、Cursor、Codex 等工具提供了 npx plugins 一鍵安裝，但 OpenCode 不在其中——它需要手動把技能目錄複製到 OpenCode 能探索到的路徑，並避開幾個命名上的坑。

這篇教學帶你完成兩件事：把 Stitch Skills 裝進 OpenCode，並在 opencode.json 裡註冊 Stitch MCP。步驟基於官方 stitch-skills README 的 OpenCode 段落與 OpenCode 官方文件，並補充了逐一實測每個技能後的命名清單。

邊界說明：stitch-skills 由 google-labs-code 組織維護，README 明確聲明「This is not an officially supported Google product.」（非 Google 官方支援產品）。本文僅作安裝指引，不代表 Google 立場。

為什麼 OpenCode 需要單獨一篇

stitch-skills 的標準安裝方式依賴命令列工具：

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

但這套機制（含 npx skills、Codex / Claude 的外掛市集佈局）OpenCode 並不適用。官方 README 在「Quick Start」裡把 OpenCode 單列為「manual install（手動安裝）」：技能靠複製目錄，MCP 靠手寫設定。

和另外兩種主流代理的差異一目瞭然：

環節Claude Code / CursorOpenCode
技能安裝npx plugins 自動寫入手動複製到 .opencode/skills/
技能命名相容 stitch:: 前綴必須小寫 kebab-case 且等於目錄名
MCP 註冊claude mcp add / .cursor/mcp.jsonopencode.json 的 mcp 欄位

所幸手動安裝總共只有兩個動作：複製技能 + 註冊 MCP。

前置作業：先完成 Stitch MCP 官方設定

Stitch Skills 本質上是一層「說明書」，真正的設計生成能力來自 Stitch MCP Server。MCP 沒設定好，技能裝上了也無法運作。

先按官方流程完成認證與 MCP 設定（API Key 或 OAuth 任選）：

完成後你應該會拿到兩樣東西，Step 3 會用到：

  1. Stitch MCP 端點：https://stitch.googleapis.com/mcp
  2. 憑證：API Key（對應 X-Goog-Api-Key 標頭）或 OAuth 權杖

Step 1：手動複製技能目錄

1.1 複製儲存庫

git clone https://github.com/google-labs-code/stitch-skills
cd stitch-skills

1.2 複製需要的技能

# 在專案目錄下建立 OpenCode 技能目錄
mkdir -p .opencode/skills

# 複製單一技能（以 generate-design 為例）
cp -R plugins/stitch-design/skills/generate-design .opencode/skills/generate-design

# 其他技能同理：把 plugins/*/skills/ 下需要的目錄逐一複製過去

儲存庫按三個外掛組織技能：

外掛用途
stitch-design設計工作流程：生成/編輯螢幕、匯入前端程式碼、上傳素材、管理設計系統
stitch-build程式碼生成：React 元件、React Native、Remotion 影片、shadcn/ui 等
stitch-utilities提示詞增強、DESIGN.md 生成、多頁網站循環建構等

完整技能清單見技能參考。

建議：不要只複製單一技能就收工——Stitch 技能之間存在依賴關係（見文末注意事項），缺了任何一個，都可能讓工作流程半途失敗。

1.3 OpenCode 的技能探索路徑

OpenCode 會從以下位置自動探索技能（從目前目錄向上查找，直到 git 儲存庫根目錄）：

範圍路徑
專案層級（OpenCode）.opencode/skills/<name>/SKILL.md
全域（OpenCode）~/.config/opencode/skills/<name>/SKILL.md
專案層級（Claude 相容）.claude/skills/<name>/SKILL.md
全域（Claude 相容）~/.claude/skills/<name>/SKILL.md
專案層級（Agent 相容）.agents/skills/<name>/SKILL.md
全域（Agent 相容）~/.agents/skills/<name>/SKILL.md

也就是說：如果你的專案裡已經有 .claude/skills/ 或 .agents/skills/（例如之前為 Claude Code 裝過），OpenCode 會直接讀取，無需重複複製。想單獨給 OpenCode 使用，就放在 .opencode/skills/。

Step 2：解決命名陷阱

這是 OpenCode 手動安裝最容易翻車的一步：技能複製過去了，但 OpenCode 不載入——九成是 name 不合規。

2.1 OpenCode 的 name 驗證規則

SKILL.md 的 frontmatter 中，name 必須滿足：

  • 1–64 個字元
  • 小寫字母/數字，單字之間以單一連字號分隔（kebab-case）
  • 不以 - 開頭或結尾，不出現連續的 --
  • 必須與所在的目錄名完全一致

對應的正規表示式：

^[a-z0-9]+(-[a-z0-9]+)*$

2.2 stitch:: 前綴改名清單

stitch-skills 為相容 Claude Code 的命名空間機制，部分技能的 name 寫成了 stitch::xxx 形式，例如：

# plugins/stitch-design/skills/generate-design/SKILL.md
name: stitch::generate-design

OpenCode 不認這種前綴，需要把 name 改成與目錄名一致的小寫形式：

name: generate-design

我們逐一核對了儲存庫中全部技能的 frontmatter，以下技能需要改名（截至本文撰寫時）：

目錄原 name改為
code-to-designstitch::code-to-designcode-to-design
generate-designstitch::generate-designgenerate-design
manage-design-systemstitch::manage-design-systemmanage-design-system
extract-design-mdstitch::extract-design-mdextract-design-md
extract-static-htmlstitch::extract-static-htmlextract-static-html
upload-to-stitchstitch::upload-to-stitchupload-to-stitch
react-componentsstitch::react-componentsreact-components
react-nativestitch::react-nativereact-native

其餘技能（react-vite-dashboard、remotion、shadcn-ui、design-md、enhance-prompt、stitch-loop、taste-design）的 name 已經合規，無需改動。

如果目錄名與 name 不一致，兩種修法任選：改 name 來匹配目錄，或把目錄重新命名成 name。推薦前者，改動幅度最小。

2.3 allowed-tools 會被忽略

stitch-skills 的 frontmatter 裡常帶 allowed-tools（如 Bash、web_fetch）——這是 Claude Code 的欄位，OpenCode 會忽略它，不影響技能載入。

OpenCode 自己的擴充欄位放在 metadata 下，例如：

metadata:
  opencode/slash: "true"        # 把技能公開為 /generate-design 指令
  opencode/autoinvoke: "false"  # 不讓模型自動呼叫

（選用，不設定也能用。）

Step 3：在 opencode.json 註冊 Stitch MCP

3.1 最小設定（官方 README 片段）

在專案根目錄的 opencode.json（或全域 ~/.config/opencode/opencode.json）加入：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "stitch": {
      "type": "remote",
      "url": "YOUR_STITCH_MCP_URL",
      "enabled": true
    }
  }
}

把 YOUR_STITCH_MCP_URL 替換成在前置章節取得的 Stitch MCP 端點。

3.2 帶 API Key 的完整設定（推薦）

如果使用 API Key 認證，請補上 headers 欄位：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "stitch": {
      "type": "remote",
      "url": "https://stitch.googleapis.com/mcp",
      "enabled": true,
      "headers": {
        "X-Goog-Api-Key": "YOUR_API_KEY"
      }
    }
  }
}

YOUR_API_KEY 在 Stitch 設定頁產生（步驟詳見 MCP 設定指南）。

3.3 OAuth 方式

OpenCode 會自動處理遠端 MCP 的 OAuth 認證：如果 Stitch MCP 端走的是 OAuth 流程，維持 3.1 的設定（不加 headers）即可，OpenCode 會在需要時引導你完成授權。

Step 4：工具名稱差異——改寫技能時的坑

技能正文（SKILL.md 的指令部分）裡會提到「要呼叫哪個工具」。stitch-skills 是依 Claude Code 的工具名稱撰寫的，與 OpenCode 的內建工具名稱不一致：

stitch-skills 裡的寫法OpenCode 對應工具
web_fetchwebfetch
run_command / Bashbash

allowed-tools 欄位會被忽略（見 2.3），所以技能載入不受影響；但如果你發現技能「說要呼叫某個工具卻卡住」，把技能正文裡的工具名稱按上表改成 OpenCode 的名稱即可。

驗證：讓 OpenCode 操作 Stitch

重新啟動 OpenCode 工作階段（或新開一個），依序驗證：

  1. 技能是否已載入：在對話中問「你有哪些技能可用？」——OpenCode 會在 skill 工具的描述裡列出技能名稱與描述。

  2. 列出 Stitch 專案（驗證 MCP 連線）：

    用 Stitch 列出我的所有專案。

    OpenCode 應呼叫 list_projects 並傳回專案清單。

  3. 生成一張螢幕（驗證完整鏈路）：

    在 Stitch 建立一個專案「OpenCode Demo」，並生成一個簡潔的登入頁螢幕。

    正常情況下會依序呼叫 create_project 與 generate_screen_from_text，新螢幕隨後會出現在 stitch.withgoogle.com。

如果第 2 步出現錯誤，先回到前置章節檢查 MCP 設定與憑證。

與 Claude Code / Cursor 的安裝方式對照

環節Claude CodeCursorOpenCode
技能安裝npx plugins add ... --target claude-codenpx plugins add ... --target cursor手動複製到 .opencode/skills/
技能目錄.claude/skills/（自動寫入）目前工作區（自動寫入）.opencode/skills/（或相容讀取 .claude、.agents）
命名要求相容 stitch:: 前綴相容 stitch:: 前綴必須為 kebab-case 且等於目錄名
MCP 註冊claude mcp add stitch ....cursor/mcp.jsonopencode.json 的 mcp 欄位
更新技能重新執行安裝指令重新執行安裝指令重新複製技能目錄

注意事項

  1. 先設定 MCP，再安裝技能：技能只是說明書，沒有 MCP 就寸步難行。
  2. 相依技能要一併安裝：官方 README 特別提醒 Stitch 技能之間存在互相依賴——例如 code-to-design 依賴 extract-static-html、extract-design-md 和 upload-to-stitch。選擇性安裝時務必把相依技能一併複製。
  3. 解除安裝 = 手動刪除目錄：沒有套件管理員參與，刪除 .opencode/skills/<name>/ 就完成解除安裝。
  4. 更新 = 重新複製：儲存庫更新後（git pull）重新執行 cp -R 覆蓋即可。
  5. 非官方支援聲明：stitch-skills 由 google-labs-code 組織維護，README 明確聲明它不是 Google 官方支援的產品（「This is not an officially supported Google product.」）。

常見問題

Q: 技能裝好了，但 OpenCode 說找不到？

依序檢查：① 目錄是否在探索路徑內（建議 .opencode/skills/）；② SKILL.md 檔名是否全大寫；③ frontmatter 的 name 是否為小寫 kebab-case 且與目錄名完全一致（stitch:: 前綴是最常見的原因，見 Step 2）；④ 重新啟動工作階段。

Q: 為什麼 OpenCode 不能用 npx plugins 一鍵安裝？

OpenCode 不採用 npx plugins / npx skills 或 Codex / Claude 的外掛市集佈局，官方 README 為它單獨列了「manual install」段落——複製技能、手寫 MCP，就是本文的流程。

Q: MCP 連不上怎麼辦？

先完成 MCP 設定：確認 url 為 https://stitch.googleapis.com/mcp、enabled 為 true、API Key 尚未過期。若走 OAuth，確認沒有同時設定互相衝突的 headers。

Q: 和 Claude Code 教學裡的技能是同一批嗎？

是。技能本身完全相同，差異只在「怎麼裝」：Claude Code 用 npx plugins 自動寫入，OpenCode 則需要手動複製並修正命名。

總結

OpenCode 的 Stitch Skills 安裝可以濃縮成四個步驟：

  1. 設定 MCP — 按官方指南取得端點與憑證
  2. 複製技能 — cp -R plugins/*/skills/<name> .opencode/skills/<name>
  3. 修正命名 — name 去掉 stitch::，改成小寫 kebab-case 並與目錄名一致
  4. 註冊 MCP — 在 opencode.json 加入 mcp.stitch（remote + headers）

完成後，你就可以在 OpenCode 裡用自然語言讓 Stitch 生成介面、管理設計系統、匯出元件——和 Claude Code 使用者拿到的是同一套能力。

想深入了解技能本身，可以繼續閱讀：技能參考、Claude Code 安裝教學、Code-to-Design 實戰。

← ← 返回部落格