Codex で「画像を作ってから UI を実装する」6ステップ（再現用プロンプトを書かせるのが肝）
UI 案を画像で4つ作り、選んだ画像をAIに分析させて「この UI を再現するためのプロンプト」を書かせ、元画像とそのプロンプトの両方を渡して実装させる。
投稿によれば、正しい手順を踏まないと4回中3回失敗する。特に3番目の「再現用プロンプトを書かせる」で再現性が上がる。
手順
- img-to-frontend スキルで、UI 生成用の詳しいプロンプトを作る
- UI 案を4つ画像で生成し、シンプルなものを選ぶ
- 選んだ画像を分析させ、その UI を作るためのプロンプトをAIに書かせる
- 元画像＋そのプロンプトで実装させる
- Codex App のブラウザで要素をクリックして、細かい修正を指示する
- ページを追加するときも、画像生成→同じ流れで広げる
注意点
- img-to-frontend スキルの入手先は投稿のリンク（短縮URL）経由。導入前に中身を確認する
- 画像どおりにならないときは、手順3のプロンプトを人が読んで、色・余白・フォントの指定が抜けていないかを見る
- 承認フローまで含めた進め方は UI は「画像モック→承認→Issue→並列実装」の順で作らせる も参照