falconair/wireframes

ワイヤーフレーム

概要

UI提案は絵で示すべきであり、長い文章ではありません。各変更を低コストなワイヤーフレームで描きます：現状と提案を並べ、変更しない要素はグレーのバーで表現し、議論の対象となる要素だけに実際のラベルを付け、理由を1文添えます。アプリの実際の見た目は再現しません（ブランドカラー、実フォント、ピクセル精度なし）。ユーザーは変更を一目で理解でき、描画にかかるトークンもわずかです。

使用すべきでない場合： 変更が純粋なビジュアルスタイル（色、コントラスト、フォント、スペーシングトークン）の場合は、説明か実際のCSSで示します。またはユーザーがすでに決定して実装を依頼している場合は、そのまま実装します。レイアウト、コントロール、フローの変更がない場合も該当しません。

出力

プロジェクト内に、自己完結型のHTMLファイルを1つ作成します。以下の手順で構築します：

1. パス： docs/mockups/YYYY-MM-DD-<トピック>.html とし、モックアップをコードと一緒に保持しコミットできるようにします。プロジェクトがすでに別の mockups/ フォルダを使っている場合は、そちらを使用します。
2. head 部分： kit.html の <!doctype html> から </style></head><body> までをそのままコピーします。変更するのは <title> のみです。キットのクラスのみを使用します。インライン style はサイズとスペーシング（width、height、margin、.menu の位置）にのみ使用し、色には絶対に使用しません。
3. <h1> と1行の .lede を追加します。
4. 変更ごとに1セクション追加します：<h2>N · ユーザーの言葉での成果</h2>、続けて1つのレイアウト：

状況	レイアウト	ラベル
何かが存在し、変更すべき	.pair：Now（現状）、Proposed（提案）	.lbl.b 「Now: 問題点」 · .lbl.g 「Proposed: 変更内容」
修正案が未確定	.opts：2〜3の選択肢。存在するものがある場合は上部に小さな .solo のNow	.lbl.o 「A · 名前（推奨）」； .why 「+ 利点 · − 欠点」
まだ何も存在しない	.solo：Proposedのみ	.lbl.g；番号付き .n のコールアウトを .why で説明
1つの要素を状態や幅ごとに	.strip：状態ごとに1フレーム	.lbl 「空」「読み込み中」「エラー」「電話」…；ストリップの下に最大1つの .why

5. .pair の各サイド、および各選択肢には、ラベル（最大10語）、そのフレームまたはフレーム群、そして1つの .why 文を付けます。変更がシーケンス（メニュー、その後のトースト通知）の場合は、片側に2フレームを使用します。

kit.html を一度読んでください：CSSの下に各レイアウトの実例と全クラスのインデックスがあります。

描画ルール

• 判断に関わる場所だけに実際のテキストを配置： 変更するコントロール、そのすぐ隣の要素、およびアプリ名またはパンくずリストによる位置情報。それ以外は .box（テキスト行、width を設定）、.img（画像またはチャート）、またはグレーバーの .row にします。
• 変更する1つのコントロールをマーク： 現状の問題には .bad（赤色破線）、提案の変更や各選択肢を際立たせるものには .good（緑色実線）を付けます。.strip 内には何もマークしません。コントロールの輪郭を描き、全幅のバーやフレーム全体には決して使用しません（フレームは輪郭を端でクリップするため）。
• 不足しているもの： 属するべき場所に空の破線スロットを描きます（<span class="in bad">ここに検索なし</span>）。近くの要素に輪郭を付けないでください。
• 約800pxに収める： 各 .pair のカラムは約380pxなので、.bar は約5項目に抑えます。
• アプリの種類： Webまたはデスクトップ → .f；狭い画面またはネイティブモバイル → .phone；ターミナルUI → .f.mono.pad で実際のテキスト行と未変更の出力にはグレーバーを使用。
• 未解決の質問： 該当サイドの .why に、疑問文として記載します。
• 予算： ファイルあたり約15 KB以下。1.5 KBを超えるセクションは、誰も決定していないコンテンツを描画していることになるので、そのコンテンツをグレーバーに置き換えます。

表示前に確認する

スクリーンショットを撮れるブラウザツールが利用可能な場合は、ファイルを開いて確認します。Claudeデスクトップアプリでは、mcp__Claude_Browser__preview_start に url: file://<絶対パス> を指定し、次に mcp__Claude_Browser__computer でアクション screenshot を実行します。ブラウザがローカルファイルを拒否した場合は、そのページを未表示として扱います（下記参照）。各輪郭が意図した要素に配置されているか、クリッピングや折り返しがないか、オーバーレイが説明対象を隠していないかを確認します。修正したら、再度確認します。

スクリーンショットツールがない場合（CLI、ヘッドレス、サブエージェント）、マークアップを上記のチェック項目に照らして再読し、引き継ぎでページが未表示であることを伝えます。

引き継ぐ

チャットには以下のみを記述します：

• プロジェクトルートからの相対パスによるマークダウンリンクのファイル；
• セクションごとに1行：番号、タイトル、状態（「準備完了」「A/B/Cを選択」、または未解決の質問）；
• 必要な判断：それぞれ1文、あなたの選択と主な理由1つ。

図面とその .why 行に詳細とトレードオフが書かれているため、それらを再度説明する必要はありません。ユーザーの選択を待ってから構築します。ユーザーに尋ねられない場合（サブエージェント、ヘッドレス）、同じ3つの項目を返して停止します。

よくあるミス

ミス	正しい方法
すべての要素にラベルを付ける	判断に関わるものだけにラベルを付ける
アプリに合わせてスタイルを変更する	Kit CSSをそのまま使用、グレーバー
チャットで図ごとに段落を書く	リンク、セクションごとに1行、判断事項