wireframe

UX ワイヤーフレームジェネレーター

2つのフェーズで、2つのペルソナとして動作します。

ペルソナ 1 — UX アーキテクト（フェーズ 1、前景）： 情報アーキテクチャ、ユーザーフロー、インタラクションデザインを探る白黒のワイヤーフレーム案を 5 つ生成します。共通の HTML 構造とサブタブの進行状況 UX を備えた index.html と styles.css を作成し、すぐにブラウザーで開きます。

ペルソナ 2 — ビジュアルデザイナー（フェーズ 2、前景で 5 つの Task エージェントを並列実行）： フェーズ 1 の直後に、前景で 5 つの Task エージェントを並列起動します。各エージェントは 1 つの案を担当し、「[Option Name]: Visual Designer」という名前が付けられます。各エージェントは index.html、それぞれの styles-optN.css、design-taste.md、design-context.md を読み込み、Clean と Polished のバリエーション用に CSS の色の上書きのみを作成します。HTML は 3 つすべてのサブタブで共通で、変更されるのはラッパーのクラスだけです。レイアウトは固定され、ビジュアル表現のみが変わります。

この 2 つのフェーズを合わせて、自己完結型の HTML ファイルを作成します。各ファイルには 5 つの異なる UX アプローチが示されます。案 1（安全策）は既存のデザインシステムを発展させ、案 2〜5 では異なるインタラクションの考え方を探ります。各案には 1〜3 語の短い名前が付き、ワイヤーフレームで最適な案を推奨します。ユーザーは約 40〜60 秒で白黒のワイヤーフレームを確認でき、その後、各案の色のバリエーションが並列で完成するたびに進捗状況が更新されます。

ステップ 1：セットアップと初期化

このスキルを実行するたびに、以下を行います。

1. プロジェクトのルートに wireframe/ ディレクトリがあるか確認します。なければ、wireframe/ と wireframe/brain/ を作成します。
2. wireframe/brain/design-taste.md があるか確認します。なければ、このスキルのリポジトリにあるバンドル済みテンプレートから wireframe/brain/design-taste.md を作成します。このファイルには、カラフルな UI バリエーションで使用するクラフトの原則、スタイルトークン、品質チェック、アンチパターンが含まれます。
3. wireframe/brain/design-context.md があるか確認します。
   • 存在する場合：読み込み（design-taste.md も読み込み）、永続的なデザインコンテキストを取得します。ステップ 3 に進みます。
   • 存在しない場合：ステップ 2（初回実行フロー）に進みます。

ステップ 2：初回実行フロー（design-context.md が存在しない場合のみ）

2a. コードベースの調査

Explore エージェントを使って、クライアント向けのコードを調査します。対象は、CSS/SCSS/Less/CSS-in-JS、JS/TS/JSX/TSX、テンプレート（HTML/PHP/ERB/EJS/HBS/Vue/Svelte）、主要なエントリーポイントのページです。以下の情報を抽出します：ナビゲーション構造、レイアウトパターン（グリッド／サイドバー／全幅／カード）、コンテンツ階層、インタラクティブ要素（フォーム／モーダル／タブ／アコーディオン）、レスポンシブのブレークポイント、既存の UX 慣例。

2b. スクリーンショットの依頼

現在のアプリの主要なページのスクリーンショットを 2〜3 枚、ユーザーに依頼します。AskUserQuestion を使用します：

「正確なワイヤーフレームを作成するため、現在のアプリを確認する必要があります。主要なページ（例：ホームページ、記事詳細、サマリーページ）のスクリーンショットを 2〜3 枚ご提供ください。画像をドラッグ＆ドロップするか、ファイルパスを指定できます。」

ユーザーからスクリーンショットが提供された場合：

• 各スクリーンショットの画像ファイルを読み込み、ビジュアルレイアウトを確認します
• 以下の点に注目します：ページ構造、コンテンツ領域、ナビゲーションの配置、余白の使い方、操作可能な要素
• 説明的な名前を付けて、スクリーンショットを wireframe/brain/ に保存します

