テック技報最新号へ →
デザイン

画像→UI実装では、画像をAIに分析させて「再現用プロンプト」を書かせてから実装させる

デザイン画像をそのまま「これを作って」と渡すのではなく、まず画像を分析させてUIを作るための詳しいプロンプトを書かせ、元画像とそのプロンプトをセットで渡して実装させる。

@suna_gaku · 投稿 2026-05-01
#AIデザイン#画像生成#Image#Codex#LP

どんな問題を解決するか / いつ使うか

Codex / Claude Code で、生成した画像やデザインカンプからLP・アプリ画面を作るとき。

やり方

6ステップ（@suna_gaku が紹介した手順）：

  1. 画像生成用の詳しいプロンプトを作る（img-to-frontend スキルなど）。
  2. UI案を4つ生成し、シンプルなものを選ぶ（凝りすぎた案は実装で崩れやすい）。
  3. 選んだ画像を分析させ、「この画面を再現するためのプロンプト」をAIに書かせる ← 最重要。
  4. 元画像＋再現用プロンプトで実装させる。
  5. ブラウザで要素をクリックして修正する（Codex App のブラウザ機能など）。
  6. ページの追加や画像の追加生成で広げる。

名刺のように小さい制作物でも同じ考え方が使える：先に画像生成でいろいろなデザイン案を出し、選んだもののアセットや文字だけを直させるほうが、ゼロからコードで作らせるより完成度が高い（@gosrum）。

注意点・対応状況

  • 「正しい手順なしだと4回中3回失敗する」は投稿者の体感値。
  • 画像内の文字はそのまま使わず、実装時にHTMLのテキストで組み直す。

出典

X の元の投稿を開く