stitch

Google Stitch — スキルバンドル

このフォルダーには、MCP サーバーを備えたデザインからコードへのプラットフォームである Google Stitch を活用するための 6 つのサブスキルが含まれています。各サブスキルには、詳細な手順を記載した独自の SKILL.md があります。

前提条件

ほとんどのスキルでは、Stitch MCP サーバーへの接続が必要です。shadcn-ui スキルは、shadcn MCP サーバーまたは CLI と単独で使用できます。

---

🔀 パイプラインオーケストレーションプロトコル（最初にお読みください）

このプロトコルに必ず従ってください。 サブスキルを 1 つだけ読み込んで終了しないでください。Stitch バンドルはパイプラインです。各スキルの出力が次のスキルにつながります。あなたの役割は、各スキルの完了後に次のステップを提案し、ユーザーを一連の手順全体に案内することです。

パイプライン全体（デザイン → コード → 動画）

┌─────────────┐     ┌─────────────────┐     ┌──────────────┐     ┌───────────────┐     ┌──────────┐
│  design-md  │ ──→ │ enhance-prompt  │ ──→ │ stitch-loop  │ ──→ │   react-      │ ──→ │ remotion │
│ STEP 1      │     │ STEP 2          │     │ STEP 3       │     │ components    │     │ STEP 5   │
│             │     │                 │     │              │     │ STEP 4        │     │          │
│ Extract the │     │ Polish prompts  │     │ Build pages  │     │ Convert HTML  │     │ Create a │
│ design      │     │ with design     │     │ iteratively  │     │ to production │     │ video    │
│ system      │     │ tokens from     │     │ using the    │     │ React/TS      │     │ showcase │
│ → DESIGN.md │     │ DESIGN.md       │     │ baton system │     │ components    │     │ of your  │
│             │     │ → next-prompt   │     │ → full site  │     │ → src/        │     │ screens  │
└─────────────┘     └─────────────────┘     └──────────────┘     └───────────────┘     └──────────┘
                                                                        │
                                                                  ┌─────┴──────┐
                                                                  ▼            │
                                                        ┌──────────────┐       │
                                                        │  shadcn-ui   │       │
                                                        │ COMPANION    │       │
                                                        │              │       │
                                                        │ Add polished │       │
                                                        │ UI component │       │
                                                        │ library      │       │
                                                        └──────────────┘       │

オーケストレーションの方法

いずれかのサブスキルを完了した後、必ず次のことを行ってください。

1. 完了した内容をユーザーに伝える
2. パイプラインにおける次の適切なステップを説明する
3. 次のステップに進むかどうか、ユーザーに確認する
4. 進む場合は、そのサブスキルの SKILL.md を読み込んで続行する

フローの例：

✅ design-md complete → "Your DESIGN.md is ready. Next step: I can polish 
   your first page prompt using enhance-prompt so Stitch generates a 
   higher-quality result. Want to continue?"

✅ enhance-prompt complete → "Your prompt is optimized. Next step: I can 
   send this to Stitch and start building pages with stitch-loop. Ready?"

✅ stitch-loop complete → "Your site pages are built. Two options now:
   1. react-components — Convert these HTML pages into production React/TS
   2. remotion — Create a walkthrough video showcasing the screens
   Which would you like?"

✅ react-components complete → "Your React components are ready. You might 
   also want to:
   • Add shadcn/ui components for polished form inputs, buttons, dialogs
   • Create a remotion walkthrough video of the original designs
   Want either of those?"

判断ツリー：開始地点

すべてのユーザーがステップ 1 から始めるわけではありません。この判断ツリーを使ってください。

ユーザーの発言...	開始地点	次に提案する内容...
「Stitch でサイトを作って」	design-md（ステップ 1）	パイプライン全体
「Stitch のプロジェクトがあるので、一貫性を持たせて」	design-md（ステップ 1）	enhance-prompt → stitch-loop
「Stitch でページを生成して」	enhance-prompt（ステップ 2）	stitch-loop
「Stitch の HTML を React にして」	react-components（ステップ 4）	コンポーネント用の shadcn-ui
「Stitch の画面を動画にして」	remotion（ステップ 5）	完了（単独で使用）
「React アプリ用の UI コンポーネントが必要」	shadcn-ui（補助）	完了（単独で使用）
「Stitch のプロンプトを改善して」	enhance-prompt（ステップ 2）	stitch-loop
「すでに DESIGN.md があるので、ページを作って」	stitch-loop（ステップ 3）	react-components

