Google Stitch Skills 実践：React ダッシュボードからデザインとコンポーネントへ

Google Stitch Skills、Stitch MCP、Stitch Code-to-Design を検索したことがあるなら、多くの資料が Stitch の Web プロダクト、MCP、Agent Skills を混ぜて扱っていることに気づくかもしれません。本記事は Google Labs の最新の stitch-skills GitHub リポジトリ に基づき、このプロジェクトの実際の役割、プラグイン構造、利用の前提、そしてフロントエンド開発のワークフローを紹介します。

Google Stitch Skills とは？

google-labs-code/stitch-skills は Agent Skills のオープン仕様に従ったプラグインとスキルの集合で、コーディングエージェントが Google Stitch のデザイン能力を呼び出せるようにするものです。

独立した UI エディタでも、Stitch の Web プロダクトそのものでもありません。むしろ、コーディングエージェント、Stitch MCP、Google Stitch をつなぐワークフロー層です。

Coding Agent
    ↓
Stitch MCP
    ↓
Google Stitch
    ↓
デザイン、プロトタイプ、コードのワークフロー

GitHub の README は現在、これらの Skills には事前に Stitch MCP の設定と起動が必要だと明確に述べています。スキルのファイルをコピーするだけでは、単独でデザイン生成を完遂できず、Stitch の認証と環境設定を回避することもできません。

注意：この GitHub リポジトリは自らを Google Labs 関連のオープンソースプロジェクトと位置づけており、Google の公式サポート製品ではありません。使用時はリポジトリの現在の README と Stitch MCP ドキュメントを基準にしてください。

Stitch Skills に何ができるか？

現在のリポジトリは主に 3 つのプラグインに分かれています。

プラグイン	主な役割	代表的なスキル
stitch-design	Stitch デザインの生成、インポート、管理	generate-design、code-to-design、manage-design-system
stitch-build	デザインをフロントエンド実装に変換	react-components、react-native、shadcn-ui、remotion
stitch-utilities	プロンプト、設計規約、ワークフローの補助	enhance-prompt、design-md、stitch-loop、taste-design

リポジトリは最近 site-md 関連の能力も追加し、プロジェクトレベルのサイト制約ファイルを生成できるようになりました。リポジトリは継続的に更新されているため、インストール前に GitHub README と plugins/ ディレクトリの最新の内容を確認することをおすすめします。

stitch-design：要件からデザインへ

generate-design

generate-design は、エージェントに新しいページの生成、既存ページの編集、デザインバリアントの作成を行わせるものです。例えば：

Make a responsive analytics dashboard for a small SaaS team.
Include KPI cards, a weekly revenue chart, recent activity,
and a clear action for inviting a teammate.
Use a compact desktop layout and bottom navigation on mobile.

素早いプロダクト方向の探索に適していますが、ページの状態、ビジネスルール、インタラクションの検収を代替すべきではありません。

code-to-design

code-to-design は、React、Vue などの既存フロントエンドコードを Stitch に持ち帰るためのものです。

Upload the frontend code at /src/pages/dashboard
into a Stitch project named "Analytics Dashboard Redesign".
Identify the navigation hierarchy, typography scale,
spacing system, color roles, and reusable card patterns.

次のシーンに適しています。

• 古いプロジェクトに完全なデザインカンプがない。
• 複数ページのスタイルが統一されていない。
• コードを変更する前に新しいビジュアル方向を探索したい。
• 既存の実装からデザインシステムを抽出したい。

主に画面構造と視覚的な手がかりを抽出するもので、完全なビジネスロジックの理解とは同じではありません。権限、データリクエスト、フォームバリデーション、複雑なインタラクションは依然として開発者の確認が必要です。

manage-design-system

このスキルはデザインシステムのアップロードと適用に使い、複数ページで一貫した色、フォント、余白、コンポーネントルールを使えるようにします。通常は DESIGN.md と一緒に使います。

stitch-build：デザインから React コンポーネントへ

react-components

react-components は Stitch のページを React コンポーネント体系に変換するものです。より堅実なプロンプトは、プロジェクトの既存のビジネスコードを保持するようエージェントに明確に求めるべきです。

Convert the selected Stitch screens into React components.
Use the existing routing and data-fetching patterns.
Reuse the project's UI primitives and keep design tokens centralized.
Do not add mock business logic or replace existing API calls.

生成後は次の順序でプロジェクトに組み込むことをおすすめします。

