Google Stitchのデザインをコード化するOSS「stitch-skills」の仕組み

Google Stitch の vibe design で生成した UI を、実際のプロジェクトに落とし込む段になって手が止まる。Claude Code や Cursor で「この Stitch デザインを React コンポーネントに変換して」と依頼しても、デザインとコードの橋渡しに一貫性がなく、毎回プロンプトを書き直す羽目になる。

そうした状況で目に留まるのが、Google Labs が公開している OSS「stitch-skills」です。ただし、実際に採用するかどうかを判断しようとすると、Anthropic Skills との違いや Stitch MCP サーバー稼働という前提条件、対応エージェントの範囲など、確認したいポイントが次々に出てきます。

しかも「Agent Skills」というオープン標準自体が比較的新しい概念で、既存の解説記事はインストール手順や個別スキルの紹介にとどまることが多く、「そもそも自分のプロジェクトに入れるべきか」という判断材料が揃いにくいのが実情です。

本記事では、google-labs-code/stitch-skills のリポジトリと公式ドキュメントをベースに、stitch-skills の役割・3 プラグイン構成・対応エージェント・類似リポジトリとの違い・導入判断のポイントを、初見のエンジニアが自プロジェクトで採用するか見送るかを判断できる粒度で整理します。実行・インストール検証は行わず、公式リポジトリと公式ドキュメントの記述のみを根拠にしています。

stitch-skills とは何か

stitch-skills は、Google Labs が公開している Agent Skills ライブラリです。Google Stitch というデザインツールで生成した UI を、Claude Code / Cursor / Codex / Gemini CLI / Antigravity などの coding agent 経由でコードに落とし込むためのスキル集として設計されています。

基本情報

gh api /repos/google-labs-code/stitch-skills で取得した基本情報は以下のとおりです。

本記事執筆時点で archived や fork ではなく、通常のメンテナンスが継続しているリポジトリです。ライセンスは Apache-2.0 で、商用利用・改変・再配布ともに条件付きで許諾されます。

リポジトリの位置づけ

stitch-skills は Google Labs のリサーチ／実験系プロジェクトとして位置づけられています。README の末尾には次のとおり明記されており、Google の正式サポート製品ではありません。

This is not an officially supported Google product.

出典: google-labs-code/stitch-skills README

そのため、SLA・長期サポートを前提とする本番システムに組み込む場合は、Apache-2.0 ライセンスのもと自組織側で運用リスクを引き受ける姿勢が必要です。一方で、Google Labs の公開リポジトリとしては 7,000 スターを超えており、エコシステム的にも一定の注目を集めている OSS といえます。

v1.0 で 3 プラグイン構成に再編

リポジトリのリリース履歴によると、初回公開は 2026-03-04 の v0.1、その後 2026-05-18 に v1.0 として大幅リファクタリングが行われています。

出典: gh api /repos/google-labs-code/stitch-skills/releases

v0.1 時点の情報を参照している解説記事は、現在のプラグイン構成と大きくズレている可能性があるため注意が必要です。本記事では v1.0 の構成を前提に解説します。

前提となる Google Stitch と Agent Skills 標準

stitch-skills を理解するには、その前提となる「Google Stitch 本体」と「Agent Skills オープン標準」の 2 つを最低限押さえておく必要があります。ここでは stitch-skills との関係に絞って要点だけ整理します。

Google Stitch

Google Stitch は Google Labs が提供する AI ネイティブな UI 設計キャンバスです。2025 年の Google I/O で発表され、2026 年 3 月の「vibe design」アップデートで大幅刷新されました。テキストや音声、画像入力から画面を生成し、最大 5 画面のマルチスクリーンを一括で扱えるほか、「DESIGN.md」というテキストベースのデザインシステム形式を採用しています。

公式サイトは Stitch by Google Labs から確認できます。無料枠は Standard 350 生成／月、Experimental 50 生成／月です（Google blog: Design UI using AI with Stitch from Google Labs）。

stitch-skills との関係で重要なのは、Stitch が単なる Web アプリではなく、外部エージェントから API 経由で操作できる仕組み（Stitch MCP サーバー）を持っている点です。この Stitch MCP サーバー稼働が stitch-skills の前提条件になります。

Agent Skills オープン標準

Agent Skills は、Anthropic が策定してオープン標準として公開した AI エージェント向けの拡張仕様です。1 つのスキルは SKILL.md（YAML frontmatter + 指示文）と、任意で scripts/ resources/ examples/ を含むフォルダとして構成されます。

progressive disclosure（段階的開示）の考え方で、Discovery → Activation → Execution の 3 段階に分けてコンテキストに読み込まれるため、多数のスキルを持ち込んでもコンテキストウィンドウを圧迫しにくいのが特徴です。

