用 Codex 做视频：从一句需求到导出成片的 Remotion 上手教程

周四下班前，你收到一条消息：「下周上新，做一条 30 秒的短视频，发视频号和抖音。」你没有剪辑师，也不想学 Premiere。你手上有三张产品图、一句卖点和一台电脑——但你听说过两样东西：Codex 能把一句需求变成能跑的代码，Remotion 能用 React 把代码变成真正的视频文件。

听起来像「那就让 AI 自动剪呗」，但真正的坑不在工具，而在流程：直接丢一句「帮我做个视频」，Codex 会给你一堆看似合理的代码，然后你在预览里看到标题飘出屏幕外、字体变成方块、音乐根本没响。这不是 Codex 不够聪明，而是没有人像导演一样，把需求拆成它能执行、你能验收的任务。

这本教程要教你的，正是这套「导演工作流」：你负责想清楚片子的结构、节奏和验收标准，Codex 负责把每一句需求变成可运行的代码，Remotion 负责把代码逐帧渲染成真正的视频文件。学完它，你能从空文件夹开始，一步步做出一条包含标题卡、动画、数据驱动内容、字体与音乐、可以交付的 MP4，并且知道每一轮该检查什么、出错了怎么让它改。

你只需要准备这些

版本提示：Codex 与 Remotion 都更新得很快。本教程正文于 2026 年 9 月 5 日核对，当时 Remotion 最新版本为 4.0.x、Codex CLI 为 0.15x。示例代码只使用长期稳定的 API；如果某个命令报错，先运行 npm view remotion version、npm view @openai/codex version 看看版本号，再按第3章教的方法让 Codex 去查当前官方文档——这本身就是本教程要训练你的习惯。

怎么读这本教程

• 章节按学习路径排序，不要跳着读：第1章立心智，第2章搭环境，第3章起每一章都建立在上一章的产物上。
• 代码块的命令默认在项目根目录运行；正文会明确说「在哪个目录、做什么」。
• 每一章的配图不只是插图：图注里写了「你应该注意到什么」，读图请连图注一起读。
• 每章最后一节是「行动任务」：先做，再对照正文自查。自查问题答不上来时，回到对应小节重读，而不是跳过。
• 文中出现的英文专有名词（如 Composition、Sequence）是必须保留的 API 名称，第一次出现时都会给出中文解释。
• 教程的贯穿示例是一条虚构的「山雾乌龙」新品上新视频。你完全可以换成自己的主题——只要保留同样的结构。

贯穿全书的示例：「山雾乌龙」上新视频

为了让你每章都有「看得见摸得着」的产物，全书围绕一条 18 秒的新品上新短视频展开：

• 画幅：1920 × 1080（横向），帧率 30 fps，总时长 540 帧（18 秒）；
• 结构：开场标题卡 → 三条卖点逐条浮现 → 结尾引导关注；
• 目录结构（第2章创建后）：

my-video/
├─ package.json
├─ src/
│  ├─ index.ts          # 注册 composition 的入口（第4章细讲）
│  ├─ Root.tsx          # 集中声明视频的尺寸、时长与内容组件
│  └─ components/       # 每个场景、每个卡片的组件
├─ public/              # 图片、音乐、字体等素材（第7章细讲）
└─ remotion.config.ts   # 渲染相关配置

每一章的成果会逐步长进这条视频：第2章先让它空转起来；第3章让 Codex 做出开场标题卡；第4章用它讲解核心概念；第5章扩展成三场景动画；第6章把三条卖点改成数据驱动；第7章加入字体、产品图和背景音乐；第8章渲染成片并逐帧验收；第9章把这整套流程沉淀成你下次能直接复用的模板。

现在，从第1章开始：先别急着敲命令，花十分钟把「这两个工具到底是什么关系」想清楚——这十分钟会帮你省下后面大量的返工。