generating-components

フェーズ 3：コンポーネントの生成 — Gemini Design で UI を構築する

実施時期

フェーズ 0〜2 の完了後に実施します。design-system.md、トークン、copy-guide.md が存在している必要があります。

入力（フェーズ 0〜2 から）

• OKLCH パレット、タイポグラフィ、モーションの個性を含む design-system.md。
• フェーズ 1 の fuse-browser による閲覧で得た CSS 精度の観察結果（oklch 値、clamp サイズ、グリッド比率）。
• フェーズ 2 の copy-guide.md（トーン、CTA、マイクロコピー）。

手順

1. 生成前のチェックリスト — design-system.md の存在、OKLCH トークンの定義、タイポグラフィの組み合わせ、モーションプロファイルの設定、visual-technique-matrix の参照を確認します。
2. インスピレーションを探す — セクターに合ったサイトで mcp__fuse-browser__browser_open を実行し、続けて mcp__fuse-browser__browser_navigate と mcp__fuse-browser__browser_screenshot を実行します（../1-designing-systems/references/design-inspiration.md と ../1-designing-systems/references/design-inspiration-urls.md を参照）。新規プロジェクト：4 サイト。新規ページ：2 サイト。新規コンポーネント：1 サイト。
3. 21st.dev を検索する — コンポーネントのパターンを探すため、mcp__magic__21st_magic_component_inspiration を実行します。
4. プレミアムパターンを読む — references/premium-patterns/PATTERNS.md を読み、セクターに合ったパターンを 2〜3 個選んでから、それぞれの description.md を読みます。それぞれから「Gemini Context Prompt」セクションをコピーします。
5. Gemini 用に 7 つの XML ブロックを準備する：<aesthetics>、<typography>、<color_system>、<spacing>、<layout>、<states>、<forbidden>。
6. 生成する — design-system.md のトークンとプレミアムパターンのコンテキストプロンプトを組み合わせて、mcp__gemini-design__create_frontend を実行します。context パラメーターには、コピーした Gemini Context Prompts と、「ビジュアルの奥行きが必要：ヒーローは >= 75vh、3 段階のシャドウ、セクションごとに交互の背景、グラスモーフィズムのナビゲーション、H1 と本文のタイポグラフィのコントラストは 3:1。フラットデザインは禁止。」を必ず含めます。
7. references/component-variants-ref.md に従って、サイズ、状態、色のバリアントを追加します。
8. references/layouts/（ページ、ナビゲーション、パターン）と references/component-composition-ref.md を使ってレイアウトを構成します。
9. 反復する — references/gemini-feedback-loop.md に従って mcp__gemini-design__modify_frontend を実行します。

出力

• design-system.md のアイデンティティに合致する、Gemini で生成された HTML/CSS コンポーネント。
• 定義済みのバリアント（サイズ、状態、色）。構成済みのページレイアウト。
• フェーズ 4 でアニメーションを追加できる状態のコンポーネント。

次のステップ → フェーズ 4：アニメーションの追加

4-adding-animations/SKILL.md — モーション、インタラクション、ビジュアルエフェクトを追加します。

参照資料

ファイル	目的
references/gemini-design-workflow.md	Gemini MCP ワークフロー
references/gemini-tool-signatures.md	Gemini ツール API シグネチャ
references/gemini-feedback-loop.md	反復的な改善プロセス
references/premium-patterns/PATTERNS.md	CSS 仕様と Gemini プロンプトを含む 10 種類のプレミアムデザインパターン
../1-designing-systems/references/design-inspiration.md	閲覧方法（フェーズ 1）
../1-designing-systems/references/design-inspiration-urls.md	セクター別 URL（フェーズ 1）
references/component-variants-ref.md	バリアントパターン
references/component-composition-ref.md	コンポーネント構成パターン
references/layouts/	ページレイアウト、ナビゲーション、パターン
references/templates/	コンポーネントテンプレート（ヒーロー、料金表など）
references/21st-dev.md	21st.dev コンポーネントライブラリ
references/shadcn.md	shadcn/ui の統合