対応クライアントには Claude Code / Claude / Cursor / GitHub Copilot / OpenAI Codex / Gemini CLI / Amp / Goose / Kiro / Roo Code / Databricks Genie Code / Snowflake Cortex Code / Laravel Boost / OpenCode などが挙げられており、標準の採用範囲は広がっています（agentskills.io）。

stitch-skills はこの Agent Skills 標準に準拠したスキル集の 1 つで、対象領域を「Google Stitch のデザインをコード化する開発ワークフロー」に絞って作られています。

Stitch MCP サーバー

Stitch MCP サーバーは、Model Context Protocol に沿って Stitch の機能をエージェントから呼び出すためのサーバーです。stitch-skills の各スキルは、この MCP サーバー越しに Stitch API を叩くことでデザイン取得・アップロード・生成などを行います。

README にも次のとおり明記されており、MCP サーバーがローカルまたは指定した環境で稼働していない状態では、stitch-skills の各スキルは動作しません。

These skills require the Stitch MCP server to be configured and running in your agent's environment.

出典: google-labs-code/stitch-skills README

セットアップ手順は Stitch MCP Setup Instructions にまとまっています。ここで発行される認証情報を、エージェント側（Claude Code や Cursor など）の環境変数として設定する流れです。

3つのプラグイン構成（stitch-design / stitch-build / stitch-utilities）

v1.0 で再編された stitch-skills は、stitch-design / stitch-build / stitch-utilities という 3 つのプラグインに分かれています。それぞれ役割が明確に分離されているため、必要な範囲だけ選んで導入することもできます。

stitch-design（6 スキル）

デザインワークフロー用のプラグインで、既存コードを Stitch へ取り込む方向と、Stitch から取り出して整備する方向の両方に対応します。

出典: stitch-skills README「Design (stitch-design)」

code-to-design と generate-design が主軸で、既存プロジェクトからの取り込みと、新規デザインの生成のどちらから入っても Stitch 上で扱える状態に持っていけます。

stitch-build（5 スキル）

Stitch のデザインから実際のコードを生成する側のプラグインです。React 系のフロントエンドと動画生成、shadcn/ui 連携までカバーします。

出典: stitch-skills README「Build (stitch-build)」

Web フロントエンドとモバイルの React Native 双方をカバーしつつ、react-vite-dashboard のように「TanStack Query 前提のダッシュボード」といった特定パターンにも踏み込んでいるのが特徴です。

stitch-utilities（4 スキル）

デザイン品質・プロンプト品質を底上げする補助プラグインです。

出典: stitch-skills README「Utilities (stitch-utilities)」

taste-design の「プレミアム・アンチジェネリック」を強制する DESIGN.md 生成は、AI 生成 UI が「どこかで見たテンプレート的な見た目」に寄りがちな問題への対処として設計されている点が興味深いところです。

v0.1 → v1.0 の再編ポイント

リリースノートによると、v1.0 では以下のような整理が行われています。

• 従来複数に分かれていたデザイン生成系スキルを generate-design に統合
• code-to-design / extract-design-md / extract-static-html など 5 種類の新規スキルを追加
• 全体を stitch-design / stitch-build / stitch-utilities の 3 プラグイン単位に再編

出典: gh api /repos/google-labs-code/stitch-skills/releases

したがって、Web 上で見かける古い記事の「スキル一覧」は現行の構成と一致しない可能性が高く、この記事では原則として README と releases エンドポイントを一次ソースとしています。

スキルの基本ファイル構成

stitch-skills の各スキルは、Agent Skills オープン標準に沿ったフォルダ構成を持ちます。README の「Repository Structure」から抜粋します。

skills/<skill-name>/
├── SKILL.md           — The "Mission Control" for the agent
├── scripts/           — Executable enforcers (Validation & Networking)
├── resources/         — The knowledge base (Checklists & Style Guides)
└── examples/          — The "Gold Standard" syntactically valid references

出典: google-labs-code/stitch-skills README「Repository Structure」

SKILL.md はエージェント向けの指示書（Mission Control）で、progressive disclosure の Activation フェーズ以降で読み込まれる中核ファイルです。scripts/ は検証・ネットワーク I/O 用のスクリプト、resources/ はチェックリストやスタイルガイド、examples/ は「動くリファレンス実装」に相当します。

プラグイン全体としては、次のようなディレクトリ構成になっています。

