ガイド：画像生成からUI・LPを作る
画像生成AI（GPT Image / Nano Banana など）でデザインを先に作り、コーディングエージェントや Claude Design で実装に落とすまでの流れです。
1. 方向性を決める
- 最初にスタイル案を4つ出させて選び、モック画像を作ってからコードにする コードより先に画像生成でデザインモックを作る。最初にスタイル案を4つ出させて選ぶ
- テーマを差し替えるだけで、デザインシステムボードを1枚で作るプロンプト 画像生成で「デザインシステムボード」を作るプロンプト（テーマだけ差し替える）
- 動画・広告は、ワイヤーフレームで構成を固めてから色を付ける 広告動画はワイヤーフレームで構成とタイミングを固めてから、DESIGN.mdで色を付ける
2. 画像から実装へ
- 画像を分析させて「再現用プロンプト」を書かせてから実装させる（6ステップ） 画像→UI実装では、画像をAIに分析させて「再現用プロンプト」を書かせてから実装させる
- 素材を正方形グリッドで別に出力→切り抜き・透過→デザイン画像と一緒に渡して再現させる LP画像から素材だけを正方形グリッドで別出力→切り抜き・透過→全アセットと一緒に渡して忠実に再現させる
- 切り抜く前提の素材はグリーンバック・白フチなし・影なしで生成する 切り抜き前提の画像はグリーンバックで生成し、白フチ・ドロップシャドウは付けない
3. デザインツールと実装の受け渡し
- Claude Design → Claude Code は「実際に動くアプリとして作って」と指示する。/design-sync で同期する Claude DesignからClaude Codeに渡すときは「再現して」ではなく「実際に動くアプリとして作って」と指示する
- 実装とFigmaを行き来して赤入れする AIで作ったLP・実装をFigmaのデザインデータに戻し、Figma上で赤入れ・編集する
4. 仕上げ
- 実装後はスクショで自己チェックさせる エージェントにUI変更のたびにスクショで自己チェックさせる（デザイン→実装→スクショ→レビュー→修正のループ）
- 承認したモックと文章の仕様をIssueに固定してから実装させる（正本は文章、画像は補助） 画像モックを承認してから「文章の仕様」と一緒にIssueへ固定し、エージェントに並列で実装させる
- 広告・サムネは人物・背景を画像、文字・位置・余白をHTMLに分ける AIで作る広告・サムネは「人物・背景は画像、文字・位置・余白はHTML」に分けて、文字だけ直せるようにする