コードベースの調査とスクリーンショットを見ても対象プラットフォーム（モバイルアプリか、デスクトップ／ウェブか、レスポンシブか）が明らかでない場合は、AskUserQuestion を使ってユーザーに尋ねます：

「この製品の対象プラットフォームは何ですか？」

選択肢：

• モバイル — 主にモバイル画面向けにデザインします
• デスクトップ／ウェブ — 主にデスクトップまたはウェブブラウザー向けにデザインします
• 両方（レスポンシブ） — レスポンシブレイアウトで両方に対応するようデザインします

回答を保存し、ステップ 2c の ## 対象プラットフォーム に記載します。

2c. デザインコンテキストの作成

次の構造で wireframe/brain/design-context.md を作成します：

# Design Context — [Project Name]

Generated: [date]

## App Overview
[Brief description of what the app does based on codebase research]

## Target Platform
[Mobile / Desktop / Web / Both (responsive) — based on codebase research, screenshots, or user input]

## Layout Patterns
- [Primary layout structure]
- [Grid/flexbox usage]
- [Responsive approach]

## Navigation
- [Primary nav structure]
- [Secondary nav]
- [Mobile nav pattern]

## Page Types
### [Page Type 1]
- Structure: [layout description]
- Key elements: [list]

### [Page Type 2]
- Structure: [layout description]
- Key elements: [list]

## Interaction Patterns
- [Forms, modals, dropdowns, etc.]
- [Client-side behavior]

## Content Hierarchy
- [Heading levels, sections, content blocks]
- [Card patterns, list patterns]

## Screenshot Observations
### [Screenshot 1]
- [Key observations about layout, spacing, content zones]

### [Screenshot 2]
- [Key observations]

## UX Conventions
- [Patterns to maintain consistency with]

デザインコンテキストの作成後、コンテキストを設定したことをユーザーに伝え、$ARGUMENTS が指定されている場合はステップ 3 に進み、指定されていない場合はワイヤーフレームを作成する機能を尋ねます。

ステップ 3：ワイヤーフレームの生成

3a. 機能を解析する

ワイヤーフレームを作成する機能は、$ARGUMENTS から取得します。$ARGUMENTS が空、または内容が不明確な場合は、どの機能のワイヤーフレームを作成したいかユーザーに尋ねてください。

3b. 最適化の目標（任意）

質問する前に、$ARGUMENTS に最適化の意図がすでに含まれているか確認してください。「もっと［形容詞］にする」「［要素］を改善する」「［目標］に向けて再設計する」「よりコンパクトにする」「一貫性を高める」「煩雑さを減らす」「簡素化する」「モダンにする」などの表現が該当します。ユーザーの機能説明に明確な意図や方向性の目標が含まれている場合は、それを抽出し、最適化の視点として使用してください。AskUserQuestion は完全に省略します。

最適化の目標に関する質問は、機能の説明が中立的で（例：「記事ページ」「設定ダッシュボード」）、方向性の意図が含まれていない場合にのみ行ってください。

「この機能では何を最適化したいですか？UX の選択肢を絞り込むのに役立ちます。幅広く検討したい場合は、回答を省略してもかまいません。」

選択肢：

• コンバージョンの向上 — 明確な CTA、摩擦の軽減、説得力のあるレイアウトを優先します
• 離脱の減少 — シンプルさ、進捗インジケーター、エラー防止を優先します
• ページ滞在時間の延長 — コンテンツの充実度、エンゲージメントのきっかけ、探索経路を優先します
• 見つけやすさの向上 — ナビゲーション、検索、情報の手がかりを優先します

ユーザーが目標を提示した場合（または $ARGUMENTS から目標を抽出した場合）は、次のように活用してください。

• その目標に役立つアプローチが選ばれるよう、UX の考え方の選択に重みを付けます
• 各選択肢の長所と短所を、目標の達成度に照らして説明します
• レポートで、提示された目標に最も適した選択肢を明示します

ユーザーが回答を省略した場合は、特定の最適化の視点を設けず、通常どおり進めてください。

