既存ページは「imagegenで再想像してから実装して」の一言で見た目を上げる
Codex に Images 2.6 が入った前提で、いまの画面をそのまま直させず、まず画像生成でページを再想像させ、その画像を正に実装させる。Claude Code だけでも Codex 経由や API で同じ流れにできる。
どんな問題を解決するか / いつ使うか
コーディングエージェントにUIを直させても平凡なままのとき。すでにページやスクショがあり、レイアウト案を画像で先に固めたいとき。
やり方
- 対象のページ（またはスクショ）を渡す。
- 次の一文を送る（英語のままでも可）：
Use imagegen to reimagine this page, then implement it. - 生成画像を見て方向がよければ、その見た目に合わせて実装させる。方向が違うなら画像側を直してからコードに進む。
- Claude Code のみの場合は、Opus などから
codex execで画像生成させるか、Images API を直接呼ぶ。まとめて量産するならprompts.txtの1行1プロンプトで PNG を書き出すスクリプトをエージェントに書かせる（モデル名・課金・組織のクレジット確認は環境に合わせる）。
ゼロから作るときは、先にスタイル案を4つ出させる コードより先に画像生成でデザインモックを作る。最初にスタイル案を4つ出させて選ぶ の方が向く。こちらは「既存を再想像する」短い指示。
注意点
- 画像内の文字は崩れやすい。実装では文言をHTML側で組む。
- 画像モデル名やクレジットの話は投稿時点のもの。手順の核は「先に見た目の正解画像 → あとから実装」。