2026.05.01
Codex で「画像作成 → UI 実装」を行う際の 6ステップ
Codex を使って「画像作成 → UI 実装」を進める際の Tips が勉強になりました。img-to-frontend スキルと、AI に再現用プロンプトを書かせるステップを軸にした 6 ステップの流れを紹介します。
Codex で「画像作成 → UI 実装」を行う際の Tips が勉強になったので、シェアします。
画像作成 → UI 実装 を行う際の 6ステップ
- img-to-frontend スキルで詳細プロンプト作成
- UI 案を 4 つ生成 → シンプルなものを選ぶ
- 画像を分析させて「再現用プロンプト」を AI に書かせる
- 元画像 + プロンプトで実装
- Codex App 内でブラウザで要素クリックして修正
- ページ追加・画像生成で拡張
特に Step 3 が重要で、AI に「UI を作るプロンプト」を書かせることで再現性が上がるとのことです。
また「正しい戦略なしだと 4 回中 3 回失敗する」とのことで、上記のステップを回すことが大切だと感じました。
img-to-frontend スキルは、下記のサイトからインストールできます。
https://codex-marketplace.com/plugins/am-will-codex-skills-img-to-frontend
元々参考にしていた X の投稿はこちらです。