コードより先に画像生成でデザインモックを作る。最初にスタイル案を4つ出させて選ぶ
画像生成モデルに「4つの異なるスタイル方向」を先に出させて1つ選び、モック画像を作ってから、それに合わせてコードを書かせる。
どんな問題を解決するか / いつ使うか
LPのヒーロー、アプリ画面、商品画像、ポスターなど。コーディングエージェントにいきなりUIを書かせると平凡になるとき。古いページのスクショを渡して作り直したいとき。
やり方
- スタイルが未定なら、まず互いにはっきり違うスタイル方向を4つ、各1文で出させ、選ぶまで生成させない。
- 選んだ方向で画像を生成。指示はテンプレート化する（再構成）：
用途: [何の画像で、どこに使うか] サイズ: [1536×1024 横 など]
参照: [画像1=レイアウト / 画像2=配色]（なければ削除）
スタイル: [写真 / イラスト / 3D / UIモック]
シーン: [背景・光・色・素材]
主役: [何を、どこに、どこまで見せるか]
テキスト: "[正確な文言]" を [位置] に。そのまま写す。ブランド名は1文字ずつ確認
制約: [必ず残すもの] / [避けるもの]- 生成後、エージェント自身に画像を開かせ、用途・参照・テキスト・制約を1項目ずつ照合して、外れている点を列挙させる。修正は1回に1か所だけ変え、他はそのままにする。
- デザインが確定したら、その画像をもとにページをコードで実装させる（Image to Code）。
注意点・対応状況
- 画像内の文字は崩れやすい。正確な文言を指定し、実装時はテキストをHTMLで組む。
- 投稿はCodexの画像生成をClaude Codeから呼ぶ構成だが、考え方はどの画像生成ツールでも使える。
出典
- 投稿者: @Voxyz_ai (Vox)
- 投稿: @Voxyz_ai · 2026-10-07
- 収集日: 2026-10-09（JST）