image-to-code

画像からコードへ

視覚的なターゲット画像を、高品質でインタラクティブなウェブサイトまたはウェブアプリに変換します。

重要な上書き指示

• 作業を始める前に、プラグインルーター $index を参照してください。
• $critical-overrides に従ってください。

ユーザーコンテキスト

作業を始める前に、$user-context を読み込み、ローカルシェルを利用できる場合はそのプリフライトスクリプトを実行してください。

保存済みの製品 URL、Figma ファイル、スクリーンショット、参考画像、コードベースのパス、Storybook、トークン、デザインシステム、ブランド素材、コンポーネントの参照資料、ブラウザー設定、共有先を、関連する場合は根拠として活用してください。

保存されている参考資料をすべて確認する必要はありません。現在のタスクに必要なものだけを確認してください。

[IMPORTANT] ChatGPT Work Mode でのプロトタイプのプレビュー

sites-preview の起動は検証ではありません。検証では、クラウドブラウザーで http://terminal.local:4173/ を開き、表示されたページを確認し、主要なインタラクションをテストし、ブラウザーのコンソールエラーを確認して、デザイン QA に合格する必要があります。

HTTP ヘルスチェック、ビルドの成功、プレビューサービスのステータス、デプロイの成功を、ブラウザーでの検証の代わりにしてはいけません。クラウドブラウザーを使用できない場合は、検証がブロックされていると報告してください。

ChatGPT Work Mode でローカルプロトタイプの検証とデザイン QA を行うには、次の手順に従ってください。

1. 必要に応じて依存関係をインストールしてください。プロジェクトには npm の dev スクリプトが必要です。
2. sites-preview は npm run dev -- --host 0.0.0.0 --port 4173 --strictPort を実行します。dev スクリプトはこれらのフラグを受け付ける必要があります。
3. Vite または Vinext のプロジェクトでは、"dev": "vite" を使用してください。vinext dev は使用しないでください。Vite の server.host: "0.0.0.0" と server.allowedHosts: ["terminal.local"] を設定してください。
4. サイトのルートディレクトリから、sites-preview start "$PWD" を実行してください。
5. クラウドブラウザーで http://terminal.local:4173/ を開いてください。localhost、127.0.0.1、0.0.0.0、HTTPS、または別のポートは使用しないでください。
6. 完了を報告する前に、表示されたサイトと主要なインタラクションを検証してください。
7. terminal.local への言及や、その URL のユーザーへの出力は絶対にしないでください。@Sites でチェックポイントをデプロイし、デプロイされたチェックポイントの URL のみをユーザーに伝えてください。

モバイルプロトタイプ

モバイルアプリまたはスマートフォンのプロトタイプでは、ユーザーがデバイスを指定していない限り、390 × 844 で構築して検証してください。スターターの .mobile-prototype ラッパーを使用してください。アプリのシェルに min-height: 100vh を使用しないでください。アプリの表示領域は 390 × 844 のフレーム内に収めてください。すべての画面は、横スクロール、テキストやコントロールのはみ出し、主要な操作が画面外に出ることなく、幅 390px に収まる必要があります。

ワークフロー

重要：これはガイダンスではありません。完了すべきチェックリストです。

1. 再現するための画像、スクリーンショット、モックアップ、または Image Gen の結果が選択されていない場合は、作業を開始しないでください。文章による概要だけでは不十分です。

2. 実装に着手する前に、選択されたビジュアルの対象を正確に特定してください。

   • ユーザーが番号付きの $ideate の候補を選択した場合は、直近のアイデア生成セットで表示された画像結果のうち、N 番目のものを使用してください。元のコンセプト計画順や Image Gen のプロンプト送信順は使用しないでください。
   • $ideate のコンセプト名リストを使用できるのは、表示された画像の順序と同じ順序で明示的に記載されている場合に限ります。
   • 生成画像の結果 ID、選択された画像の添付ファイル、スクリーンショット、モックアップ、または Figma フレームは、単独の番号指定よりも優先度が高い参照情報です。利用できる場合は、その正確な参照を優先してください。
   • 選択された結果を明確に特定できない場合は、実装に着手せず、ユーザーにコンセプト名を指定するか、画像を再添付または選択するよう依頼してください。近い候補を推測して実装してはいけません。

3. 特定した画像を、再現するデザインとして扱ってください。

4. 提供されたデザインがモバイルのビューポートであれば、モバイルアプリを作成してください。判断できない場合は、デスクトップを既定としてください。