Stitch コンポーネント
    ↓
構造とスタイルを確認
    ↓
実データを接続
    ↓
loading / empty / error 状態を補完
    ↓
レスポンシブとアクセシビリティを確認
    ↓
lint、テスト、ビルドを実行

react-native、shadcn-ui とその他のスキル

• react-native：Stitch の HTML デザインを React Native コンポーネントに変換します。
• shadcn-ui：プロジェクトに shadcn/ui のコンポーネントとデータ画面を実装します。
• react-vite-dashboard：React + Vite の Dashboard 向けの実装ワークフロー。
• remotion：Stitch プロジェクトに基づいてプロダクトのデモ動画を生成します。

これらのスキルはワークフローの補助であり、生成されたコードがレビューなしでそのまま公開できることを意味しません。

stitch-utilities：デザインコンテキストとプロンプトの補助

enhance-prompt

曖昧な UI 要件を、Stitch により適したプロンプトへと補足します。例えば次を：

Make a settings page.

ユーザー目標、情報階層、デバイス、状態、視覚的制約を含む完全な要件へと拡張します。

design-md

Stitch プロジェクトを分析し DESIGN.md を生成します。このファイルには次を記録できます。

• 色とその使用シーン
• フォントの階層と情報密度
• 余白、角丸、シャドウ
• Button、Card、Input、Navigation のルール
• レスポンシブレイアウトとアクセシビリティの要件

例えば：

# Design System

## Colors

Primary: #2563EB — 主要な操作と重要なリンクに使用
Background: #F8FAFC
Foreground: #0F172A

## Components

Button: 8px radius, solid primary color for the main action
Card: 12px radius, subtle border, no heavy shadow

DESIGN.md の価値は色値を保存することだけでなく、いつどのルールを使うかをエージェントに伝えることにあります。すべてのデザインツールが統一対応している正式な業界標準というより、デザインコンテキストファイルに近いものです。

stitch-loop と taste-design

• stitch-loop：マルチページのデザイン、ビルド、検証、次のラウンドのタスクをループとして組織します。
• taste-design：より制約の強い設計規約を生成し、ページのスタイルの漂流を減らします。

1 ページだけ生成すればよいなら、すべてのプラグインを一度にインストールする必要はありません。プロジェクトの目標に応じてスキルを選ぶほうが、依存関係と出力結果を制御しやすくなります。

Google Stitch Skills のインストール方法

Claude Code

GitHub README が現在示しているプロジェクトレベルのインストール方法は次のとおりです。

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

Cursor

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

Codex

Codex はまず Stitch Skills のマーケットプレイスを追加し、次に必要なプラグインを選べます。

codex plugin marketplace add google-labs-code/stitch-skills --ref main

OpenCode

OpenCode は Claude Code や Codex のプラグインマーケットプレイス形式を使わないため、スキルディレクトリを手動でコピーする必要があります。

mkdir -p .opencode/skills
cp -R plugins/stitch-design/skills/generate-design \
  .opencode/skills/generate-design

README はさらに、OpenCode では Skill の name に小文字の kebab-case を使い、ディレクトリ名と一致させる必要があると注意しています。また opencode.json で Stitch MCP を設定する必要もあります。

完全な Code-to-Design 実践フロー

以下では、すでに稼働している SaaS Dashboard プロジェクトを例にします。現在の code-to-design スキルのドキュメントによると、前提条件はローカル開発サーバーが動作しているか、プロジェクトが index.html と静的リソースを含むディレクトリをビルド済みであることです。

まずプロジェクトを起動し、対象ページにアクセスできることを確認します。

npm install
npm run dev

ページのアドレスが次のようになっているとします。

http://localhost:5173/dashboard

ページがログイン、API、実行時データに依存する場合は、安定したデモアカウントや mock データを先に用意します。そうしないと、インポート結果が Loading 状態だけになる可能性があります。

ステップ 1：MCP を設定して Skills をインストールする

まず Stitch MCP 設定ドキュメント に従って認証と環境設定を完了し、次に対応する Skill をインストールします。Claude Code を例にします。

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

Skills のインストールと Stitch への接続は 2 つのステップです。Skills のファイル自体は MCP の代わりにならず、Stitch のアカウントと認証設定を回避することもできません。

ステップ 2：プロジェクトの制約を明確にする

エージェントを呼び出す前に、変更してはならない内容を明確に書きます。

