wireframe

ワイヤーフレーム

異なる軸で3つ以上のバリエーションを検討する、低忠実度の探索です。横並びで表示するために design_canvas.jsx を使用します。

フェーズ 0 — コンテキストの事前確認（自動検出、質問は最大1つ）

バリエーションを検討する前に、コンテキストを黙って確認します。

1. .claude/design-tokens.json が存在する場合は Read .claude/design-tokens.json（ただし、ワイヤーフレームはグレースケールです。レイアウトのヒントにのみ使用します）
2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — ブランドフォルダーとの一致を確認
3. プロジェクトルートのコードベースにあるトークンを Glob で検索
4. ブリーフ内の github / Figma / image / .md 添付ファイルを確認 → 取り込みスキルを実行

何も見つからない場合は、AskUserQuestion を1つだけ実行します。選択肢は design system / codebase / screenshot / Figma / none / decide です。「を使用します。続行します。」と報告してから、いずれの場合もグレースケールで続行します（ワイヤーフレームは着色前の段階です）。

ルール

• 色は使わない — グレースケールのみ（グレー＋必要であればアクセントカラーを1色）
• どこにでもプレースホルダーを使用して、画像、アイコン、ラベルを表現します — 質の低いものを無理に作るより、プレースホルダーのほうが適切です
• 軸に変化をつける — レイアウト、インタラクションのメタファー、ビジュアル表現、密度、階層
• 保守的な案と新しい案を組み合わせる — 1つは「定石どおり」、もう1つは新しい方向性を探ります

ビルド

1. React + Babel + design_canvas.jsx を使用して artifacts/<slug>-wireframes.html を作成します
2. Bash(cp starters/design_canvas.jsx "$(dirname <html>)/") — HTML ファイルと同じ場所にコピーします
3. Shell：

   <DesignCanvas columns={3} label="Options for {{thing}}">
     <DesignCanvas.Cell label="Option A — classic">...</DesignCanvas.Cell>
     <DesignCanvas.Cell label="Option B — dense">...</DesignCanvas.Cell>
     <DesignCanvas.Cell label="Option C — novel">...</DesignCanvas.Cell>
   </DesignCanvas>
   

4. 破線の境界線（border: 1px dashed #999）を使い、プレースホルダーのコンテンツにはグレーボックスを使用します。実際の SVG ではなく、ブロック文字または [Image] ラベルを使用します。

検証と次のステップ

• /serve を実行します（design_canvas.jsx が外部ファイルのため必要です）。続けて /done http://127.0.0.1:4567/artifacts/<slug>-wireframes.html を実行します
• 修正 → Skill: verify-artifact を黙って実行します
• どの方向性を展開するかユーザーに尋ね、選択された案に対して /interactive-prototype を実行します