·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 を登録するという 2 つのことを行います。手順は公式 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 は設定の手書きで対応します。

もう 2 つの主流エージェントとの違いは一目瞭然です。

項目Claude Code / CursorOpenCode
スキルのインストールnpx plugins が自動で書き込み.opencode/skills/ へ手動でコピー
スキルの命名stitch:: プレフィックスに対応小文字 kebab-case かつディレクトリ名と一致が必須
MCP の登録claude mcp add / .cursor/mcp.jsonopencode.json の mcp フィールド

幸いなことに、手動インストールの作業は スキルのコピー と MCP の登録 の 2 つだけです。

前提：まず Stitch MCP の公式設定を済ませる

Stitch Skills は本質的に「説明書」のようなもので、実際のデザイン生成能力は Stitch MCP Server からもたらされます。MCP の設定ができていなければ、スキルをインストールしても動作しません。

まず公式の手順に沿って認証と MCP の設定を済ませます（API Key または OAuth のいずれかを選択）。

  • 公式設定ガイド（本サイトのミラー）：MCP の設定と認証
  • 公式原文：stitch.withgoogle.com/docs/mcp/setup

完了すると 2 つの情報が手に入ります。ステップ 3 で使用します。

  1. Stitch MCP エンドポイント：https://stitch.googleapis.com/mcp
  2. 認証情報：API Key（X-Goog-Api-Key ヘッダーに対応）または OAuth トークン

ステップ 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/ 下の必要なディレクトリを順にコピー

リポジトリでは、3 つのプラグインごとにスキルが整理されています。

プラグイン用途
stitch-designデザインワークフロー：画面の生成／編集、フロントエンドコードのインポート、素材のアップロード、デザインシステムの管理
stitch-buildコード生成：React コンポーネント、React Native、Remotion 動画、shadcn/ui など
stitch-utilitiesプロンプト強化、DESIGN.md 生成、複数ページサイトのループ構築など

完全なスキル一覧はスキルリファレンスをご覧ください。

推奨：1 つのスキルだけをコピーして終わりにしないでください。Stitch のスキル同士には依存関係があり（文末の注意事項を参照）、1 つ欠けるだけでワークフローが途中で失敗することがあります。

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/ に置きます。

ステップ 2：命名の落とし穴を解決する

ここは OpenCode の手動インストールで最もつまずきやすいステップです。スキルをコピーしたのに OpenCode が読み込まない——原因の 9 割は name が規則に準拠していないことです。

2.1 OpenCode の name バリデーションルール

SKILL.md の frontmatter では、name が次の条件を満たす必要があります。

  • 1〜64 文字
  • 小文字英字／数字で、単語間は 1 つのハイフン（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 を 1 つずつ確認したところ、以下のスキルは改名が必要です（本記事執筆時点）。

ディレクトリ変更前の 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 が一致しない場合、修正方法は 2 つあります。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"  # モデルによる自動呼び出しを無効化

（任意設定です。設定しなくても使用できます。）

ステップ 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 が必要に応じて認可を促します。

ステップ 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. 1 画面を生成する（全体の流れを確認）：

    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:: プレフィックスが最も多い原因です。ステップ 2 を参照）、④ セッションを再起動する。

Q: なぜ OpenCode では npx plugins によるワンコマンドインストールが使えないのか？

OpenCode は npx plugins / npx skills や Codex / Claude のプラグインマーケットプレイス構成を採用していません。公式 README では OpenCode 専用に「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 のインストールは、次の 4 ステップに集約できます。

  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 実践 もご覧ください。

← ← ブログに戻る