plugins/
├── stitch-design/          — Core design workflow plugin
│   ├── plugin.json
│   └── skills/
│       ├── code-to-design/
│       ├── generate-design/
│       ├── manage-design-system/
│       ├── extract-design-md/
│       ├── extract-static-html/
│       └── upload-to-stitch/
├── stitch-build/           — Code generation & build plugin
│   ├── plugin.json
│   └── skills/
│       ├── react-components/    — stitch::react-components
│       ├── react-native/
│       ├── react-vite-dashboard/
│       ├── remotion/
│       └── shadcn-ui/
└── stitch-utilities/       — Design utilities & assistants plugin
    ├── plugin.json
    └── skills/
        ├── design-md/
        ├── enhance-prompt/
        ├── stitch-loop/
        └── taste-design/

出典: google-labs-code/stitch-skills README「Repository Structure」

各プラグインは plugin.json を通じてスキル群をまとめており、Agent Skills 標準に馴染みがあれば構造を把握しやすい設計です。既存スキルの中身をフォーク・改変して、自組織のプロジェクト規約に合わせた派生スキルを作ることも十分現実的な選択肢になります。

なお、README には新規スキルの「良い候補」として以下が挙げられています。

• Stitch HTML を他の UI フレームワーク（React 以外など）に変換して構文を検証する Validation 系スキル
• 静的なデザインコンテンツを外部モックデータファイルに分離する Decoupling Data 系スキル
• 与えられたデータセットから新しいデザイン画面を Stitch 上に生成する Generate Designs 系スキル

出典: google-labs-code/stitch-skills README「Great candidates for new skills」

このように、拡張ポイントが README で明示されている点は「ブラックボックスの怖さ」を減らしてくれる要素の 1 つです。

対応エージェントとインストール方法

stitch-skills が対応する coding agent と、README に記載されているインストール手順を整理します。

対応エージェント一覧

README では次の 5 種類が対応 agent として明示されています。

• Codex
• Antigravity
• Gemini CLI
• Claude Code
• Cursor

Agent Skills 自体はオープン標準として多くのクライアントに採用が広がっていますが、stitch-skills 側で明示的に想定しているのは上記です。

プラグインをまとめて導入する場合

Codex のマーケットプレイスに登録するコマンドは以下のとおりです。

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

出典: google-labs-code/stitch-skills README「Codex」

--sparse フラグは指定パスのみをチェックアウトするための任意オプションで、省略するとリポジトリ全体を取得します。

Claude Code の場合は、プロジェクト単位でインストールするコマンドが提示されています。

# Claude Code — installs into the current project
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

出典: google-labs-code/stitch-skills README「Claude Code & Cursor」

Cursor はワークスペース単位でのインストールです。

# Cursor — installs into the current workspace
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor

出典: google-labs-code/stitch-skills README「Claude Code & Cursor」

Claude Code は --scope project 、Cursor は --scope workspace と異なるスコープを指定するため、コマンドをコピペする際は取り違えに注意が必要です。

単一スキルのみ選択して導入する場合

スキル単位で入れたい場合は skills add コマンドを使用します。

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

出典: google-labs-code/stitch-skills README「Install Skills Selectively」

README ではこのオプションに対し次の注意書きが添えられています。

Stitch Design Skills often have inter-dependencies. If you choose to install skills selectively, ensure you include all required dependencies.

出典: google-labs-code/stitch-skills README「Install Skills Selectively」

スキル間に相互依存があるため、選択的に入れる場合は依存関係にも配慮する必要があります。まずはプラグイン単位でまとめて導入し、必要に応じて絞り込む方が安全といえます。

前提条件（再掲）

繰り返しになりますが、stitch-skills を機能させるには Stitch MCP サーバーの稼働が必須です。

• Stitch MCP サーバーを登録し、環境変数と認証情報を設定します
• セットアップ手順: Stitch MCP Setup Instructions

MCP サーバー稼働を前提にできない環境（CI パイプライン、隔離されたサンドボックス、オフライン開発環境など）では、stitch-skills の各スキルは活用できません。

類似リポジトリとの比較

stitch-skills の位置づけを理解するうえで最も参考になるのが、類似の OSS との比較です。Agent Skills 標準に沿ったスキル集や、Stitch 連携を目的とした周辺 OSS を並べて整理します。

対象領域の違い

Anthropic Skills は、Agent Skills 標準そのものの策定元である Anthropic が提供する汎用スキル集です。ドキュメント生成、MCP サーバー生成、創作・エンタープライズワークフローなど幅広く網羅しています。「汎用の Agent Skills 集をまず 1 つ入れる」のであれば有力な選択肢ですが、Google Stitch との連携そのものは対象外です。

