971 字
5 分钟
AI 驱动视频制作工作流
先用预览图确定画面，再用代码实现动画。这样可以分别调整视觉和动效，减少返工。
为什么先出预览图
「深色调、有科技感、简洁大气」很难说明具体画面。先生成预览图，就能把要求落实到布局、颜色和视觉层级，再让 Codex 按图实现。
步骤 1：构思脚本和分镜
每个场景确认四件事（写文档即可，无需工具）：
- 画面里有什么 — 元素、位置、数字
- 情绪基调 — 紧张感、讽刺感、转折感
- 需要出现的文字和标注卡
- 动效的出现顺序
每个场景写一份分镜描述，后续生图和动画都以此为依据。
步骤 2：用 GPT-Image-2 生成分镜预览图
确认每张图的布局和风格符合预期后，再开始制作动画。
三种 Prompt 模板
A. 精确布局型（数据看板 / UI 截图）
A [界面类型] in 16:9 landscape format, [色调].[主要元素，精确到位置、层级、数字、颜色]Floating annotation card · [位置] · semi-transparent dark background+ white border · large: "[主标注]" / small: "[副标注]"Overall tone: [情绪基调]实例（数据看板场景）：
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.原则： 纹理和插图用生图解决，文字、数字、布局、动效全在代码里重建。
步骤 3：把预览图交给 Codex
3.1 先拆分成两层
| 层 | 内容 | 实现方式 |
|---|---|---|
| 代码层 | 文字、数字、卡片、气泡、按钮、所有动效 | 代码重建，不依赖图片 |
| 图片层 | 背景纹理、人物插图 | 静态资源 import |
这层分工要写进 Codex 的 prompt：「文字和布局用代码实现，背景图我会手动 import，你不需要生成图片内容。」
3.2 Codex Prompt 模板
严格按照我上传的这张预览图，复刻成一个 React 动画场景。
先不要写代码，先做三件事：1. 分析图片的布局结构和视觉层级2. 列出需要哪些主要组件3. 确认动效执行顺序
然后：- 先实现静态布局，还原颜色、字号、间距、圆角- 再按以下动效顺序加入动画：[分镜里的动效描述]- 使用 [React + Tailwind + CSS keyframes]- 只做这一个场景，不要碰其他文件先确认布局、组件和动效顺序，可以减少实现偏差。
步骤 4：对照预览图检查，逐场景微调
逐个预览场景，对照原图提出具体修改：
- ✅ 「标注卡片出现得太早，改成主内容 fade-in 完成后再 slide-in」
- ✅ 「donut chart 颜色偏橙，改成 #b44040」
- ❌ 「再好看一点」 → 没有说明具体要改哪里
需求不够清楚时，可以先让 AI 帮忙整理提示词。
步骤 5：浏览器录屏，交付
所有场景确认后，在浏览器中播放，用系统录屏导出。简单演示可以直接交付；需要配乐时，再补上音轨。
适合谁
适合想制作简单产品演示或工具教程、缺少剪辑经验的人。重点是想清楚每个场景要展示什么，并用预览图说明。