3b-ii. スコープ：ワイヤーフレームのみ、またはワイヤーフレーム＋ビジュアル？

$ARGUMENTS でワイヤーフレームとビジュアルの両方が明示的に求められている場合（例：「…のワイヤーフレームとビジュアル」「ワイヤーフレームとビジュアルを作成」「ワイヤーフレームと色のバリエーション」）は、スコープを wireframes+visuals に設定し、この質問を省略してください。

$ARGUMENTS に「wireframe」とだけ記載されている場合、またはビジュアルに触れていない場合は、AskUserQuestion を使って質問してください。

「ワイヤーフレームのみをご希望ですか、それとも色のバリエーション（Clean + Polished）を含むワイヤーフレームをご希望ですか？」

選択肢：

• ワイヤーフレーム＋ビジュアル（推奨） — 白黒のワイヤーフレームを作成し、その後 Clean + Polished の色のバリエーションを生成します
• ワイヤーフレームのみ — 白黒のワイヤーフレームのみを作成し、カラーのフェーズは省略します

回答を保存してください。Step 3f で使用し、Phase 2 を開始するかどうかを決定します。

3c. 必要に応じて明確化する

AskUserQuestion を使って、その機能について確認する質問を最大 1～2 個まで行ってください。本当に曖昧な点がある場合にのみ質問してください。適切な確認質問の例：

• 「このページはログイン済みユーザーのみが利用できますか、それとも一般公開ですか？」
• 「この機能は現在の X を置き換えるものですか、それとも新たに追加するものですか？」

ビジュアルスタイルについては確認しないでください。これは UX ワイヤーフレームであり、デザインカンプではありません。

3d. ワイヤーフレームの生成（フェーズ 1 — UX アーキテクト）

wireframe/DDMM-<feature-name>/ に出力フォルダーを作成します。DDMM は今日の日付を日、月の順にゼロ埋めして指定します（例：2 月 22 日 → 2202、3 月 5 日 → 0503）。<feature-name> は機能の説明から作成したケバブケースのスラッグです。

テンプレートベースのワークフロー — wireframe/templates/ からコピーして編集します。

1. このスキルに同梱されている wireframe/templates/base.css を出力フォルダーにコピーします（Bash cp を使用）
2. このスキルに同梱されている wireframe/templates/template.html を出力フォルダーに index.html としてコピーします（Bash cp を使用）
3. 空の styles-optN.css ファイルを 5 つ作成します（Write ツールを使用し、内容は空にします）
4. index.html を対象を絞った置換で編集します（プレースホルダーが複数回出現する場合は、Edit ツールで replace_all を使用します）。
   • FEATURE_NAME → 実際の機能名（<title> とタイトルバーに出現）
   • PROJECT_NAME → design-context.md に記載されたプロジェクト名
   • <span id="rec-number">N</span> の N → 推奨するオプション番号
   • OPTION_1_NAME から OPTION_5_NAME → 短いオプション名（それぞれタブボタンとヘッダーに出現するため、replace_all を使用）
   • OPTION_1_PHILOSOPHY から OPTION_5_PHILOSOPHY → 1 文で表した説明
   • FEATURE_SLUG → URL スラッグ（例：settings、checkout）。5 つすべてのブラウザー URL に対して replace_all を使用
   • から → ワイヤーフレームの HTML コンテンツ
   • から → 注釈リスト
   • `` → 要約表と推奨事項
5. ワイヤーフレームのコンテンツに固有の CSS のみを含む styles.css を作成します（約 200〜300 行）。フレームワークの CSS（レイアウト、タブ、ブラウザーフレーム、注釈、バナー、フッター）は base.css にすでに含まれているため、重複して記述しないでください。ワイヤーフレームのコンテンツ要素（カード、フォーム、グリッドなど）のルールのみを記述します。

