先出图，再复刻：Codex + image-2 视频工作流

外包一个几十秒的产品视频要上万块。@Formulasearch（Phil，前建筑师转 AI 产品）没打开任何剪辑软件，只用代码就把它跑出来了。

工作流的关键只有一句话：先用 GPT-Image-2 把每个场景的视觉预演图出好，再把图交给 Codex 复刻成代码。

作者的原话："用 Codex 写界面，没有图，就像让人画画但不告诉他画什么：能动笔，但结果全靠运气。"

"深色调、有科技感、简洁大气"——AI 能理解这些词，但落到实际画面，十次有七次不是你想要的。先出一张预览图，AI 就有了可视化的参考，比文字直观得多。

每个场景确认四件事，不需要任何工具，写文档就行：

• 画面里有什么（元素、位置、数字）。
• 情绪基调（紧张感、讽刺感、转折感）。
• 需要出现哪些文字和标注卡。
• 动效的出现顺序。

几个场景就写几份分镜描述——这是之后所有东西的地基。

每个场景写一份图片 Prompt。数据看板 / 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.

另外两种场景换写法：

原则：纹理和插图用生图解决，文字、数字、布局、动效全在代码里重建。各司其职。

每张图只问一件事：这个视觉方向对不对？对了才进下一步。

给图之前，先把场景拆成两层——这层分工要写进 Codex 的 prompt 里：

• 代码层：文字、数字、卡片、气泡、按钮、所有动效——全在代码里重建，不依赖图片。
• 图片层：背景纹理、人物插图——作为静态资源 import 进来，代码不负责生成。

给 Codex 的 prompt 全文：

复制严格按照我上传的这张预览图，复刻成一个 React 动画场景。

先不要写代码，先做三件事：
1. 分析图片的布局结构和视觉层级
2. 列出需要哪些主要组件
3. 确认动效执行顺序

然后：
- 先实现静态布局，还原颜色、字号、间距、圆角
- 再按以下动效顺序加入动画：[你在分镜里写的动效描述]
- 使用 [你的技术栈，如 React + Tailwind + CSS keyframes]
- 只做这一个场景，不要碰其他文件

每个场景单独跑，对照原图。反馈要具体：

• 好反馈："标注卡片出现得太早，改成主内容 fade-in 完成后再 slide-in"；"donut chart 颜色偏橙，改成 #b44040"。
• 坏反馈："再好看一点"——只会让它加阴影和渐变。

也可以让 AI 先改进你的提示词，再正式提交。

四个场景全跑通 → 浏览器直接预览 → 系统自带录屏。不需要 After Effects，不需要 Premiere，不需要任何视频软件。

美化 + 配 bgm 就完成了。作者为了让视频更好看，选用了 FocuSeeHQ 做美化。

作者说本文只提供思路和逻辑，抛砖引玉。适合：想做产品演示视频、工具教程视频，但没有视频制作背景的小白——不需要懂剪辑，不需要懂动效工程。

你需要的是：知道每个场景要长什么样，然后用一张图把这件事说清楚。先确认视觉，再执行工程——把两个判断拆开，效率更高。

同一主题的另一份存档版本见《第 8 课》（进阶/补充版）：版本差异对照 + 实操检查清单。