stitch::generate-design

デザインを生成する

テキストの説明、画像、モックアップから新しいデザイン画面を作成したり、プロンプトやデザインシステムのトークンを使って既存の画面を編集したり、Stitch MCP を使ってデザインのバリエーションを生成したりできます。

メモ

このスキルで言及されているすべてのツールについて、MCP ツールのプレフィックスの扱い方はシステムプロンプトを参照してください（例：list_projects、 generate_screen_from_text、edit_screens）。

🎨 プロンプトの拡張パイプライン

Stitch の生成ツールまたは編集ツールを呼び出す前に、必ずユーザーのプロンプトを拡張してください。

1. コンテキストを分析する

• プロジェクト：list_projects を使って正しい projectId を見つけてください。適切なプロジェクトがない場合は、create_project を使って作成してください。
• デザインシステム：list_design_systems を使って、プロジェクトにデザインシステムがあるか確認してください。ある場合、デザイントークン（色、フォント、角の丸み）はすでにプロジェクトレベルで適用されているため、生成プロンプトに色、フォント、テーマに関する指示を含めないでください。ない場合は、画面を生成する前に manage-design-system スキルに対応を委任してください。

2. UI/UX の用語を洗練する

曖昧な表現を置き換えるには、デザインマッピングを参照してください。

• 曖昧：「すてきなヘッダーにする」
• 専門的：「ガラスモーフィズム効果と中央揃えのロゴを備えた固定ナビゲーションバー」

コンポーネント名、形容詞の候補、色の役割、形状の説明には、プロンプト用キーワードを使用してください。

3. 最終プロンプトを構成する

Stitch 用に拡張したプロンプトを構成してください。レイアウト、コンテンツ、構造のみに焦点を当て、色、フォント、テーマに関する指示は含めないでください（これらはプロジェクトレベルで manage-design-system スキルが処理します）。

新しい画面には、次のテンプレートを使用してください。

[Overall purpose and user intent of the page]

**PLATFORM:** [Web/Mobile], [Desktop/Mobile]-first

**PAGE STRUCTURE:**
1. **Header:** [Description of navigation and branding]
2. **Hero Section:** [Headline, subtext, and primary CTA]
3. **Primary Content Area:** [Detailed component breakdown]
4. **Footer:** [Links and copyright information]

編集では、変更内容を具体的に指定してください。

• 位置：「[ヒーローセクション]の[プライマリボタン]を変更して……」
• ビジュアル：「……濃い青（#004080）にし、控えめな影を追加します。」
• 構造：「プライマリボタンの横に、‘Learn More’というテキストのセカンダリボタンを追加します。」

注意

生成プロンプトには、16 進数コード、フォント名、カラーパレット、角の丸みの値、デザインシステムのトークンを含めないでください。これらは manage-design-system スキルによってプロジェクトレベルで適用され、重複すると競合します。（編集プロンプトでは、色を正確に調整するために 16 進数コードを使用できます。）

4. AI のインサイトを提示する

ツールを呼び出した後は必ず、outputComponents（テキストの説明と提案）をユーザーに提示してください。

プロンプト拡張の完全な変更前／変更後の例については、examples/enhanced-prompt.mdを参照してください。

---

手順

モードを判定する

ユーザーのリクエストに基づいて、使用するフローを決定してください。

• テキストの説明から作成したい → テキストから生成フロー
• 画像、スクリーンショット、またはモックアップを提供している → 画像から生成フロー
• 既存の画面を変更したい → 編集フロー
• レイアウト／色／コンテンツのバリエーションが欲しい → バリエーションを生成フロー

---

テキストから生成するフロー（新しい画面）

1. ユーザープロンプトを拡張する

上記のプロンプト拡張パイプラインを適用してください。

2. プロジェクトを特定する

projectId がすでにわかっていない場合は、list_projects を使って正しい projectId を見つけてください。

3. 画面を生成する

拡張したプロンプトと、手順 1 で見つかった場合は designSystem ID を指定して、generate_screen_from_text ツールを呼び出してください。

{
  "projectId": "...",
  "prompt": "[Your Enhanced Prompt]",
  "designSystem": "assets/...", // Optional: Pass if found in Step 1
  "deviceType": "DESKTOP"  // Options: MOBILE, DESKTOP, TABLET
}

4. AI のフィードバックを提示する

outputComponents に含まれるテキストの説明と提案を、必ずユーザーに提示してください。

5. デザインアセットをダウンロードする

生成後、outputComponents の HTML とスクリーンショットの URL を .stitch/designs ディレクトリにダウンロードしてください。

• 命名：ファイル名には画面 ID または内容を表すスラッグを使用してください。
• ツール：run_command 経由で curl -o を使うか、同様の方法を使用してください。
• ディレクトリ：.stitch/designs が存在することを確認してください。

6. 確認と調整

• 結果が期待どおりでない場合は、Edit フローを続行し、 対象を絞って調整します。
• 基本的なレイアウトが間違っている場合を除き、最初から再生成しないでください。

---

画像から生成するフロー（画像／モックアップ → デザイン）

ユーザーが画像、スクリーンショット、またはデザインのモックアップを提供し、Stitch で再現する場合は、このフローを使用します。

1. プロジェクトを特定する

list_projects を使用して、正しい projectId を見つけます。適切なプロジェクトが 存在しない場合は、create_project を使用して作成します。

2. 画像をアップロードする

upload-to-stitch スキルに委任して、画像をプロジェクトにアップロードします。 これにより、画像をコンテンツとする新しい画面が作成されます。

3. Edit で調整する

アップロード後、list_screens を使用して新しく作成された screenId を見つけ、 説明的なプロンプトを指定して edit_screens を呼び出し、デザインを調整します。