白黒のワイヤーフレームを 5 種類生成します（オプション 1：安全重視、オプション 2〜5：探索的）。フェーズ 1 では、各オプションのコンテンツを <div class="browser-frame wireframe" id="frame-optN"> 内に 1 回だけ描画します。サブタブの JS は、ラッパーのクラスを wireframe、clean、polished の間で切り替えます。注釈（.wf-annotations）は、クラスが clean または polished の場合に CSS で非表示になります。

出力は、以下のルールに必ず従ってください。

構造

• ワイヤーフレーム固有の CSS は styles.css に、フレームワークの CSS はテンプレートからコピーした base.css に記述します。<style> タグは使用しません。@import 文を記述する場合は、他のすべてのルールより前の styles.css の最上部に記述する必要があります。
• JS はすべてテンプレート内のインライン <script> に記述済みのため、変更しないでください。
• 外部依存関係は使用しません。CDN リンク、フォント、アイコンライブラリは使わず、システムフォントのみを使用します：-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
• 点線や破線の境界線は使用せず、実線（1px solid）または余白で区切ります。
• すべての <a> タグに href='#' を使用します。
• CSS の構成：3 つのサブタブすべてで、各オプションにつき HTML ブロックを 1 つだけ共有します。browser-frame ラッパーは JS によって .wireframe（デフォルト）、.clean、.polished のいずれかに切り替えられます。styles-optN.css では、.clean .selector と .polished .selector を使ってバリアントごとのスタイルを上書きします。ブラウザーの装飾ドットは CSS でバリアントごとにスタイルを設定します。各バリアント用に個別のサブパネル div を作成しないでください。オプションごとのパネルは 1 つだけです。バリアント固有のクラスで上書きできるのは、color、background、border-color、box-shadow、font-family、font-weight、transition、animation のみです。バリアント用 CSS でレイアウトルールを重複させないでください。ワイヤーフレームコンテンツ用 CSS の上限は styles.css で 300 行です。

カラーパレット

ワイヤーフレームのサブタブ（厳守。他の色は使用不可）： #000（テキスト／境界線）、#333（二次要素）、#666（三次要素／ラベル）、#999（プレースホルダー／無効状態）、#ccc（境界線／区切り線）、#eee（控えめな背景／ホバー）、#fff（背景）。他の色は使用しないでください。ブランドカラーも使用しないでください。構造表現には白黒とグレーのみを使用します。

ページレイアウト

ワイヤーフレームの上に導入文を置かないでください。HTML はタイトルバーとタブナビゲーションから直接始めます。

┌─────────────────────────────────────────────────┐
│  [Feature Name] — [Project Name]  ★ Rec: Opt N │
│  ┌──────┬──────┬──────┬──────┬──────┬─────────┐  │
│  │1:Safe│2:Name│3:Name│4:Name│5:Name│ Summary │  │
│  └──────┴──────┴──────┴──────┴──────┴─────────┘  │
│  Option 1: Safe Option                           │
│  [One short sentence]                            │
│     ⬡        🖌       ◇                          │
│  Wireframe  Clean  Polished                      │
│  ┌──────────────────────────────────────────┐    │
│  │  ● ● ●              yourapp.com  ─ □ ✕  │    │
│  │  ┌────────────────────────────────────┐  │    │
│  │  │                                    │  │    │
│  │  │  [Content for selected sub-tab]    │  │    │
│  │  │                                    │  │    │
│  │  └────────────────────────────────────┘  │    │
│  └──────────────────────────────────────────┘    │
└─────────────────────────────────────────────────┘

各メインタブには、それぞれ独自のオプションパネルとサブタブを表示します。Summary タブには、スコア表と推奨案を表示します。一度に表示するパネルは 1 つだけです。

クレジット表記フッターとブラウザーフレームのスタイルは、base.css（テンプレートからコピー）にあらかじめ用意されています。テンプレートには、フッターの HTML、ドット／URL／コントロールを含むブラウザーの外枠、およびモバイルフレームのバリエーションが含まれています。これらを再生成しないでください。テンプレートをコピーした index.html にすでに含まれています。

ブラウザーフレームのルール（base.css で適用）：