各スキルの用途（クイックリファレンス）

スキル	目的	入力	出力	必要なもの
design-md	既存画面からデザインシステムを抽出する	画面を含む Stitch プロジェクト	DESIGN.md	Stitch MCP
enhance-prompt	曖昧なプロンプトを Stitch 向けに最適化する	ユーザーのアイデア + 任意の DESIGN.md	改良済みプロンプト / next-prompt.md	なし（Stitch MCP は任意）
stitch-loop	複数ページのサイトを反復的に構築する	DESIGN.md + next-prompt.md	site/public/ 内のサイト全体	Stitch MCP
react-components	Stitch の HTML → 本番環境向けの React/TS に変換する	Stitch 画面の HTML	src/ 内の React コンポーネント	Stitch MCP
remotion	スクリーンショットから操作説明動画を作成する	Stitch プロジェクトのスクリーンショット	Remotion プロジェクト + .mp4	Stitch MCP + Remotion
shadcn-ui	洗練された UI コンポーネントライブラリを追加する	任意の React/Next.js プロジェクト	components/ui/ 内のコンポーネント	shadcn CLI または MCP

---

サブスキルディレクトリ

使用する前に、各サブスキルのリンク先にある SKILL.md を読んでください。

1. design-md — デザインシステムの抽出（ステップ 1）

→ SKILL.md を読む

内容： Stitch プロジェクトの画面を分析し、ビジュアルデザインシステム（色、タイポグラフィ、奥行き、レイアウト、コンポーネントのスタイル）を記録した意味的な DESIGN.md ファイルを生成します。

使用する場面：

• 複数ページの新規プロジェクトを始める際に、デザインシステムの参照資料が必要な場合
• 既存の Stitch プロジェクトに参加する場合
• エージェントが生成する画面全体で一貫したデザイン言語が必要な場合

出力： DESIGN.md ファイル

➡️ 次のステップ： enhance-prompt — DESIGN.md を使って、ページ生成向けの洗練されたプロンプトを作成します。

---

2. enhance-prompt — プロンプトの強化（STEP 2）

→ SKILL.md を読む

概要： あいまいな UI のアイデアを、Stitch での生成に最適化された、洗練された構造化プロンプトに変換します。UI/UX キーワード、デザインシステムのコンテキスト、ページ構造を追加します。

使用するタイミング：

• 「ログインページを作って」のような、あいまいなプロンプトをユーザーが提示した場合
• 以前の Stitch 生成結果が良くなかった場合
• プロンプトに DESIGN.md のトークンを追加する必要がある場合

出力： 強化されたプロンプトテキスト、または next-prompt.md ファイル

➡️ 次のステップ： stitch-loop — 強化されたプロンプトを反復ビルドループに渡し、実際のページを生成します。

---

3. stitch-loop — 反復ビルドループ（STEP 3）

→ SKILL.md を読む

概要： 複数ページの Web サイトを構築する、自律的なバトンパスループです。各反復では、タスク（next-prompt.md）を読み込み、ページを生成して統合し、ドキュメントを更新し、次のタスクを書き込みます。

使用するタイミング：

• ゼロから複数ページのサイト全体を構築する場合
• 自律的かつ継続的なページ生成が必要な場合
• サイトマップに基づく、構造化されたビルドプロセスを使いたい場合

依存関係： design-md（DESIGN.md 用）、enhance-prompt（バトンプロンプト用） 出力： site/public/ 内のサイト全体、更新された SITE.md

➡️ 次のステップ： 次のいずれか、または両方を選びます。

• react-components — 生成された HTML ページを、本番環境で使用できる React/TypeScript コンポーネントに変換します。
• remotion — 完成した画面を紹介するウォークスルー動画を作成します。

---

4. react-components — デザインから React へ（STEP 4）

