imagine-it は何をしますか？
仕様を元に推測的なモックアップを生成します。これは、このプロダクトにおける機能がどのように見えるかを示す、簡素な.htmlファイル群です。コードではなく、人間が反応するための会話のきっかけとなるものであり、速度と説得力が完全性よりも優先されます。
入力（すべてオプション、順不同）：Issue/PRのURLまたは#123、JiraキーまたはURL、ファイルパス、自由テキスト、さらにフラグ：
--wireframe— リポジトリのルックを無視して、グレースケールのワイヤーフレームを強制します。--out <dir>— 出力ルート（デフォルトはリポジトリルートの.imagine-it/）。出力は常に<out>/<slug>/に格納されます。--screens <n>— 画面ファイルの数を制限または指定します。--screenshot[=png|jpeg]— 画面の画像もキャプチャします（デフォルトはPNG）。--states— スクリーンショットを撮るとき、初期状態だけでなく全ての状態をキャプチャします。--viewport <WxH>— キャプチャサイズ（デフォルトは1440x900、モバイルファーストのプロダクトでは390x844）。--notes— 仕様ノートのオーバーレイを表示した状態でキャプチャします（デフォルトはオフ）。
入力がない場合、仕様は現在の会話の内容になります。
ワークフロー
以下の手順を順に実行します。各手順は次の手順で消費される成果物を生成するため、作業メモに保持しておいてください。ディスクに書き込まれるのはHTMLのみです。
1. 仕様の解析（Spec Digest）
仕様を取得し、Spec Digestに要約します。タイトル、スラッグ、ゴール、アクター、エントリーポイント、主要フロー、現実的なサンプル値を持つエンティティ、状態、AC-1…という番号が付けられた受け入れ基準、スコープ外、前提条件、未解決の質問を含めます。
埋めたすべてのギャップは前提条件となります。人間だけが決定できるものは未解決の質問となります。先に進んでください — ユーザーに質問するのは、どこにも仕様が存在しない場合（引数なし、会話に何もない場合）のみです。
完了条件：すべてのDigestフィールドが埋められている（または明示的に「なし」）、すべてのACに番号が付いている。 詳細、ソース別の取得方法、例については、references/context-intake.md を参照してください。
2. デザインブリーフ（Design Brief）
リポジトリを読み取り専用でスイープし、Design Briefを作成します。モード（ハイファイまたはワイヤーフレーム）、技術スタック、正規の変数名を使用したコピー&ペースト可能な:rootトークンブロック、ダークモード、アプリケーションシェル、コンポーネントノート、機能に最も近い1〜3つの参照画面、アイコンスタイル、UIロケール、およびすべての情報のソースファイルを含めます。
環境がサブエージェントをサポートしている場合は、このスイープをサブエージェントに委任してブリーフのみを受け取ってください。そうでない場合は、同じ読み取り予算内でスイープをインラインで実行してください。--wireframeが指定された場合、またはリポジトリに模倣すべきUIがない場合は、モードはワイヤーフレームになります。その理由をブリーフに記載してください。その後、見つかった実際のルート/ラベルでDigestのエントリーポイントを更新します。
完了条件：トークンブロックがすべての正規の変数名を使用している（ワイヤーフレームの場合はトークン = none）、各トークングループがソースファイルを引用している。 スタック検出マトリックス、トークンの隠れ場所、正規名については、references/design-discovery.md を参照してください。
3. 画面計画（Screen Plan）
HTMLを作成する前にファイルを決定します。# | ファイル | 目的 | 状態 | 対応AC のテーブルをフロー順に並べます。1ファイルにつき1つの異なるビュー、またはコンテンツの多いオーバーレイ。状態（空、ローディング、エラー、成功など）は、その画面内のセクションとして配置します。必要な数だけ、可能な限り少なく — 通常は2〜6つです。
完了条件：すべてのACが少なくとも1つの行の「対応AC」列に表示されている。 ルールと例については、references/screen-planning.md を参照してください。
4. 生成（Generate）
<out>/<slug>/ に書き込みます：
index.html ハブ：Digestの要約、フロー、ACカバレッジ、前提条件、未解決の質問、デザインソース
styles.css デザインブリーフのトークン + assets/base.css をそのまま + 機能コンポーネントのスタイル
ii.js assets/ii.js をそのままコピー（モックアップツールバー：ナビゲーション、ノート、状態、テーマ）
01-<screen>.html 画面計画の各行に対応
02-<screen>.html
assets/index-template.html と assets/screen-template.html から開始します。このスキルフォルダから assets/base.css と assets/ii.js をコピーします。参照画面を模倣します。同じシェル、ナビゲーションラベル、コンポーネント形状、コピートーンを、リポジトリのUI言語で表現します。現実的なドメインデータで埋めます。ACを満たす各要素に data-note="AC-n: …" を、推測的なデザイン選択には data-note="NOTE: …" をマークします。
出力は自己完結型のプレーンHTML/CSSで、ごく小さなバニラJSを使用し、ディスクから直接開きます。相対リンクのみ、インラインSVGアイコン、リポジトリのフォントのシステムフォントフォールバック。 完全な出力契約と配信前チェックリストについては、references/html-conventions.md を参照してください。
5. 検証（Verify）
references/html-conventions.md の配信前チェックリストを実行します。すべてのチェック項目に合格したら完了です。そうでない場合は修正して再チェックします。
6. キャプチャ（--screenshot がある場合のみ）
スクリーンショットフラグがない場合は完全にスキップされます。それ以外の場合は、計画された画面（および最後にハブ）を <out>/<slug>/screenshots/ の画像としてレンダリングし、index.html にスクリーンショットセクションを追加します。キャプチャの問題で実行がブロックされることはありません。
完了条件：計画されたすべての画像が存在し、空でなく、正しいマジックバイトを持ち、最初の画像が表示されている。スキップされたショットは手動コマンドとともに報告されます。 フラグ、ライト/ダーク、命名、ツールラダー、フォールバックについては、references/screenshots.md を参照してください。
7. ハンドオフ（Hand off）
以下を応答します：index.html へのパス、画面計画テーブル、スクリーンショットパス（スキップされたショットとその手動コマンドも含む）、前提条件と未解決の質問、そしてそれを開くための提案（Windowsでは start、macOSでは open、Linuxでは xdg-open）。<out> がリポジトリ内にあり、まだ無視リストに追加されていない場合は、.gitignore への追加を提案します。
フォローアップ：<out>/<slug>/index.html（前提条件、デザインソース）と styles.css からコンテキストを再構築します。リポジトリの再スイープは行いません。スラッグは維持します。index.html をそれに合わせて更新します。ステップ5を再実行します（そして、スクリーンショットが存在していた場合は、影響を受ける画面とハブを再キャプチャします）。