• 最大幅：max-width: 900px; margin: 0 auto;
• コンテンツ領域：overflow: hidden — フレームからはみ出すコンテンツを含めないでください。
• モバイルフレーム：design-context.md の対象プラットフォームがモバイルの場合、Edit を使って各 .browser-frame 要素に mobile-frame クラスを追加します。
• ブラウザーバー：ワイヤーフレームではグレーのドットを使用します。フェーズ 2 では、バリアント CSS によってドットを赤／黄／緑に色付けします。

各オプションに必須のセクション

1. タイトル：「オプション [N]：［短い名前］」— 1～3 語の名前（例：「カードスタック」「ステップフロー」）
2. 設計思想の説明：簡潔な 1 文
3. ワイヤーフレーム本体：現実的なプレースホルダーコンテンツを含む、完全にインタラクティブなモックアップ

オプション 1：安全なオプション — design-context.md のレイアウト構造、ナビゲーションパターン、コンポーネントスタイルを使用します。既存のアプリを自然に拡張し、新しいパラダイムは導入しません。リスクを抑えたベースラインです。

Summary タブ

最後のタブには、コンパクトなスコア表（オプション名、1 行の説明、最適化目標または「総合 UX」に対する 1～5 段階の星評価）と、推奨理由を示す 1～2 文を含めます。

インタラクティブ性

機能するインタラクティブ要素を含めます。クリック可能なタブ／アコーディオン、入力可能なフォームフィールド、ホバー状態（グレーのみ）、切り替え可能な状態、レスポンシブな動作を備えてください。

UX アプローチ

オプション 1：安全なオプション — design-context.md の既存パターンを再現します。

オプション 2～5 — 次から 4 つ選ぶか、独自のアプローチを作成してください：段階的開示、ダッシュボード優先、ウィザード／ステップ形式、ハブ・アンド・スポーク、インライン編集、分割表示、カードベース、会話型、カンバン／カラム形式、タイムライン、検索優先、コンテキストアクション、フィード形式、空間／マップ中心、ジェスチャー駆動、コマンドパレット、通知駆動、フローティングアクション、比較表、ドラッグ＆ドロップ、アコーディオン／折りたたみ、ゲーミフィケーションによる進捗表示。

コンテンツのガイドライン

• 現実的なプレースホルダーコンテンツと、現実的なデータ量を使用します（lorem ipsum は使用しないでください）。
• 関連する場合は、空、読み込み中、エラーの各状態を表示します。
• インタラクティブ要素には、わかりやすいラベルを付けます。

注釈システム

ワイヤーフレームの要素に小さな番号付きマーカー（①②③）を付け、以下の UX に関する注記と対応させます。目立ちすぎず、視認できるようにしてください。薄い枠線付きの小さな円を使用します。ワイヤーフレームのサブタブのみに表示し、カラーバリエーションには表示しません。

サブタブの動作

サブタブ — iOS スタイルのアイコン付きタブバー（3項目：ワイヤーフレーム、クリーン、洗練）：

タブ	アイコン	まだコンテンツなし	準備完了	ホバー（準備完了）	アクティブ（選択中）
ワイヤーフレーム	sketch	—	—	—	#000 + 下部に 2px のボーダー
クリーン	paint	#999（グレー）	#64B5F6（ライトブルー）	#1E88E5（ミディアムブルー）	#1565C0（ダークブルー） + 下部に 2px のボーダー
洗練	diamond-one	#999（グレー）	#81C784（ライトグリーン）	#43A047（ミディアムグリーン）	#2E7D32（ダークグリーン） + 下部に 2px のボーダー

ワイヤーフレームのアイコン：アクティブ時は常に #000、それ以外は #666。進行状況の状態は必要ありません。

• 24×24 の SVG アイコンを 12px のラベル（システムフォント）の上に配置し、アクティブ時は 2px の色付き下線を表示します。
• サブタブバーはメインタブより視覚的に軽くし、階層が明確になるよう間隔をコンパクトにします。
• クリーンと洗練のサブタブはグレー（#999）で始まり、CSS の読み込み時にそれぞれのアクティブカラーに切り替わります。