→ SKILL.md を読む

概要： Stitch が生成した HTML を、適切な props インターフェース、モックデータレイヤー、AST ベースの検証を備えた、モジュール式の React/TypeScript コンポーネントに変換します。

使用するタイミング：

• Stitch の画面を本番用 React コードに変換する場合
• HTML から型安全でモジュール式のコンポーネントを抽出する必要がある場合
• コンポーネントアーキテクチャを自動検証したい場合

出力： src/ 内の React コンポーネント、src/data/mockData.ts 内のモックデータ

➡️ 次のステップ： 次の方法を検討します。

• shadcn-ui — カスタム UI プリミティブ（ボタン、入力欄、ダイアログ）を shadcn/ui コンポーネントに置き換え、洗練されたアクセシブルなコンポーネントライブラリを作成します。
• remotion — まだ作成していない場合は、ウォークスルー動画を作成します。

---

5. remotion — ウォークスルー動画（STEP 5）

→ SKILL.md を読む

概要： Remotion を使い、Stitch プロジェクトのスクリーンショットから、滑らかなトランジション、ズーム効果、テキストオーバーレイを備えたウォークスルー動画を生成します。

使用するタイミング：

• デザインした画面を紹介する動画が必要な場合
• プロフェッショナルなアプリのウォークスルーを作成したい場合
• Stitch のデザインからデモ動画を作成する場合

注： Stitch に特化しない一般的な Remotion 作業には、代わりにメインの remotion スキルを使用してください。Remotion 公式リポジトリのルールファイルが 25 個以上含まれています。

出力： Remotion プロジェクトと、レンダリングされた .mp4

➡️ これは通常、パイプラインの最終ステップです。 自動的な次のステップはありませんが、動画の共有や公開を提案できます。

---

6. shadcn-ui — コンポーネントライブラリ（補助）

→ SKILL.md を読む

概要： shadcn/ui コンポーネントの統合に関する専門的なガイダンスを提供します。コンポーネントの確認、インストール、カスタマイズ、バリアント、ブロック、アクセシビリティを扱います。shadcn MCP サーバーまたは CLI と連携します。

使用するタイミング：

• 新しいプロジェクトに shadcn/ui を設定する場合
• shadcn コンポーネントをインストールまたはカスタマイズする場合
• フォーム、データテーブル、認証用レイアウト、ダッシュボードを構築する場合
• cva を使ったコンポーネントのバリアントパターンが必要な場合
• react-components の後に、カスタムプリミティブを shadcn/ui に置き換える場合

注： このスキルは Stitch に依存せず、あらゆる React/Next.js プロジェクトで役立ちます。特に react-components の後などにメインパイプラインと並行して組み込める、補助スキルとして活用できます。

出力： components/ui/ 内のインストール済みコンポーネント、設定済みの components.json

---

一般的なワークフロー

フルパイプライン（新規プロジェクト）

1. design-md      → Analyze an existing screen → get DESIGN.md
2. enhance-prompt → Write a prompt for the next page → inject design tokens
3. stitch-loop    → Generate page → integrate → write next baton → repeat
4. react-components → Convert final HTML pages to production React
5. remotion       → Create a walkthrough video of the finished product

クイックビルド（1 ページ）

1. enhance-prompt → Polish the user's idea into a great prompt
2. Generate directly with Stitch MCP → get HTML
3. react-components → Convert to React (optional)

デザインシステムのみ

1. design-md → Document an existing project's visual language

動画のみ

1. remotion → Create a walkthrough video from existing Stitch screenshots

コンポーネントライブラリのみ

1. shadcn-ui → Set up and customize shadcn/ui components

単独での使用

• shadcn-ui — React/Next.js の UI コンポーネントを扱うときにいつでも使用できます（Stitch は不要です）
• design-md — 任意のプロジェクトのデザインシステムをドキュメント化するために、単独で使用できます
• enhance-prompt — 任意の UI 生成プロンプトを改善するために、単独で使用できます

謝辞

• stitch-skills をベースにしています
• これは Google が公式にサポートする製品ではありません。このプロジェクトは、Google Open Source Software Vulnerability Rewards Program の対象ではありません。