5. 参照デザインを確認し、デザイン内のすべての画像アセットを一覧にしたうえで、Image Gen ツールを使ってそれぞれ個別に画像を作成してください。生成が必要なアセットをすべて見つけられるよう、拡大して確認してください。

   例：

   • ヒーロー画像（全面に広がる画像背景を含む）
   • 注目記事の画像
   • サムネイル
   • 装飾用イラスト
   • テクスチャや背景のモチーフ
   • ロゴ
   • 製品画像
   • アバター

   ルール：

   • 重要なルール：実際のアイコンや画像アセットの代わりに、カスタム div アート、CSS アート、インライン SVG、手作りの SVG、HTML 要素による描画、div/span の図形、CSS による描画、グラデーション、絵文字、テキストグリフを決して作成しないでください。画像には組み込みの Image Gen ツールを、アイコンには最も近いアイコンライブラリを使用してください。
   • テキストが画像アセットの一部である場合は、そのテキストを画像アセット内に含めてください。全面に広がるヒーロー画像、看板、ポスター、パッケージ、店舗、記事用アート、文字がビジュアルの一部として含まれるイラストなどが該当します。参照元に、画像の上に配置された編集可能な UI テキストが明確に示されている場合を除き、背景画像を切り抜き、そのテキストを透明なテキストボックス、HTML、CSS、または別のオーバーレイレイヤーで再現してはいけません。
   • 参照元が独自のビジュアルコンテンツを示している場合、汎用的なプレースホルダーを使用しないでください。
   • 生成するアセットは、参照モックアップと同じアートディレクション、配色、描画スタイル、デザイン言語に統一してください。
   • 組み込みの Image Gen ツールは透明画像に対応していません。透明画像が必要な場合は、生成後にアセットを後処理してください。

アセット制作の並行作業

参照アセットの一覧作成と計測が完了したら、メインエージェントがアプリの構造を構築する間に、最大3つのアセットサブエージェントを起動します。

各サブエージェントには、一度に1つのラスターアセットのタスクを割り当てます。参照用の切り抜き画像、正確な寸法、焦点位置、スタイル、出力先パス、使用するコンポーネントを伝えてください。アセットサブエージェントは、アセットを生成、確認、保存し、アセットのパスのみを報告します。ソースコードの編集、ブラウザーの実行、デプロイは禁止です。

まずファーストビューに不可欠なアセットを優先し、その後、エージェントを再利用して補助アセットを制作します。標準的な UI アイコンや提供済みのブランドロゴは委任しないでください。

6. ページのすべてのセクションを定義します。各セクションのレイアウト、要素間の間隔、要素自体のサイズと余白を細かく計測してください。

7. ターゲットデザインに合う、無料で利用できるフォントを探します。

8. ターゲットデザインに合う、無料で利用できるアイコンライブラリを探します。安易に Lucide アイコンを選ばず、最適な候補を探してください。

   ルール：

   • 重要なルール：カスタムのインライン SVG、手作業で作成した SVG、HTML 要素の描画、div/span の図形、CSS による描画、グラデーション、絵文字、テキストの字形は作成しないでください。組み込みの Image Gen ツールを使ってアセットを生成し、アイコンには最も近いアイコンライブラリを使用してください。

9. local-prototype-preflight からアプリの構築を開始します。ユーザーから静的なモック、完全な本番動作、または異なる範囲の指定がない限り、以下を備えたアプリまたはウェブサイトを構築してください。

   • ナビゲーション、リンク、タブ、メニュー、主要な CTA が機能すること。
   • メインの体験に表示される入力欄、フィルター、切り替え、選択、フォームが機能すること。
   • 該当する場合、ホバー、フォーカス、選択、開閉、読み込み、空の状態、成功などの UI 状態が表示されること。
   • 製品に主要なタスク、コンバージョン経路、またはユーザージャーニーがある場合、最初から最後まで機能すること。

   コア体験以外のコントロールは、見た目だけでもかまいません。依頼がない限り、認証、永続化、バックエンド/API 呼び出し、インテグレーション、網羅的なエッジケース対応は実装しないでください。

   ルール：

   • 生成した画像アセットはすべて、作業を続ける前に所定の位置へ配置してください。繰り返しますが、CSS/SVG のプレースホルダーも含め、プレースホルダーはすべて作業を続ける前に置き換えてください。
   • コア体験のコントロールを静的な装飾にしないでください。ユーザーから依頼されない限り、新しいページやルートは作成しないでください。

10. ローカルアプリを実行します。

11. $index の Browser Choice ルールに従って、ローカルアプリをキャプチャします。

12. design-qa をビルドをブロックするゲートとして実行します。

    手順：

    • QA レポートを書く前に、参照画像と最新のプロトタイプのスクリーンショットを開きます。
    • 同じビューポート、同じインタラクション状態で比較します。一致しない場合は、まず不足している画面をキャプチャしてください。
    • QA レポートをプロジェクトのルートに design-qa.md として保存します。
    • P0/P1/P2 の問題を修正し、アプリを再度キャプチャして、QA レポートに final result: passed と記載されるまで繰り返します。
    • P3 の磨き込みを続けないでください。残っている P3 は、今後の改善メモとして記載します。
    • ソースのキャプチャ、プロトタイプのキャプチャ、または視覚的な比較ができない場合は、そこで中止します。design-qa.md には final result: blocked と記載してください。
    • design-qa.md が存在し、final result: passed と記載されていない限り、引き渡さないでください。

13. アプリまたはウェブサイトを引き渡します。

    • design-qa に合格してから引き渡してください。
    • プロトタイプはローカルで実行したままにしてください。
    • Codex Desktop では、クリック可能なローカル URL を提示します。ChatGPT Work Mode では、@Sites を使ってチェックポイントをデプロイし、デプロイ先の URL のみを提示してください。terminal.local は決して出力しないでください。
    • プロトタイプのリンクの後に、critical-overrides.md にある共通のビルド引き継ぎ文を使用してください。別の完了メッセージを追加しないでください。
    • critical-overrides にある、ビルド後の改善と共有の促しを含めてください。