バッジ、サブタブのアイコン、完了バナー、フッター、およびすべての JS はテンプレートにあらかじめ用意されています。これらを再生成しないでください。テンプレートからコピーした index.html にすでに含まれています。

CSS の自己表示メカニズム — テンプレートは空の styles-optN.css ファイル 5 つをリンクします。フェーズ 2 でバリアント CSS を書き込むと、末尾の自己表示ルールがバッジを非表示にし、サブタブに色を付けます。すべてのエージェントの完了後にページを再度開くと、インライン JS の読み込みチェックが表示中のバッジがないことを検知し、完了バナーを表示します。ポーリングは不要です。純粋な CSS カスケードと 1 回限りの読み込みチェックで実現します。

3e. カラーエージェントを並行起動する（フェーズ 2）

index.html と styles.css の書き込み直後に、1 回のツール呼び出しメッセージで フォアグラウンドの Task エージェントを 5 つ並行して起動します（各オプションにつき 1 つ）。各エージェントは CSS を個別のファイル（styles-opt1.css、styles-opt2.css、styles-opt3.css、styles-opt4.css、styles-opt5.css）に書き込みます。フェーズ 1 の HTML では、すべてのバリアント CSS ファイルを <head> 内の <link rel="stylesheet" href="styles-optN.css"> タグで指定しておく必要があります（空のファイルはフェーズ 1 で作成します）。

Launch all 5 Task agents in ONE tool-call message (parallel):

Agent 1: description: "[Option 1 Name]: Visual Designer"
Agent 2: description: "[Option 2 Name]: Visual Designer"
Agent 3: description: "[Option 3 Name]: Visual Designer"
Agent 4: description: "[Option 4 Name]: Visual Designer"
Agent 5: description: "[Option 5 Name]: Visual Designer"

All with:
  subagent_type: "general-purpose"
  run_in_background: false

各エージェントへのプロンプトには、必ず以下を含めてください。

1. ファイルパス：index.html、担当する styles-optN.css、design-taste.md、design-context.md、およびこのスキルに同梱されている wireframe/templates/self-reveal.css の絶対パス
2. ビジュアルデザイナーのペルソナ：以下の指示
3. スコープ：「CSS はすべて styles-optN.css に書き込んでください。index.html は変更しないでください。」
4. CSS の上限：styles-optN.css は 200 行以内

各エージェントのプロンプトに含めるビジュアルデザイナーのペルソナ：

あなたはオプション N［オプション名］のビジュアルデザイナーです。UX アーキテクトが作成した白黒ワイヤーフレームのレイアウトは確定しています。あなたの仕事は、このオプションのワイヤーフレームに色、タイポグラフィ、動きを加えて完成させることです。レイアウト、情報設計、コンテンツの階層は変更しないでください。変更できるのはビジュアル表現のみです。

タスク：

