Codex + Remotion 入门：把产品截图做成 30 秒更新视频
用 Codex 和 Remotion 做第一条产品视频，可以从三段脚本开始：准备截图和录屏，创建 Remotion 工程，安装官方 skills，再让 Codex 编排画面、启动预览并导出 MP4。标题、素材路径和段落时长集中保存后，第二版更换截图就有明确入口。
Remotion 用 React 组织视频画面，官方维护的 Agent Skills 支持 Codex。Remotion 入门文档和Skills 文档提供了创建、预览、渲染所需的入口。
1. 给 30 秒视频准备三份素材
以“订单页新增日期筛选”为例，先录清楚操作，再考虑转场。录屏使用演示数据，隐藏客户姓名、订单编号和通知弹窗。准备旧页面截图、新页面录屏、结果截图，各留一份原始文件。
| 时间 | 讲什么 | 画面 |
|---|---|---|
| 0–6 秒 | 历史订单不容易找 | 旧页面局部截图 |
| 6–20 秒 | 选择日期后筛选 | 新功能操作录屏 |
| 20–30 秒 | 适合查哪类订单 | 结果截图与提示 |
先把每段字幕写成一句话。6 秒里读不完的文字，缩短或拆开。画面正在演示点击，字幕就补充用途，避免把按钮名称又念一遍。第一条视频先做横版，等内容顺序确定后再适配竖版。
2. 创建工程，接上官方 skills
准备好 Node.js，在准备存放视频的目录运行官方创建向导：
npx create-video@latest
按向导选择项目目录和模板；首次可以用 Hello World。进入生成的工程后，按模板提示安装依赖。在工程里安装 Remotion 官方 skills，并启动预览：
npx skills add remotion-dev/skills
npm run dev
skills 安装时选择自己实际使用的 Agent。已有工程应先看依赖和脚本，避免重复创建。让 Codex 打开这个工程，并确认能看到现有 composition；如果连模板都无法预览，先解决运行错误，暂缓加入视频素材。
3. 让 Codex 按脚本实现第一版
把素材放进工程的静态资源目录，再提交明确任务：
使用三段脚本制作 30 秒、1920×1080、30fps 的更新视频。
composition 命名为 OrderUpdate。
原始截图与录屏保持比例，字幕不能盖住日期输入框。
把标题、素材路径、结束语和段落时长集中到可修改参数。
先完成无配音预览，再交付本地 MP4 和工程说明。
30fps 下，30 秒对应 900 帧。让 Codex 给出各段的开始帧与持续帧，检查相邻段有没有空隙或意外重叠。先看三个静态关键帧：开场、筛选操作、结束页；版式通过后再连续播放。
第一次修改只处理影响理解的地方，例如字幕挡住按钮、操作录屏太小、结束页没有读完。背景粒子、复杂转场可以等内容顺畅后再加。
4. 导出 MP4，检查真正交付的文件
composition 确认为 OrderUpdate 后，可按官方渲染命令导出：
npx remotion render OrderUpdate out/order-update.mp4
打开导出的 MP4 从头看完，检查中文字体、截图清晰度、首尾黑帧和字幕停留时间。不要只看 Studio 预览。带配音时，再检查字幕是否跟得上人声、背景音乐是否压住说明。
交付目录至少保留工程、锁文件、输入素材、导出文件和运行说明。再做一次小修改：只替换结果截图，重新渲染同名 composition。如果必须到处搜索旧路径，说明参数还没有集中好。
第二版怎样修改才不乱
收到“再做竖版”的要求时，先复制画幅配置并保留横版，重新安排录屏和字幕。不要直接裁掉左右两边：操作按钮可能正好落在画面外。把竖版关键帧发给需求方确认，再导出完整视频。
如果中文显示成方框，先检查工程引用的字体；如果录屏变形，检查素材比例和容器裁切；如果中间黑了一帧，对照段落的开始帧与持续帧。每次围绕一个现象修改，保留上一版输出，前后就容易比较。渲染失败时保存完整错误和 composition 名称，再定位缺失素材或配置，不必重新创建整个工程。
商业项目开始前看哪项授权
Remotion 当前许可允许个人、最多 3 名员工的营利组织等符合条件的主体免费创作商业视频；不符合免费条件的主体需要 Company License。具体按实际使用版本和组织情况判断，配乐、字体及外部素材分别遵守各自授权。Remotion 许可证
想先看画面形式，可打开 Remotion 官网演示。还没决定是否需要三维素材，先看生图、Blender 与 Remotion 的选择表；多人交接工程时，再用素材交付清单。
经常用 Codex 制作和修改工作素材，可在 China Models 订阅服务查看适合已有账号的订阅与开票套餐。