Web Design Wizard（ウェブデザインウィザード）

Web Design Wizard（ウェブデザインウィザード） は何をしますか？

概要

ウェブページに対して複数の異なるデザインスタイルを並列ワークツリーで生成し、ユーザーが方向性を決める前に比較・洗練できるようにします。核となる原則は発散的に探索し、最適な選択肢に収束することです。

使用するタイミング

• ユーザーがウェブページの異なるデザインスタイルを探求したい場合
• ユーザーがデザインオプション、ビジュアルディレクション、スタイル比較を求めた場合
• ユーザーが複数の実装案から選びたい場合

使用してはいけないタイミング:

• ユーザーがすでに特定のデザインを定義している場合 → saurun:react-tailwind-v4-components または frontend-design を直接使用
• ユーザーが既存のデザインを修正したい場合（新規作成ではない場合）

前提条件

以下のスキルがすべてインストールされている必要があります。不足しているものがあれば、処理を中断しユーザーにその旨を伝えてください。

スキル	使用フェーズ	目的
ui-ux-pro-max	フェーズ2	デザインシステムの生成
superpowers:using-git-worktrees	フェーズ6	並列ワークツリーのセットアップ
frontend-design	フェーズ6	プロダクショングレードの実装
vercel-react-best-practices	フェーズ6	Reactの最適化
copywriting	フェーズ6	コピーの洗練
nano-banana-pro	フェーズ6	画像生成 — インストール: npx skills add intellectronica/agent-skills@nano-banana-pro -g -y

ワークフロー

digraph design_wizard {
    "User request" [shape=doublecircle];
    "Discovery" [shape=box];
    "Style Generation" [shape=box];
    "User satisfied?" [shape=diamond];
    "Refinement" [shape=box];
    "Graphics Preference" [shape=box];
    "Project Setup" [shape=box];
    "Parallel Implementation" [shape=box];
    "Parallel Verification" [shape=box];
    "Complete" [shape=doublecircle];

    "User request" -> "Discovery";
    "Discovery" -> "Style Generation";
    "Style Generation" -> "User satisfied?";
    "User satisfied?" -> "Refinement" [label="no"];
    "Refinement" -> "User satisfied?";
    "User satisfied?" -> "Graphics Preference" [label="yes"];
    "Graphics Preference" -> "Project Setup";
    "Project Setup" -> "Parallel Implementation";
    "Parallel Implementation" -> "Parallel Verification";
    "Parallel Verification" -> "Complete";
}

フェーズ1: ディスカバリー

AskUserQuestion を使用してコンテキストを収集します。質問はバッチ処理 — 1回の呼び出しで最大4つの質問を行います。明らかな回答は文脈から推測します（例：コーヒーショップは消費者向けで、おそらく温かみのある雰囲気）。

収集する情報:

1. プロジェクト名 — package.json または Git リポジトリ名から検出し、ユーザーに確認
2. ページタイプ — ランディングページ、ポートフォリオ、ブログ、Eコマース、SaaS、ドキュメント
3. ターゲットオーディエンス — プロフェッショナル、消費者、開発者、クリエイティブ業界
4. 雰囲気/印象 — プロフェッショナル、遊び心、ラグジュアリー、ミニマル、大胆、温かみ、未来的
5. コンテンツ言語 — 英語、日本語など
6. スタイルの好み/非好み — 上記から明らかでない場合のみ

ユーザーのリクエストから回答が明らかな質問はスキップします。

フェーズ2: スタイル生成

ui-ux-pro-max を使用してデザインスタイルを生成します:

デフォルト: 4スタイル（ユーザーが異なる数をリクエストすることも可能）。

各スタイルに対して:

1. 多様なキーワードを作成 — ディスカバリーの回答から生成。ページタイプ + オーディエンス + 雰囲気 + 独自の美的感覚を組み合わせます。すべてのスタイル間で多様性を確保します。

2. デザインシステムを生成: Skill ツールで ui-ux-pro-max を以下の引数で呼び出します: "[keywords]" --design-system --persist -p "[ProjectName]" --page "[style-name]" 保存先: カレントワーキングディレクトリの design-system/pages/[style-name].md

3. ユーザーに提示 — スタイル名、主要カラー、タイポグラフィ、雰囲気を表す形容詞、最適な使用例を含めます。

生成済みのスタイルを追跡し、洗練ラウンドでのキーワード重複を防止します。

フェーズ3: 洗練（反復的）

ユーザーの発言	アクション
"まったく異なるN個のスタイルをください"	新しいキーワードでN個の新スタイルを生成
"さらにN個のオプションをください"	N個の新スタイルを生成（前回のキーワードは避ける）
"XとYが好きです。Xに似たものをください"	XとYを保持し、Xのバリエーションを生成
"スタイルXとYを組み合わせてください"	両方の美学をブレンドした1つのスタイルを生成
"X、Y、Zを実装してください" または "すべて実装してください"	選択されたスタイルでフェーズ4に進む

フェーズ4: グラフィック設定

実装前に、選択されたすべてのスタイルに対するグラフィックについて一度に質問します:

AskUserQuestion で以下の選択肢を提示:

• "すべてに多くのグラフィック（ヒーロー＋アクセントグラフィック＋イラスト）"
• "すべてに最小限のグラフィック（ヒーロー画像のみ）"
• "デザインスタイルにグラフィックを委ねる（推奨）"
• "スタイルごとに個別に選択する"