Laravel Boost は「フレームワークに深く寄り添ったスキル集」の代表例です。Laravel プロジェクト内部で開発品質を底上げする目的で作られており、外部 SaaS との連携を主眼にはしていません。「特定の技術スタック上での開発ワークフローを Agent Skills で強化する」というパターンとして、stitch-skills と対照的な立ち位置を示してくれます。

davideast/stitch-mcp は、個人開発者による Stitch 連携 CLI です。目的自体は stitch-skills と近い部分がありますが、公式性・スコープ・保守体制の面で異なり、こちらは「取り出し」に特化した CLI 寄りの実装です。

位置づけを整理する 3 項比較

上記を踏まえると、Agent Skills 標準を軸にした OSS には、大きく次の 3 つのパターンがあると整理できます。

1. 汎用スキル集（例: Anthropic Skills）：Agent Skills 標準そのものの活用範囲を広げる
2. フレームワーク特化スキル集（例: Laravel Boost）：特定の開発フレームワーク内部の品質・生産性を底上げする
3. 特定 SaaS × 開発エージェント連携スキル集（例: stitch-skills）：外部の SaaS ツール（Google Stitch）を coding agent から扱うためのブリッジ

この 3 分類のうち、stitch-skills はまさに「特定 SaaS × 開発エージェント」というカテゴリの Google Labs 公式実装として位置づけられます。

stitch-skills を採るのはどんなときか

比較の結論として、stitch-skills を採用するかどうかは基本的に Google Stitch を実際のプロジェクトで使うかどうか で決まります。Stitch を使わないのであれば、汎用スキル集としては Anthropic Skills、フレームワーク特化のガイドラインが欲しい場合は laravel/boost のような選択肢を先に検討する方が実利は大きいでしょう。

一方、Stitch を UI 設計フェーズで採用することが決まっていて、そのアウトプットを Claude Code / Cursor / Codex 等でコード化したい場合、公式スキル集として整備されている stitch-skills は有力な選択肢です。

導入判断のポイント

ここまでの内容を踏まえ、stitch-skills を自プロジェクトに入れるべきかどうかを判断するチェックポイントを整理します。

採用が向くケース

以下の条件がすべて当てはまるプロジェクトであれば、stitch-skills の採用相性は良いと考えられます。

• Google Stitch を UI 設計フェーズで実際に使っている、または導入を予定している
• Claude Code / Cursor / Codex / Gemini CLI / Antigravity のいずれかを常用しています
• React または React Native ベースのフロントエンドを開発しています
• Stitch MCP サーバーを稼働させられるローカル／CI 環境があります
• Apache-2.0 ライセンスの OSS を、Google Labs の「officially supported product ではない」前提で組み込むことに問題がありません

見送りが妥当なケース

反対に、以下のいずれかに該当する場合は、現時点では見送るか、フォークして限定的に取り込むといった判断も選択肢に入ってきます。

• Google Stitch を使わない、もしくは他の UI 生成ツール（Figma AI、v0 系など）を主軸にしています
• Stitch MCP サーバーを常時起動できない環境（隔離された CI／サンドボックス、オフライン環境など）
• 非 React 系のフロントエンド（Vue、Svelte、Angular など）を主に採用しており、stitch-build の恩恵を受けにくいです
• 実験プロジェクトを本番運用に組み込む余地が乏しい（正式サポート製品前提の SLA が必須）

運用上の注意点

• ライセンス: Apache-2.0。商用利用・改変・再配布ともに条件付きで許諾されますが、注意義務や表示義務を確認したうえで組み込むこと
• 公式サポート: README 末尾に「officially supported Google product ではない」と明記されているため、Google に対する SLA 期待はできません
• バージョンの若さ: v1.0 リリースは 2026-05-18 と比較的新しく、今後もスキルの追加・整理が継続する見込みです
• 依存関係: npx skills add で単一スキルだけ入れる場合、スキル間の相互依存への配慮が必要

一次ソースへの再誘導

導入判断を最終化する段階では、以下の一次資料に必ず立ち返って最新の状態を確認することをおすすめします。

• リポジトリ本体: google-labs-code/stitch-skills
• Google Stitch 公式サイト: Stitch by Google Labs
• Stitch MCP セットアップ: Stitch MCP Setup Instructions
• Agent Skills オープン標準: agentskills.io

stitch-skills は「Google Stitch × Agent Skills」という特定の組み合わせを最短距離で実装するための公式スキル集です。汎用性は求めない代わりに、その領域では他に代替が少ない立ち位置を確保しています。Stitch を実プロジェクトに組み込むかどうかという上流の判断がついた段階で、stitch-skills を採るかどうかも自然と決まる、というのが本記事の見立てです。