先出图再复刻：进阶补充版
同一工作流的另一份存档：版本差异对照、实操检查清单与避坑——5 步详解见第 7 课。
开篇：这课是什么定位
这课和《第 7 课》讲的是同一套工作流、同一作者、同一个原帖——是同一主题的另一份存档版本。所以 5 步详解本课不重复讲，只补三样第 7 课没展开的东西：
- 一页速览：整条链路 30 秒复述。
- 版本对照：两份存档的细微差异。
- 实操检查清单 + 避坑：照着打勾就能开工。
5 步工作流详解（分镜 → 预演图 → Codex 复刻 → 微调 → 录屏交付），详见《第 7 课：先出图，再复刻》。
一页速览：整条链路
先出图，再复刻（@Formulasearch）：
- Step 1：写分镜文档——每场景确认画面元素、情绪基调、文字标注卡、动效顺序。
- Step 2：GPT-Image-2 出分镜预演图——精确布局型 / 人物插图型 / 背景纹理型三种 prompt；每张图只确认"视觉方向对不对"。
- Step 3：Codex 复刻成代码——代码层（文字布局动效）与图片层（纹理插图）分工写进 prompt；先分析再写代码。
- Step 4：对照预演图微调——反馈要具体，别说"再好看一点"。
- Step 5：浏览器录屏交付——不用 AE/PR，FocuSeeHQ 美化 + 配 bgm。
给 Codex："严格按照我上传的这张预览图，复刻成一个 React 动画场景。先不要写代码，先做三件事：1. 分析图片的布局结构和视觉层级 2. 列出需要哪些主要组件 3. 确认动效执行顺序。然后先实现静态布局，再按动效顺序加动画。"
给生图："A [界面类型] in 16:9 landscape format, [色调]. [主要元素，精确到位置、层级、数字、颜色] Floating annotation card · [位置] · semi-transparent dark background + white border · large: [主标注] / small: [副标注]. Overall tone: [情绪基调]"
版本对照：两份存档差在哪
同一原帖有两份存档（即第 7 课与本课的原文），内容 95% 相同。可辨差异只有三处：
- 视频链接不同：成品演示视频的 blob 链接是两套（同一视频的不同存档地址）。
- 多一行图片引用：本课版本多了一行成品缩略图的直接引用。
- 时间戳标注差异：第 7 课版本标了 0:02 / 0:18，本课版本为 0:00 / 0:22。
结论：工作流本身没有任何差异，两份可互为备份。学的时候认准第 7 课的 5 步，本课只当清单用。
两份存档像同一本书的两个印次：正文一字不差，只是页码标注有点出入。读书认内容，不认印次。
实操检查清单：开工前打勾
照着这张清单走，一期产品视频不会跑偏：
☐ 每个场景的四件事写清了没（元素位置数字 / 情绪基调 / 文字标注卡 / 动效顺序）？
☐ 分镜文档是"之后所有东西的地基"，没写完不许出图。
☐ prompt 用对类型了吗（布局型 / 人物插图型 / 背景纹理型）？
☐ 每张图只问"视觉方向对不对"，对了才进下一步，别在预演图上雕花。
☐ prompt 里写清代码层/图片层分工了吗？
☐ 有没有写"先分析再写代码"三步？
☐ 技术栈写明了吗（如 React + Tailwind + CSS keyframes）？
☐ 有没有限定"只做这一个场景，不要碰其他文件"？
☐ 反馈具体吗（时间点 + 改什么 + 改成什么）？
☐ 一次只改一处吗？
☐ 有没有对照原图逐场景检查？
☐ 浏览器预览跑通了吗？
☐ 系统录屏 + FocuSeeHQ 美化 + bgm 都做了吗？
☐ 成片从头看一遍：字幕、转场、结尾都没问题？
避坑：三个最容易翻的地方
- 坑 1：跳过预演图直接让 Codex 写——"没有图就像让人画画不告诉他画什么"，十次七次不是你想要的。省这一步，后面返工十倍。
- 坑 2：反馈说"再好看一点"——AI 只会加阴影和渐变。要说"标注卡出现太早，改成主内容 fade-in 完成后再 slide-in"这种。
- 坑 3：代码层图片层不分——让 Codex"生成图片内容"，它会用代码硬画插图，又丑又慢。分工写进 prompt：文字布局动效归代码，纹理插图当资源 import。
最大的一坑：把"出图"当成目的。预演图只是手段——它的唯一使命是回答"视觉方向对不对"，答完就进下一步，别在预演图上追求完美。
术语翻卡：点卡片看解释
自测一下：点问题展开参考答案
同一工作流、同一作者、同一原帖的两份存档。第 7 课讲透 5 步，本课是进阶补充：版本对照 + 检查清单 + 避坑，不重复讲 5 步。
视频 blob 链接不同；本课版多一行成品缩略图引用；时间戳标注差异（0:02/0:18 vs 0:00/0:22）。工作流本身无差异。
代码层/图片层分工；"先分析再写代码"三步；技术栈；限定"只做这一个场景，别碰其他文件"。
好："标注卡出现太早，改成主内容 fade-in 完成后再 slide-in"。坏："再好看一点"——只会加阴影渐变。