ユーザーが最後のオプションを選んだ場合のみ、スタイルごとに質問します。

フェーズ5: プロジェクトセットアップ

プロジェクトの場所を確認

推奨: カレントワーキングディレクトリの designs/[project-name]/

ユーザーに確認するか、上書きを許可します。

プロジェクトを作成

1. mkdir -p [location]
2. concept.md を作成 — テンプレートは concept-template.md を参照。ディスカバリーの回答から情報を埋めます。データがあるフィールドのみ記入 — 情報がないセクションは省略します。
3. git init は実行しない — 既存のリポジトリを使用します。プロジェクトドキュメントは現在のブランチにコミットします。

git add designs/[project-name]/concept.md
git commit -m "docs: initialize [project-name] design exploration"

プロジェクト構造

[repo-root]/
├── designs/[project-name]/
│   └── concept.md
├── design-system/pages/
│   ├── [style-1].md
│   └── [style-2].md
└── .worktrees/
    ├── [style-1-branch]/    # React + Vite + TypeScriptプロジェクト
    └── [style-2-branch]/

フェーズ6: 並列実装

重要: すべての実装エージェントを、複数の Task ツール呼び出しを含む単一のメッセージで起動します。

選択された各スタイルに対して、1つのサブエージェントを起動します。完全なプロンプトテンプレートは implementation-prompt.md を参照。[absolute-path-to-repo-root] は実際のリポジトリルートパスに置き換え、サブエージェントがワークツリー間の参照を解決できるようにします。

各サブエージェントの重要ポイント:

• superpowers:using-git-worktrees を使用して .worktrees/[style-name]/ にワークツリーを作成
• React + Vite + TypeScript プロジェクトを作成: npm create vite@latest . -- --template react-ts
• design-system/pages/[style-name].md のデザイン仕様を読み込む
• Skill ツールで frontend-design、vercel-react-best-practices、copywriting、nano-banana-pro を呼び出す
• グラフィック設定に従って画像を生成
• npm run build でビルド確認
• すべての変更をコミット

すべてのエージェントが完了するのを待ってからフェーズ7に進みます。

フェーズ7: 並列検証

重要: すべての検証エージェントを、複数の Task ツール呼び出しを含む単一のメッセージで起動します。

各実装に対して、1つの検証サブエージェントを起動します。完全なプロンプトテンプレートは verification-prompt.md を参照。ポート番号は順番に割り当て（5173、5174、5175...）、[absolute-path-to-repo-root] は実際のパスに置き換えます。

検証チェック:

• Devサーバーがエラーなく起動する
• すべてのURL/リンクが有効
• 画像が存在し、適切に参照されている
• デザイン仕様の遵守（色、タイポグラフィ、レイアウト、エフェクト）— 1〜10点で評価
• プロダクションビルドが成功する

すべて完了後、比較サマリーを表示:

スタイル1: [名前] — ✅ すべて合格 — デザイン: 8.5/10
スタイル2: [名前] — ⚠️ 2つのURLが無効 — デザイン: 9.0/10
スタイル3: [名前] — ❌ ビルド失敗 — レポートを参照

結果に基づき、最適なスタイルを推奨します。

クイックリファレンス

フェーズ	アクション	主要ツール
1. ディスカバリー	AskUserQuestionでコンテキスト収集（最大4件を一括）	AskUserQuestion
2. スタイル生成	ui-ux-pro-maxで4つのデザインシステムを生成	Skill
3. 洗練	ユーザーがスタイルを選択するまで反復	AskUserQuestion
4. グラフィック	選択スタイルのグラフィック設定を質問	AskUserQuestion
5. プロジェクトセットアップ	concept.md作成、スキャフォールディングをコミット	Write, Bash
6. 実装	スタイルごとに並列サブエージェントを起動	Task
7. 検証	並列検証エージェントを起動、比較結果を表示	Task

よくある間違い

• サブエージェント内でデザイン仕様を再生成する — デザイン仕様はフェーズ2で作成済み。サブエージェントはそれを読み込むだけで、ui-ux-pro-maxを再呼び出ししてはいけません。
• サブエージェントを逐次的に起動する — フェーズ6と7では、すべてのエージェントを複数のTask呼び出しを含む単一メッセージで起動する必要があります。一度に1つずつ起動してはいけません。
• グラフィック設定をスキップする — 実装前に必ず質問します。推測してはいけません。
• ワークツリーで git add . を使用する — node_modules、.env、OSファイルをコミットしないよう、特定のパスのみをステージングします。
• スタイル間で同一キーワードを使用する — 使用済みキーワードを追跡して多様性を確保します。重複キーワードは重複デザインを生みます。

エラーハンドリング

エラー	復旧方法
ui-ux-pro-max スクリプトが失敗	よりシンプルなキーワードで再試行。それでも失敗する場合は、スタイルキーワードから手動でデザインシステムを作成。
すべてのスタイルが却下	ユーザーに具体的な方向性を質問：「何が気に入らなかったですか？色？レイアウト？全体的な雰囲気？」
サブエージェントのスキルが見つからない	エージェントは Skill ツールで呼び出すべき。スキルが本当に不足している場合は、その拡張ステップをスキップしてメモを残す。
実装のビルドが失敗	ワークツリー内で修正し、ビルドを再実行。修正不可能な場合は問題を報告。