{
  "projectId": "...",
  "selectedScreenIds": ["<uploaded-screen-id>"],
  "prompt": "[Describe what to adjust, enhance, or recreate from this mockup]"
}

ヒント

最良の結果を得るには、「このようにしてください」と言うだけでなく、画像の意図を説明してください。たとえば、「これはダッシュボードのモックアップです。適切なデータテーブル、サイドバーのナビゲーション、チャートウィジェットを備えたデザインとして再現してください。」のようにします。

4. AI のフィードバックを提示する

outputComponents からのテキストによる説明と提案は、必ずユーザーに提示してください。

5. デザインアセットをダウンロードする

outputComponents の HTML とスクリーンショットの URL を .stitch/designs ディレクトリに ダウンロードします。

• 命名：ファイル名には画面 ID または説明的なスラッグを使用します。
• ツール：run_command 経由の curl -o などを使用します。
• ディレクトリ：.stitch/designs が存在することを確認します。

---

Edit フロー（既存画面の変更）

1. 画面を特定する

list_screens または get_screen を使用して、正しい projectId と screenId を見つけます。

2. 編集プロンプトを作成する

具体性を重視し、プロンプト拡張パイプラインを適用します。

• 場所：「[hero section] の [primary button] の色を変更する……」
• ビジュアル：「……濃い青（#004080）にして、控えめな影を追加する。」
• 構造：「『Learn More』というテキストのセカンダリボタンを、プライマリボタンの隣に追加する。」

3. 編集を適用する

edit_screens ツールを呼び出します。

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Your targeted edit prompt]"
}

4. AI のフィードバックを提示する

outputComponents からのテキストによる説明と提案は、必ずユーザーに提示してください。

5. デザインアセットをダウンロードする

編集後、outputComponents の更新された HTML とスクリーンショットの URL を .stitch/designs ディレクトリにダウンロードし、以前のバージョンを上書きして、 ローカルファイルに最新の編集内容が反映されるようにします。

• 命名：ファイル名には画面 ID または説明的なスラッグを使用します。
• ツール：run_command 経由の curl -o などを使用します。
• ディレクトリ：.stitch/designs が存在することを確認します。

6. プロジェクトのメタデータを更新する

アセットをダウンロードした後、変更（更新された画面タイトルや、編集で追加された新しい画面 ID など）を反映するために .stitch/metadata.json を更新します。メタデータ ファイルには、すべての画面、デバイスタイプ、デザインシステム情報が記録されています。形式については、 manage-design-system スキルの examples/metadata.json を参照してください。

7. 確認して繰り返す

• 出力された画面を確認し、変更が正しく適用されていることを確認します。
• さらに仕上げが必要な場合は、新しい具体的なプロンプトを使って編集フローを繰り返します。

---

バリエーション生成フロー（バリエーションの検討）

ユーザーが既存の画面について、別のレイアウト、配色、またはコンテンツのバリエーションを検討したい場合は、このフローを使用します。

1. 画面を特定する

list_screens または get_screen を使用して、正しい projectId と screenId を見つけます。

2. バリエーションのオプションを設定する

適切なオプションを指定して generate_variants ツールを呼び出します。

{
  "projectId": "...",
  "selectedScreenIds": ["..."],
  "prompt": "[Describe the direction for variants]",
  "variantOptions": {
    "variantCount": 3,
    "creativeRange": "EXPLORE",
    "aspects": ["LAYOUT", "COLOR_SCHEME"]
  }
}

バリエーションのオプション：

• variantCount：1～5 個のバリエーション（デフォルト：3）
• creativeRange：REFINE（控えめ）、EXPLORE（バランス重視）、または REIMAGINE （大胆）
• aspects：特定の要素に絞ります — LAYOUT、COLOR_SCHEME、 IMAGES、TEXT_FONT、TEXT_CONTENT。または、すべてを対象にする場合は空欄にします。

3. AI のフィードバックを提示する

outputComponents からのテキストによる説明と提案は、必ずユーザーに提示してください。

4. デザインアセットをダウンロードする

outputComponents からバリエーションの HTML とスクリーンショットの URL をダウンロードし、 .stitch/designs ディレクトリに保存します。

• 命名：ファイル名にはスクリーン ID または内容が分かるスラッグを使用します。
• ツール：run_command 経由で curl -o などを使用します。
• ディレクトリ：.stitch/designs が存在することを確認します。

---

💡 ヒント

• 構造を意識する：プロンプトでは、ページをヘッダー、ヒーロー、機能、フッターに分けて説明します。
• コンテンツを優先する：見た目ではなく、各セクションに何が含まれるか（テキスト、画像、CTA）を説明します。
• 反復的に磨き上げる：全面的に再生成するより、対象を絞って編集することを優先します。
• テーマの混入を避ける：生成用プロンプトには、カラーコード、フォント名、色の役割を決して含めないでください。ビジュアルスタイルはデザインシステムが処理します。
• インタラクションを指定する：ビジュアルスタイルではなく、ホバー状態、アニメーション、クリック時の動作に言及します。
• 編集範囲を絞る：変更を一度に1つに絞るほうが、長い変更リストを使うより適切な場合がよくあります。
• コンポーネントを参照する：「ナビゲーションバー」「ヒーローセクション」「フッター」「カードグリッド」などの専門用語を使用します。
• 編集時は色を正確に指定する：既存の画面を編集する際、色を正確に合わせるにはカラーコードを使用します。

📚 参考資料

• デザインマッピング — UI/UX キーワードと雰囲気を表す表現。
• プロンプトキーワード — Stitch が最もよく理解する技術用語。
• プロンプトの改善例 — 改善前と改善後のプロンプト。