stitch-skillsとは｜StitchとClaude Codeを繋ぐ使い方

Google StitchでUIをデザインしたのはいいけど、そこからコードに落とし込む作業が結局手作業でしんどい。

そのモヤモヤを一気に解消してくれるのが、Google Labs公式のstitch-skillsです。

7月11日にGitHub Trendingで1位まで駆け上がった話題のパッケージを、Claude Codeユーザー向けに使い方から実際の感触までまとめて共有します。

stitch-skillsとは｜まず紛らわしい名前を整理する

結論から言うと、「Stitch」を冠するツールは現時点で最低4種類あります。

ここが最大の混乱ポイントです。

今回の主役、stitch-skillsは、Google Stitch本体でもMCPサーバーそのものでもありません。

MCPサーバーの上で動く「振る舞い集」です。

イメージとしては、Stitch MCPが土台のOSで、stitch-skillsはそこで動くアプリのパック。

15個のスキルを1コマンドで導入できます。

Apache-2.0ライセンスで、2026年1月に登場、5月にv1.0、そして7月11日にGitHub Trendingで1位に到達しました。

スター数は7,623個。

半年弱でこの数字なので、勢いは本物です。

「stitch-mcpで検索して辿り着いた」「stitch-skillsで探してもStitch本体の記事ばかり出てくる」というモヤモヤで来た方も、このツリーで目的のツールを特定できます。

stitch-skillsの3プラグイン・15スキルで何ができるのか

役割ごとに3プラグインへ分かれています。

中身はこうです。

stitch-design（デザイン系・6スキル）

• code-to-design — 既存コードから逆にデザインを起こす
• generate-design — テキスト指示からデザインを生成
• manage-design-system — デザインシステムを管理
• extract-design-md — DESIGN.mdの抽出
• extract-static-html — 静的HTML抽出
• upload-to-stitch — Stitchへのアップロード

stitch-build（コード生成系・5スキル）

• react-components — Reactコンポーネント生成
• react-native — React Native向け
• remotion — Remotion（動画生成React）向け
• shadcn-ui — shadcn-ui対応コンポーネント
• react-vite-dashboard — Vite×Reactのダッシュボード雛形

stitch-utilities（補助系・4スキル）

• design-md — DESIGN.md生成
• enhance-prompt — プロンプトの最適化
• stitch-loop — 複数ページの一括生成ループ
• taste-design — デザインテイストの調整

15スキルの中で目立つのはstitch-loopとenhance-promptの組み合わせ。

一度のプロンプトで複数ページを回してくれるので、ダッシュボードやLP丸ごとのようなユースケースに強いです。

全体像としては、「Stitchでデザインを描く → DESIGN.mdに落とす → Reactに変換する」までの流れを、Claude Codeの1つのセッションで完結できる構成になっています。

Claude Codeへの導入手順

まず絶対の前提として、stitch-skills単体では動きません。

Google公式のStitch MCPサーバーのセットアップが別途必要です。

認証情報やAPIキーはStitch本体のドキュメントに従って準備します。

前提が整えば、Claude Codeへの導入は1行です。

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

これでプロジェクトスコープに3プラグイン一括インストール。

全部要らない場合、個別選択もできます。

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

対話式で入れたいスキルを選べます。

案件の性質に合わせて必要なものだけ入れる方が現実的です。

なお公式READMEではCodexが「推奨」として最優先で扱われていて、Claude Codeは後発対応という立て付け。

ここは正直に書いておきます。

Claude Codeユーザーとしてはやや不利な扱いですが、私の環境では実用に耐えるレベルで動いています。

Claude Codeで実際に動かしてみて感じたこと

一番刺さったのはextract-design-mdとenhance-promptのセットです。

Stitchで作ったUIをそのままClaude Codeに投げると、コンポーネント構造が曖昧な指示になりがちですが、間にDESIGN.mdを挟むと、Claudeが解釈しやすい構造化された仕様に化けます。

この差は使い比べれば一発で分かります。

react-componentsは、shadcn-uiを併用する案件ならほぼそのまま使えます。

ゼロから書き起こす場合と比べて、初期コンポーネント整備の時間が体感で1/3〜1/4になりました。

生成後にレビューとテストは必要ですが、テストコード自体もAIに書かせているので、そこで生産性を回収できます。

一方、複雑な状態管理やカスタムhookが絡む部分はまだ人間の仕上げが必要です。

あくまで「初期コンポーネントの雛形と、Stitchデザインとの整合性を担保する層」として使うのが現実的な位置づけです。

stitch-skills導入前に押さえておく注意点

1つ目、これはGoogle Labsの実験的プロジェクトで、Google公式サポート対象外です。

急に仕様が変わる想定で、業務システムに直接組み込むというより、開発補助ツールとしての利用が現実的です。

2つ目、前提のStitch MCPサーバーのセットアップは想像より工数がかかります。

特に環境変数と認証まわりで詰まる報告が上がっているので、初回は半日ほど確保しておいた方が無難です。

3つ目、Codex向けにチューニングされている印象は否めません。

Claude Codeでも動きますが、実行モデルの相性は都度確認した方がいいです。

私はOpus 4.6をメインで動かしていて、モデルを変えて挙動を見比べる工程は挟んでいます。

まとめ｜stitch-skillsはどんな人に向いているか

stitch-skillsはこんな方に向いています。

• Stitchで作ったUIをClaude Codeでそのまま実装まで走らせたいエンジニア
• shadcn-uiやRemotionなど、特定のReactエコシステム向けの雛形生成を高速化したいチーム
• DESIGN.md方式のドキュメント駆動な開発フローを組みたい現場

逆に、Stitch本体を使っていない、あるいはCodex以外での安定運用を求める場合は、いったん様子見が無難です。

導入コマンド1行で試せるので、既にStitchを使っているなら、まず入れて手を動かしてみるのが早いです。

触ってから判断すれば十分。

詳細な検証手順は下記の一次ソースが参考になります。

GitHub - google-labs-code/stitch-skills: A library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.

A library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claud...

github.com

Stitch Skills + Claude Code Tutorial: Generate UI Designs with AI Agents

Comprehensive guide to Google official stitch-skills project, how to configure and use it in Claude Code, achieving a complete workflow from natural language to UI design to code.

stitchprompt.com