这套工作流做出来的，是四个动画场景：Discord 群聊洪流、数据看板、分屏对比、产品出场。每个场景都有入场动效和标注卡片。听起来很复杂，但拆开看，逻辑非常朴素。
为什么非要先出图？
直接让 Codex 写界面，没有图，会怎么样？
就像让一个人画画，但不告诉他画什么——他能动笔，但结果全靠运气。
做视频也一样。你跟 AI 说「深色调、有科技感、简洁大气」，它能理解这些词，但落到实际画面，十次有七次不是你想要的。
那怎么办？先生成一张预览图，AI 就有了可视化的参考，比文字更直观。任务从「帮我做一个有科技感的场景」，变成「按照这张图的布局、颜色、层级，复刻成动画」。
视觉目标从模糊变成可执行。这一步，是整个工作流能跑通的原因。
Step 1：写分镜
每个场景，先在文档里把四件事确认清楚：
- 画面里有什么（元素、位置、数字）
- 情绪基调（紧张感、讽刺感、转折感）
- 需要出现哪些文字和标注卡
- 动效的出现顺序
不需要任何工具，纯写文档。几个场景，就写几份分镜描述。这是之后所有东西的地基——地基不稳，后面用什么模型都救不回来。
Step 2：用 GPT-Image-2 生成分镜预览图
每个场景写一份图片 Prompt。每张图只问一件事：这个视觉方向对不对？ 对了，才进下一步。
不同类型的场景，Prompt 格式不一样：
- 数据看板和 UI 截图类：用「精确布局型 Prompt」，把每个区块的位置、颜色、数字都写清楚
- 人物插图型：要求透明背景，方便后面叠在代码 UI 上方
- 背景纹理型：铺在 UI 下层使用，不要有具体内容
这里有一条原则要记住：纹理和插图用生图解决，文字、数字、布局、动效全在代码里重建。两件事不要混。
为什么？因为 AI 生图对文字处理很不可靠，但代码渲染文字精确到像素。让擅长的工具做擅长的事。
Step 3：把预览图交给 Codex
给图之前，先把场景拆成两层：
- 代码层：文字、数字、卡片、气泡、按钮、所有动效——全在代码里重建，不依赖图片
- 图片层：背景纹理、人物插图——作为静态资源 import 进来，代码不负责生成
这层分工要写进 Codex 的 prompt 里：「文字和布局用代码实现，背景图我会手动 import，你不需要生成图片内容。」
还有一句很关键的提示词——「先分析，再写代码」。跳过它，Codex 会直接开写，容易写歪。先让它对着图片说出它看到了什么、打算怎么实现，再让它动手。
Step 4：对照预览图检查，逐场景微调
每个场景单独跑，对照原图。有偏差时，反馈要具体：
- ❌ 「再好看一点」——只会让它加阴影和渐变
- ✅ 「标注卡片出现得太早，改成主内容 fade-in 完成后再 slide-in」
- ✅ 「donut chart 颜色偏橙，改成 #b44040」
越具体，Codex 越好改。这一步本质上是在训练自己说「人话+工程话」——把视觉感受翻译成可执行的指令。
Step 5：浏览器录屏，交付
四个场景全跑通之后，浏览器直接预览，系统自带录屏就够了。
不需要 After Effects，不需要 Premiere，不需要任何视频软件。
要让视频更好看，最后过一遍美化工具、配个 BGM，就完成了。
这个工作流适合谁？
想做产品演示视频、工具教程视频，但没有视频制作背景的人。
你不需要懂剪辑，不需要懂动效工程。你需要的是：知道每个场景要长什么样，然后用一张图把这件事说清楚。
先确认视觉，再执行工程。把两个判断拆开，AI 就不会乱。
回过头看，这套工作流真正的价值不是「省了一万块」，而是把一件原本需要专业团队协作的事，拆成了一个人就能跑完的流程。每一步都明确：这一步在判断什么？下一步靠什么输入？
下次你想做一个视频、一个 landing page、甚至一个完整的产品 demo，不妨问自己：哪些部分该交给「先出图」，哪些部分该交给「直接写代码」？把这条边界画清楚，AI 工具的产出质量会立刻上一个台阶。