• 既存のルーティングと API 契約を保持する。
• データ構造とビジネスロジックを保持する。
• Dashboard、Analytics、Settings の画面だけを調整する。
• コンポーネントを生成した後、開発者が実データを接続する。

これにより、エージェントが「リデザイン」を「アプリ全体の書き直し」と誤解するのを避けられます。

ステップ 3：既存コードをインポートする

Use the stitch::code-to-design skill.

Convert the running frontend at http://localhost:5173/dashboard
into a Stitch design in the project named "Analytics Dashboard Redesign".

Keep the existing routes, API contracts, and business behavior unchanged.
Extract the navigation hierarchy, typography scale, spacing system,
color roles, card patterns, table patterns, and responsive behavior.

このスキルは 3 つの作業を直列につなぎます。

1. extract-static-html で自己完結型の HTML を抽出する。
2. extract-design-md でソースコードとテーマ設定からデザインシステムを抽出する。
3. upload-to-stitch で HTML とデザインシステムを対象の Stitch プロジェクトにアップロードする。

ステップ 4：DESIGN.md を確認する

生成された .stitch/DESIGN.md を確認し、特定ページの偶発的な細部ではなく、ページ横断のルールが記述されていることを確かめます。色の用途、フォント階層、余白、角丸、コンポーネントルール、レスポンシブ挙動、アクセシビリティ要件を重点的に確認します。

プロジェクトにまだ Design System がない場合は、先に manage-design-system を使い、その後に generate-design を使います。新しいページを生成するとき、プロンプトは主にページ構造、コンテンツ、インタラクションを記述すべきです。完全な色、フォント、テーマトークンを繰り返し書くと、プロジェクトレベルの Design System と衝突する恐れがあります。

ステップ 5：デザイン方向を生成して比較する

Generate three redesign directions:
1. Dense enterprise dashboard
2. Calm modern SaaS dashboard
3. Mobile-first analytics dashboard

Keep the existing information hierarchy and primary user tasks.
Focus the comparison on layout and navigation.

バリアントは 3 つから始めることをおすすめします。現在のスキルは variantCount、creativeRange、aspects でバリアントの範囲を制御できます。方向が定まったら、的を絞った編集を優先し、何度もゼロから生成しないことです。

ステップ 6：HTML とスクリーンショットをダウンロードしてレビューする

生成や編集が完了したら、デザイン成果物をプロジェクトに保存します。

.stitch/
├── designs/
│   ├── dashboard.html
│   ├── dashboard.png
│   └── analytics.png
├── DESIGN.md
└── metadata.json

スクリーンショットを 1 枚ずつ開き、デスクトップとモバイルのレイアウト、テキストのはみ出し、ナビゲーション、主要操作、チャート、テーブル、空の状態を確認します。エージェントが返すテキストの説明だけに頼らないこと。

ステップ 7：React コンポーネントを生成する

Convert all approved screens in the Stitch project
"Analytics Dashboard Redesign" into modular React components.

Requirements:
- preserve the existing routes and data-fetching logic
- reuse existing UI primitives where possible
- use the current DESIGN.md as the visual source of truth
- replace href="#" placeholders with real application routes
- create separate components for cards, tables, navigation, and filters
- do not add mock business logic

現在の react-components スキルのドキュメントはさらに次を求めています。

1. MCP を通じてプロジェクト内のすべての Screen を取得する。
2. リポジトリの fetch-stitch.sh で最新の HTML とスクリーンショットをダウンロードする。
3. スクリーンショットを 1 枚ずつ開いて視覚的なレビューを完了する。
4. .stitch/metadata.json を更新し、プロジェクト、Screen、サイズ、最終同期時刻を記録する。
5. 各 HTML の tailwind.config から色、フォント、余白、角丸、タイポグラフィのトークンを抽出する。
6. カード、テーブル、ナビゲーション、フィルターを独立したコンポーネントに分割する。

