Google Stitch Skills のインストール方法: Stitch MCP、Codex、Claude Code とデザインワークフロー構成

Sun, 12 Jul 2026 12:16:00 +0800

Google Stitch Skills は、Stitch 用のエージェントスキルとプラグインのセットです。これは、エージェントスキルのオープンスタンダードに従っており、Codex、Gemini CLI、Claude Code、Cursor などのコーディングエージェントとともに使用できます。これは別個の「プロンプトワードパック」ではありません。これらのスキルが対応するデザインワークフローにアクセスできるようにするには、事前に Stitch MCP を設定して実行することが正式に必要です。【公式倉庫】(https://github.com/google-labs-code/stitch-skills)

すでに Codex Skills Workflow をお持ちの場合は、より焦点を絞ったデザインプラグインのコレクションとして考えることができます。stitch-design はデザインタスクを担当し、stitch-build は構築とコンポーネントに重点を置き、stitch-utilities は補助機能を提供します。

インストール前に 3 つの確認を行ってください

Stitch MCP 構成、資格情報、およびネットワークアクセスが利用可能です。
スキルがユーザーレベル、プロジェクトレベル、ワークスペースレベルのいずれで実行されるかを明確にし、プロジェクト固有のデザインコンテキストをグローバルシステムにインストールしないようにします。
どのデザイン、コード、スクリーンショットを外部サービスに引き渡すことができ、どのデザイン、コード、スクリーンショットをローカルに保持する必要があるかを把握します。

スキルをインストールするだけで、「なぜツールがないのか」のトラブルシューティングを行わないでください。スキルはエージェントに動作方法を指示する責任があり、Stitch 機能を実際に提供するのは MCP サーバーです。

まず空のプロジェクトで Stitch MCP を確認します。

メインプロジェクトにおける最初の問題のトラブルシューティングはまだ行わないでください。一時ディレクトリを作成するか、機密設計データのないテストプロジェクトを使用し、Stitch ドキュメントに従って MCP 認証と接続を完了し、MCP サーバーが接続済みとして表示されるかどうかをクライアントから確認します。次に、エージェントに、利用可能なデザインリソースの一覧表示や、サンプルコンポーネントに基づいた非公開ページバリアントの生成など、読み取り専用またはドラフト専用のタスクを実行させます。

このステップの目的は、正式な設計を行うことではなく、問題を階層化することです。MCP ツールが表示されない場合は、サーバーコマンド、認証、およびネットワークを確認します。ツールは表示されるがスキルが有効にならない場合は、プラグインのインストール範囲を確認してください。呼び出すことはできるが、結果が正しくない場合は、プロジェクトのルール、入力、権限に戻ります。 3 種類の問題を混同せず、「再インストール」で解決してください。

テスト環境が利用できることを確認したら、設置場所を決定します。個人が頻繁に使用する共通のスキルは、ユーザーレベルに配置できます。特定のコンポーネントライブラリ、トークン、または設計仕様に依存するスキルは、プロジェクトレベルに配置できます。ワークスペースレベルで考慮できるのは、チーム共有ワークスペースのみです。範囲が大きくなるほど、内部リンク、スクリーンショット、または独自の設計コンテキストが含まれているかどうかを確認する必要性が高くなります。

Codex インストールプラグインマーケット

公式の Codex CLI のインストール方法は次のとおりです。

codex plugin marketplace add google-labs-code/stitch-skills --ref main \
  --sparse .agents/plugins \
  --sparse plugins/stitch-design \
  --sparse plugins/stitch-build \
  --sparse plugins/stitch-utilities

--sparse は、必要なパスのみを取得し、最初のクローンの内容を削減するために使用されます。マーケットプレイスにサインアップした後、必要に応じてデザイン、ビルド、またはツールのプラグインをインストールします。すべてのプラグインをデフォルトですべてのプロジェクトにインストールしないでください。

カーソルを使用したクロードコードの公式の例は、プロジェクトまたはワークスペーススコープのインストールです。

1
2

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

インストールが完了したら、クライアントを閉じて再度開き、対応するエントリがプラグインリストに表示されることを確認します。コマンドは正常に実行されたが、クライアントがロードされていない場合は、まず、現在のディレクトリがプロジェクトのルートディレクトリであるかどうか、--scope が期待どおりであるかどうか、およびチーム構成が個人構成をオーバーライドするかどうかを確認します。隠しディレクトリを手動でコピーしてプラグインマネージャーをバイパスしないでください。こうすることで、後続の更新、アンインストール、依存関係チェックのための追跡可能なエントリが残ります。

選択的にインストールする場合は依存関係を見逃さないでください

少数のスキルのみが必要な場合は、次を使用します。

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

ただし、公式のヒントは、ステッチデザインスキル間に依存関係がある可能性があるということです。選択インストール後に「スキルは表示されますが、実行に失敗しました」というメッセージが表示された場合は、インストールを繰り返したり、手動でディレクトリをコピーしたりするのではなく、まず、そのスキルが参照している依存関係が同時にインストールされているかどうかを確認してください。

最小限のプラグインセットを使用して設計タスクを完了する

たとえば、既存のダッシュボードをフィルターページにするだけでよい場合は、最初に stitch-design とその宣言された依存関係をインストールし、実際にコンポーネントコードを生成する場合にのみ stitch-build を保持します。リポジトリへの書き込みや共有プロジェクトの公開の権限を付与せずに、エージェントが最初に設計ドラフトを出力し、指示を変更できるようにします。ドラフトで既存のナビゲーション、カラートークン、テーブルフィールド、およびコンポーネントの名前付けを再利用できることを確認します。これらの制約が正しくなったら、ビルドフェーズに進みます。

プラグインまたは MCP をアップグレードする前に、同じテストタスクのセットを再度実行する必要があります。クライアントのバージョン、プラグインのバージョン、MCP 構成、およびテスト入力を記録します。新しいバージョンでツール名が変更されたり結果が生成された場合、実際の設計プロジェクトを一時的にトラブルシューティングする代わりに、すぐにロールバックできます。

レビューする前に設計タスクを作成する方法

エージェントに「もっと最新のホームページを作成してください」とだけ言わないでください。より安定したタスクでは、入力、許容される副作用、および許容基準が提供されるはずです。

基于现有 Dashboard 组件创建一个新的筛选页草案。
只生成设计变体，不修改仓库代码，不发布到共享项目。
保留现有颜色 token、导航和表格字段。
输出两个变体，并说明每个变体改变了哪些组件和交互状态。

これにより、設計ツールが「ドラフトの生成」をスキップして「製品コードの変更」または「共有設計の上書き」に直接移行することを防ぎます。

納品前の実践的なチェックリスト

設計タスクの終了時には、会話の中で曖昧に済ませず、使用した Skill と MCP ツール、読み取った設計リソース、生成または変更したページ、未実行の操作を Agent に列挙させます。人が共有プロジェクトを誤って公開していないか、重要なコンポーネントが既存の token を引き続き使用しているか、スクリーンショットに外部共有すべきでない業務データが含まれていないかを確認します。

コードリポジトリまで作業が及ぶ場合は、「設計ドラフトの完成」と「コード変更の完成」を別のコミット、または別の承認ポイントに分けます。前者では探索を許可し、後者では既存のテスト、コードレビュー、リリース手順に従います。これにより Stitch Skills は設計ワークフローの理解を助けながら、設計ツールと本番変更の責任境界を曖昧にしません。

よくある質問

状況	最初に確認すること
Skill をインストールしたが Stitch ツールがない	Stitch MCP が設定・起動され、認証が完了しているか
インストール後に特定のプロジェクトでしか表示されない	`--scope project` または workspace のスコープが想定どおりか
選択的インストール後に機能が不足する	関連 Skill の依存関係を確認し、単一ディレクトリだけをコピーしない
設計結果がブランドに合わない	token、コンポーネントライブラリ、禁止操作、スクリーンショットの受入基準をプロジェクト規則に書く

まとめ

Stitch Skills は、まず利用可能な Stitch MCP を用意し、次にプロジェクトの必要に応じてプラグインまたは Skill を選び、最後に明確な設計入力と受入基準で Agent を制約する順序で使います。インストールの成功は出発点にすぎません。スコープ、依存関係、設計データの境界が、チームのフローで安定して使えるかを決めます。

設計タスクの終了時に、エージェントは会話の中で単なるヒントではなく、どのスキルと MCP ツールが使用されたか、どの設計リソースが読み取られたか、どのページが生成または変更されたか、どのアクションがまだ実行されていないのかを示す必要があります。共有プロジェクトが誤ってリリースされていないか、主要コンポーネントがまだ既存のトークンを使用しているかどうか、スクリーンショットに外部に送信すべきではないビジネスデータが含まれているかどうかを手動で再確認します。

タスクをコードウェアハウスに入れる必要がある場合は、「設計ドラフトの完了」と「コード変更の完了」を 2 つの提出ポイントまたは 2 つの承認ポイントに分割します。前者では探索が可能ですが、後者では既存のテスト、コードレビュー、リリースのプロセスに従う必要があります。このように、Stitch Skills は、デザインツールとプロダクション変更の間の責任の境界を曖昧にすることなく、エージェントがデザインワークフローを理解するのに役立ちます。

＃＃よくある質問

現象	優先順位のチェック
スキルはインストールされていますが、ステッチツールがありません	Stitch MCP は設定、実行、認定されていますか?
インストール後は、特定のプロジェクトでのみ表示されます。	`--scope project` またはワークスペーススコープが期待どおりであるかどうかを確認します
選択インストール後に不足している機能	単一のディレクトリをコピーするだけではなく、関連するスキルの依存関係を確認してください。
デザインの結果はブランドに反映されない	トークン、コンポーネントライブラリ、無効化された操作、スクリーンショットの受け入れをプロジェクトルールに書き込む

＃＃まとめ

The correct sequence of Stitch Skills is: first have the Stitch MCP available, then select plug-ins or skills according to project needs, and finally constrain the Agent with clear design input and acceptance criteria.インストールが成功しても、それは始まりにすぎません。チームプロセスで安定して使用できるかどうかは、スコープ、依存関係、設計データの境界によって決まります。

Google Stitch on KnightLiブログ

Google Stitch Skills のインストール方法: Stitch MCP、Codex、Claude Code とデザイン ワークフロー構成