>
核心原则：为什么要先出图
用 Codex 写界面，没有图，就像让人画画但不告诉他画什么——能动笔，但结果全靠运气。
做视频也一样。「深色调、有科技感、简洁大气」AI 能理解这些词，但落到实际画面，十次有七次不是你想要的。
所以： 结合生图软件，先生成一张预览图，AI 就有了可视化的参考。从「帮我做一个有科技感的场景」变成「按照这张图的布局、颜色、层级，复刻成动画」。
视觉目标从模糊变成可执行。这一步，是整个工作流能跑通的原因。
Step 1：构思脚本和分镜
每个场景确认四件事：
不需要任何工具，写文档就行。几个场景，就写几份分镜描述，这是之后所有东西的地基。
Step 2：用 GPT-Image-2 生成分镜预览图
每个场景写一份图片 Prompt。根据场景类型选用不同的 Prompt 模板：
模板 A：精确布局型（数据看板 / UI 截图）
适用于 UI、数据可视化、工具界面等需要精确控制元素位置和层级的场景。
A [界面类型] in 16:9 landscape format, [色调]. [主要元素，精确到位置、层级、数字、颜色] Floating annotation card · [位置] · semi-transparent dark background + white border · large: "[主标注]" / small: "[副标注]" Overall tone: [情绪基调，如 clinical and quietly wasteful]
实战示例（数据看板场景）：
A clean dark analytics dashboard in 16:9 landscape format. Left: large donut chart, 68% muted red "Answered in docs", 32% dark gray. Right: "4.2 hrs" in large white text, label "avg. weekly support time per user · same questions". Minimal grid lines, no decorative elements. Floating annotation card lower-right · semi-transparent dark background + white border · large: "68%" / small: "of tickets · already in the docs". Overall tone: clinical and quietly wasteful.
模板 B：人物插图型（透明背景，叠在代码 UI 上方）
A [halftone / editorial illustration] character, [posture/expression]. Warm color palette: ivory, soft purple, warm white. Transparent background preferred. No background objects, no text, no UI elements. Minimum 1024px tall. Style: product editorial illustration, not photo-realistic. Avoid: dark tones, heavy shadows, corporate clipart.
模板 C：背景纹理型（铺在 UI 下层用）
A 16:9 paper grain background texture, [warm ivory / cool white]. Extremely subtle — this will be covered by UI layers above it. No patterns, no icons, no text, no focal point. 1920×1080. Zero distracting elements.
Step 3：把预览图交给 Codex
前置拆层
给图之前，先把场景拆成两层：
| 层 | 内容 | 实现方式 |
|---|---|---|
| 代码层 | 文字、数字、卡片、气泡、按钮、所有动效 | 代码里重建，不依赖图片 |
| 图片层 | 背景纹理、人物插图 | 静态资源 import 进来，代码不负责生成 |
这层分工要写进 Codex 的 prompt 里：
>
Codex Prompt 结构
先不要写代码，先做三件事： 1. 分析图片的布局结构和视觉层级 2. 列出需要哪些主要组件 3. 确认动效执行顺序 然后： - 先实现静态布局，还原颜色、字号、间距、圆角 - 再按以下动效顺序加入动画：[你在分镜里写的动效描述] - 使用 [你的技术栈，如 React + Tailwind + CSS keyframes] - 只做这一个场景，不要碰其他文件
Step 4：对照预览图检查，逐场景微调
每个场景单独跑，对照原图。有偏差就说具体的：
Step 5：浏览器录屏，交付
四个场景全跑通之后，浏览器直接预览，系统自带录屏。
不需要 After Effects，不需要 Premiere，不需要任何视频软件。
美化一下然后配个 BGM，就完成了。推荐结合 @FocuSeeHQ 录屏工具效果更好。
这个工作流适合谁
核心心法： 先确认视觉，再执行工程。把两个判断拆开，效率会更高。
>
>
核心理念：なぜ先に画像を生成するのか
Codex でインターフェースを書く際、画像がないというのは、絵を描くように頼むのに何を描くべきかを伝えないのと同じです——描くことはできても、結果は運任せになります。
動画でも同じです。「ダークトーンで、テクノロジー感があり、シンプルで洗練された」——AI はこれらの言葉を理解できますが、実際の画面に落とし込むと、10回中7回は望んだものになりません。
そこで： 画像生成ツールと組み合わせて、先にプレビュー画像を生成すれば、AI は視覚的な参照を得られます。「テクノロジー感のあるシーンを作って」という曖昧な指示から、「この画像のレイアウト、色、階層に従ってアニメーションとして再現して」という明確な指示に変わります。
視覚的な目標が曖昧から実行可能へと変わります。この一段階こそが、このワークフローが機能する理由です。
Step 1：脚本と絵コンテの構想
各シーンで4つのことを確認します：
特別なツールは必要ありません。ドキュメントを書くだけで十分です。シーンの数だけ絵コンテの説明を書き、それがすべての土台となります。
Step 2：GPT-Image-2 で絵コンテのプレビュー画像を生成
各シーンごとに画像プロンプトを作成します。シーンの種類に応じて異なるプロンプトテンプレートを使用します：
テンプレート A：精密レイアウト型（データダッシュボード / UI スクリーンショット）
UI、データ可視化、ツールインターフェースなど、要素の位置と階層を精密に制御する必要があるシーンに適しています。
A [界面类型] in 16:9 landscape format, [色调]. [主要元素，精确到位置、层级、数字、颜色] Floating annotation card · [位置] · semi-transparent dark background + white border · large: "[主标注]" / small: "[副标注]" Overall tone: [情绪基调，如 clinical and quietly wasteful]
実戦例（データダッシュボードシーン）：
A clean dark analytics dashboard in 16:9 landscape format. Left: large donut chart, 68% muted red "Answered in docs", 32% dark gray. Right: "4.2 hrs" in large white text, label "avg. weekly support time per user · same questions". Minimal grid lines, no decorative elements. Floating annotation card lower-right · semi-transparent dark background + white border · large: "68%" / small: "of tickets · already in the docs". Overall tone: clinical and quietly wasteful.
テンプレート B：人物イラスト型（透明背景、コード UI の上に重ねる）
A [halftone / editorial illustration] character, [posture/expression]. Warm color palette: ivory, soft purple, warm white. Transparent background preferred. No background objects, no text, no UI elements. Minimum 1024px tall. Style: product editorial illustration, not photo-realistic. Avoid: dark tones, heavy shadows, corporate clipart.
テンプレート C：背景テクスチャ型（UI の下層に敷く）
A 16:9 paper grain background texture, [warm ivory / cool white]. Extremely subtle — this will be covered by UI layers above it. No patterns, no icons, no text, no focal point. 1920×1080. Zero distracting elements.
Step 3：プレビュー画像を Codex に渡す
事前のレイヤー分解
画像を渡す前に、シーンを2つのレイヤーに分解します：
| レイヤー | 内容 | 実装方法 |
|---|---|---|
| コードレイヤー | テキスト、数字、カード、吹き出し、ボタン、すべての動効果 | コード内で再構築、画像に依存しない |
| 画像レイヤー | 背景テクスチャ、人物イラスト | 静的リソースとして import、コードは生成しない |
この役割分担はCodex のプロンプトに明記する必要があります：
>
Codex プロンプトの構造
先不要写代码，先做三件事： 1. 分析图片的布局结构和视觉层级 2. 列出需要哪些主要组件 3. 确认动效执行顺序 然后： - 先实现静态布局，还原颜色、字号、间距、圆角 - 再按以下动效顺序加入动画：[你在分镜里写的动效描述] - 使用 [你的技术栈，如 React + Tailwind + CSS keyframes] - 只做这一个场景，不要碰其他文件
Step 4：プレビュー画像と照らし合わせて、シーンごとに微調整
各シーンを個別に実行し、元の画像と照らし合わせます。ズレがあれば具体的に伝えます：
Step 5：ブラウザで画面収録して納品
4つのシーンすべてが問題なく動作したら、ブラウザでプレビューし、OS 標準の画面収録ツールで録画します。
After Effects も Premiere も、任何の動画ソフトも必要ありません。
美化して BGM を追加すれば完了です。@FocuSeeHQ の画面収録ツールと組み合わせるとさらに効果的です。
このワークフローに向いている人
核心の心得： まずビジュアルを確定し、それからエンジニアリングを実行する。この二つの判断を分離することで、効率が格段に向上します。
>