MCP で最新の Screen を取得する代わりに古い .stitch/designs/*.html を直接読んだり、他プロジェクトの残した style-guide.json を再利用したりしないこと。

ステップ 8：実プロジェクトにマージして検収する

コンポーネントを生成した後、本番コードを直接上書きせず、ブランチや一時ディレクトリでマージすることをおすすめします。

コンポーネントを生成
  ↓
コンポーネント分割とデザイントークンを確認
  ↓
実ルーティングとデータを接続
  ↓
loading / empty / error 状態を補完
  ↓
href、権限、フォーム、キーボード操作を確認
  ↓
lint、テスト、ビルドを実行

少なくとも、すべての href="#" が実際のルートに置き換わっていること、Logo、サイドバー、ボトムナビゲーションが使えること、コンポーネントに明確な Props 型があること、デザイントークンを迂回したハードコードされた色がないことを確認します。

既存の React / Vue プロジェクト
    ↓
code-to-design
    ↓
Stitch にインポート
    ↓
複数のデザイン方向を生成
    ↓
DESIGN.md を抽出
    ↓
react-components
    ↓
既存プロジェクトにマージ

5 つのステップに分けられます。

ステップ 1：既存ページを整理する

1 つのページ、または 1 組のページ集合（例：Dashboard、Analytics、Settings）を選びます。まず変更不要なルーティング、API、ビジネスロジックを明確にします。

ステップ 2：Stitch にインポートする

エージェントに既存ページのナビゲーション階層、色の役割、フォント階層、余白、重複コンポーネントを抽出させます。

ステップ 3：新しい方向を探索する

Generate three redesign directions:
1. Dense enterprise dashboard
2. Calm modern SaaS dashboard
3. Mobile-first analytics dashboard

Keep the existing information hierarchy and primary user tasks.

ステップ 4：デザインルールを固定する

Create a DESIGN.md for the selected direction.
Document color roles, typography, spacing, card treatment,
button hierarchy, responsive behavior, and accessibility rules.

ステップ 5：コンポーネントを生成してレビューする

Convert the selected screens into React components.
Preserve existing routes and data-fetching logic.
Use the generated DESIGN.md as the visual source of truth.

Stitch Skills と Stitch MCP の違い

名称	役割	単独で動作するか
Stitch	Google の AI 画面デザイン製品	いいえ。製品自体がデザイン能力を提供
Stitch MCP	外部エージェントを Stitch に接続するチャネル	設定と認証が必要
Stitch Skills	デザイン、ビルド、補助のワークフロー	Stitch MCP に依存
Coding Agent	タスクを理解し Skills を呼び出す	Agent Skills 互換のツールが必要

stitch-skills を React コンポーネントライブラリと理解したり、アカウントと設定が不要なローカルジェネレーターと理解したりしないでください。

よくある質問

Stitch Skills は Google 公式製品ですか？

いいえ。GitHub README は、このリポジトリが Google の公式サポート製品ではないと明確に述べています。Google Labs 関連のオープンソース Agent Skills プロジェクトであり、使用時はリポジトリの現在のドキュメントを基準にしてください。

先に Stitch MCP を設定する必要がありますか？

はい。リポジトリの README は Stitch MCP を前提条件として挙げています。MCP、認証、対応する環境設定がなければ、Skills は Stitch を正常に呼び出せません。

生成された React コードはそのまま公開できますか？

おすすめしません。少なくとも API、権限、状態処理、アクセシビリティ、レスポンシブ、パフォーマンス、セキュリティの確認が必要です。

Claude Code を使う必要がありますか？

必須ではありません。現在の README は Codex、Antigravity、Gemini CLI、Claude Code、Cursor、OpenCode を挙げています。ツールごとにインストール方法が異なり、OpenCode は手動インストールが必要です。

すべての Skills をインストールする必要がありますか？

いいえ。generate-design、code-to-design、react-components の中から現在のタスクに関連するスキルを選べます。一部のスキルには依存関係があるため、選択してインストールする前にリポジトリの説明を読んでください。

まとめ

Google Stitch Skills の主な役割は、1 回だけ美しいページを生成することではなく、Stitch を AI コーディングワークフローに組み込むことです。

要件
  ↓
Stitch でデザイン探索
  ↓
Code-to-Design / DESIGN.md
  ↓
React または React Native コンポーネント
  ↓
Coding Agent による実装と検証
  ↓
イテレーションを継続

Stitch の Web デザインを体験したいだけなら、Stitch を直接使えば十分です。すでに Claude Code、Cursor、Codex、OpenCode を使っていて、エージェントをデザイン、デザインシステム、コード実装に関与させたいなら、stitch-skills が価値を発揮します。

公式資料

• Google Labs：stitch-skills GitHub リポジトリ
• Stitch MCP 設定ドキュメント
• Agent Skills オープン仕様
• Stitch Skills ＋ Claude Code 入門チュートリアル
• Google Stitch 2026 機能アップデート
• Stitch スタイルギャラリー