モックアップをHTMLにスライスする
モックアップを忠実にHTMLにコピーし、再設計しないでください。正しい結果は、モックアップに重ねてもほとんど差がありません。創造性、「改善」、および余分な機能はエラーと見なされます。
ワークフロー（順番に実行。先送りしないこと）
1. モックアップを受け取る
モックアップが実際に存在することを確認し（/mnt/user-data/uploads と会話をチェック）、存在しない場合はユーザーに依頼し、決して推測しないでください。多くのページ/フレームがある場合は、どれを構築するか尋ねてください。
サポートされる入力: PNG、SVG、Figma（MCP経由）（JPGはPNGとして扱われます）。その他の形式の場合は、ユーザーにPNGまたはSVGへのエクスポートを依頼してください。各入力の読み方は references/mockup-audit.md にあります。Figmaの場合は、get_design_context を呼び出す前に figma:figma-design-to-code スキルをロードしてください。
2. 2つの質問をする
監査前とコーディング前に、両方の質問を一緒にしてください。ユーザーが既に回答している質問はスキップしてください。可能な場合は ask_user_input_v0 を使用し（1回の呼び出しで2つの質問）、そうでなければ短いプレーンテキストで質問してください。
- 出力形式: 単一ファイル（HTML、CSS、JSを1つの
index.htmlにインラインで配置し、assets/を含む）または別ファイル（index.html、css/style.css、js/main.js、およびassets/を含む） - CSS: バニラCSS、Bootstrap（CDN経由）、またはTailwind（CDN経由）
回答後、references/output-structure.md と該当するファイル（references/vanilla.md、references/bootstrap.md、references/tailwind.md のうち1つ）を読み込んでください。残りの2つは読み込まないでください。
3. コーディング前に監査する
references/mockup-audit.md を読み込み、監査仕様（キャンバス、コンテナ、グリッド、色、フォント、間隔、半径、影、アセット、可視のインタラクション）を作成し、各値を実測または推定とマークしてください。決定が必要な場合（識別できないフォント、不足アセット）のみ、ユーザーに概要を表示し、それ以外は続行してください。
4. コードを書く
- ルール:
references/responsive-and-fidelity.md（ピクセルパーフェクトとレスポンシブ）、references/code-standards.md（セマンティックHTML、BEM）、references/anti-slop.md（禁止事項）。これらはコードを書きながら適用し、後から適用しないでください。 - モックアップ幅での値は、監査の値と正確に一致する必要があります（px単位、フレームワークのスケールに丸めない）。
- JavaScriptは、モックアップに表示されているインタラクティブコンポーネントにのみ使用し、
anti-slop.mdのコンテンツテストに従ってください（必要なコンテンツがモックアップにある場合は動作を構築し、それ以外は静的のままにして報告）。選択したフレームワークが必要とする以外の追加ライブラリは含めないでください。
5. 検証する
references/responsive-and-fidelity.md の検証手順に従い、その後 references/anti-slop.md の最終チェックを実行してください。サンドボックスがレンダリングできない場合は、その旨を率直に伝えてください。
6. 納品する
/mnt/user-data/outputs/ に保存し、present_files で共有してください。複数ファイルの場合は、フォルダ構造を維持した単一の .zip ファイルにパッケージ化し（アセットパスが有効なまま）、さらに index.html も提示してください。
その後、最大6行程度のレポートを、ユーザーが知る必要があることのみを伝えてください。未識別のフォントとその代替、推定値、プレースホルダーアセット、再現できなかった、またはサイズ予算を超過したアイコン、構築された、またはコンテンツ不足で静的のままにされたインタラクティブ動作、モックアップにないために導出されたタブレット/モバイル部分。機能提案、改善アイデア、自己賛辞は一切含めないでください。
基本原則
- 忠実度が最優先。 モックアップが弱く見えても、そのままコピーしてください。
- モックアップにないものを追加しない。 黙って推測しない。視覚的影響のあるすべての仮定はレポートに含めてください。
- テキストは正確にコピーする。 大文字小文字、句読点、数字を含みます。読みにくいテキストはフラグを立ててください。