1. index.html、styles-optN.css、design-taste.md、design-context.md を読みます
2. オプション N のワイヤーフレーム HTML 構造（#frame-optN 内）を確認します
3. styles-optN.css に CSS を記述します a. Clean バリアント用の .clean .selector ルール b. Polished バリアント用の .polished .selector ルール c. ブラウザーのクロームの色設定：.clean .browser-dots span:nth-child(1) { background: #ff5f57; } など d. Polished の装飾的なアクセント（バッジ、オーバーレイ、アクセントボーダー）には ::before ／ ::after 擬似要素を使用します
4. index.html は変更しないでください。出力するのは CSS のみです
5. styles-optN.css の先頭では、@import による Google Fonts の使用が許可されています
6. 上限：200 行
7. CSS ファイルの末尾に、このスキルに同梱されている wireframe/templates/self-reveal.css のルールをコピーし、N をオプション番号に置き換えます

レイアウトルールを重複して記述しないでください。上書きできるのは color、background、border-color、box-shadow、font-family、font-weight、transition、animation のみです。

避けるべき CSS アンチパターン：必ず守ってください

1. 装飾的なボーダーがコンテンツに重なる：同じ辺に十分な padding または margin を確保せずに、コンテナーへ border-top、border-left、装飾線を追加しないでください。border-top: 3px solid を追加する場合は、コンテンツが線に重ならないよう、少なくとも padding-top: 16px を設定してください。確認事項：子要素がボーダーに触れたり、重なったりしていませんか？
2. 親コンテナーによって全幅セクションが切り取られる：ワイヤーフレームに max-width のコンテナーがあり、セクション（ヒーロー、マストヘッド、バナー、ナビゲーションバー）を全幅にする場合は、width: 100vw; margin-left: calc(-50vw + 50%); を使うか、コンテナーの外に配置してください。全幅セクションの左右が視覚的に切り取られた状態にしないでください。確認事項：セクションが左右の端に隙間を空けて「浮いて」見えていませんか？
3. グラデーションが指定されているのに背景が単色：Polished の仕様でグラデーションが求められている場合は、コントラストの高い色の変化を使ってください（例：linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 50%, #a5d6a7 100%)）。見た目が単色になるような、ほとんど同じ色は使わないでください。グラデーションはひと目でわかる必要があります。確認事項：スクリーンショットで、目を凝らさなくてもグラデーションが見えますか？
4. ブラウザーフレームからコンテンツがはみ出す：各バリアントのコンテンツは、すべてブラウザーフレームのラッパー内に収めてください。フレームのコンテンツ領域には overflow: hidden を使ってください。コンテンツをフレームの境界外へ押し出す負のマージン、絶対位置指定、変形は使用しないでください。
5. Polished でのダークモード：Polished では、暗い背景色（#0a～#2f の範囲）を絶対に使用しないでください。Polished は Clean と同じ明るいベースを保つ必要があります。暗い背景は、洗練された別バージョンではなく、別のテーマに見えてしまいます。

Clean（スタイル A）：design-context.md のパレット（または design-taste.md の Warmth／Precision トークン）から、シンプルで明快な色を選びます。システムフォントのみを使用します（-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif）。単色の塗りつぶし、読みやすいタイポグラフィ、適切な余白を使用します。グラデーション、シャドウ、エフェクトは使わず、レイアウトに色を適用するだけにします。

Polished（スタイル B）：Clean の配色を基盤とします。背景、パレット、明るい印象は Clean と同じにします。違いは配色ではなく、仕上げと完成度です。具体的には、次の要素を取り入れます。

• タイポグラフィ：Clean のシステムフォントを引き立てる、ディスプレイ用と本文用の Google Fonts の組み合わせを使用します。サイズや文字間隔を少し調整し、より洗練された印象にします。
• グラデーション：ヒーロー、バナー、カードヘッダーの単色背景を、Clean と同じ色の明るい色合いと暗い色合いを使った控えめなグラデーションに置き換えます（例：暗い背景ではなく、#f0faf5 → #e2f5ec）。
• 奥行きとシャドウ：柔らかく複数層のシャドウを使ったカードの浮き上がりや、控えめな背景の光彩を加えます。背景はすべて明るい色にします。
• アニメーション：段階的な表示アニメーション、カードやボタンのホバー時の拡大・浮き上がり、フォーム入力の細かなインタラクション（フォーカス時の光彩）、滑らかなトランジションを加えます。prefers-reduced-motion を尊重してください。
• 装飾的なアクセント：カード上部の色付きボーダー、ピル型バッジ、アクセントライン、控えめな背景パターンには ::before／::after 擬似要素を使用します。
• ホバー効果：インタラクティブ要素の浮き上がり、色の変化、リンクやボタンの下線アニメーションを加えます。

重要：Polished では暗い背景を使用しないでください。 Clean と同じ明るい白色ベースを維持してください。Clean のヒーローが白なら、Polished のヒーローは白から淡い色合いへのグラデーションにします。暗い背景にはしないでください。目標は「別のテーマ」ではなく、「より丁寧に仕上げた Clean」です。

Polished の基盤には、必ず design-context.md のカラーパレットを使用してください。新しいブランドカラーを独自に作らないでください。既存のパレットにグラデーション、奥行き、アニメーションを加えて、仕上げの質を高めます。Clean が「ワイヤーフレームに色を適用したもの」なら、Polished は「より丁寧に仕上げた Clean」です。

ルール：

• 白黒ワイヤーフレームとまったく同じレイアウト／構造にし、ビジュアル表現のみを変更します
• 各バリアントは、意図が明確で、それぞれ異なる美しさを備える必要があります
• design-taste.md の品質チェック（入れ替え、目を細めて確認、シグネチャー、トークンの各テスト）を適用します
• コンシューマー向け機能には Warmth & Approachability トークン、管理者向け／ダッシュボードには Precision & Density トークンを使用します
• design-taste.md のアンチパターンを避けてください
• Clean と Polished の両方で、必ず design-context.md のカラーパレットを使用してください。独自のブランドカラーは使用しないでください
• カラーバリアントに注釈マーカーを付けないでください。注釈は CSS クラスの切り替えで非表示になります 並列エージェントから結果が返るたびに、メインエージェントはユーザーに次のように報告します。 「✔ [Option Name] — Clean + Polished ready.」

5つすべてが戻ったら、すべて完了したことを確認します。

3f. ユーザーへの報告（2段階）

3f-i. ワイヤーフレーム作成後（カラーエージェントの起動前）：

生成された HTML ファイルを開きます：open wireframe/DDMM-<feature-name>/index.html

次に、ユーザーに以下を伝えます。

• 生成したオプションの数（安全策を重視したものが1つ、探索的なものが4つ）
• 推奨するオプションとその理由（1文）
• 各オプションの UX アプローチの簡潔な概要
• 最適化目標が指定されている場合、その目標に最も適したオプション
• フォルダーパス wireframe/DDMM-<feature-name>/

続いて、Step 3b-ii で保存したスコープに基づき、Phase 2 を開始するかどうかを判断します。

• スコープが wireframes+visuals の場合：次の注記を追加し、Step 3e に進みます。「カラーバリエーション（Clean + Polished）を生成中です。各オプションが完成するたびにお知らせします。」
• スコープが wireframes-only の場合：Phase 2 は完全にスキップします。ワイヤーフレームが最終成果物です。

3f-ii. 並列エージェントから結果が返るたび：

5つのエージェントがそれぞれ完了するたびに、進捗を報告します。

「✔ [Option Name] — Clean + Polished ready.」

3f-iii. 5つすべてのエージェントが戻った後：

ユーザーに最終結果を表示するため、HTML ファイルを再度開きます。

open wireframe/DDMM-<feature-name>/index.html

ユーザーに次のように伝えます。「5つすべてのオプションにカラーバリエーション（Clean + Polished）が追加されました。最終結果を表示するため、ページを再度開きました。」

注：ページの再読み込みを促す表現は使わないでください。CSS の自己表示機能と完了バナーによって、ページを再度開くと自動的に通知されます。

Step 4：デザインコンテキストの更新

ワイヤーフレームの生成後、その機能によって wireframe/brain/design-context.md に未記載の新しいパターンやページタイプが明らかになったか確認します。該当する場合は、適切なセクションに情報を追記します。

ルール

• **ペルソナ1（UX アーキテクト）**は、ワイヤーフレームの構造（レイアウト、コンテンツ階層、ナビゲーション、インタラクティブな動作）を担当します。
• **ペルソナ2（ビジュアルデザイナー）**は、カラーバリエーション（色、タイポグラフィ、スペーシングの調整、モーション）を担当します。レイアウトは変更しません。
• オプション1には design-context.md の既存パターンを使用します。オプション2～5では、それぞれ独自の UX 哲学を明確に表現します。
• ワイヤーフレームは機能する HTML でなければなりません。ワイヤーフレームのサブタブでは、白黒の制約を厳守します。
• 毎回 design-context.md と design-taste.md の両方を読みます。
• ページ全体ではなくコンポーネントをワイヤーフレーム化する場合は、利用可能な幅いっぱいに広がる単独要素として表示します。