Codex 图片与视频制作：从 AI 生图到 Remotion 自动剪辑

以前制作一条产品宣传视频，需要先设计图片，再用剪辑软件添加动画、字幕和背景音乐，最后导出视频。

现在可以让 Codex 把这些工作串起来：生成图片素材、编写动画代码、安排分镜、添加字幕，最后在本机渲染出 MP4 视频。

本章节通过一个完整案例，使用 Codex 的图片生成能力配合 Remotion，为虚拟产品"IZZI 橙色旅行水杯"制作一条 15 秒的产品介绍短片。

整个过程不需要手动编写 React 代码，也不需要操作传统视频剪辑软件。我们负责提出需求和确认效果，Codex 负责完成技术实现。

---

一、Codex 如何制作图片和视频

Codex 可以直接参与图片和视频的制作，但两者的实现方式不同。

制作任务	使用工具	主要功能
图片生成	Codex + ImageGen	根据提示词生成产品图、背景图、插画等
图片修改	Codex + ImageGen	修改背景、调整构图、生成不同画幅
视频制作	Codex + Remotion	通过 React 代码制作动画、字幕和转场
视频导出	Remotion	在本机渲染生成 MP4 视频

可以简单理解为：ImageGen 负责画画，Remotion 负责让画面动起来，Codex 则负责整个制作流程。

什么是 Remotion

Remotion 是一个使用 React 编写视频的框架。

传统剪辑软件通过时间轴编辑视频，Remotion 则通过代码控制画面。图片什么时候出现、字幕什么时候进入、动画持续多久，都可以精确设置。

例如，一段 15 秒、30fps 的视频，一共包含 450 帧。Remotion 可以根据代码逐帧生成画面，再编码成 MP4 文件。

它比较适合制作：

• 产品图片展示与宣传短片
• 动态字幕、文字片头与片尾
• 图表动画和数据可视化视频
• APP、网站和软件功能演示
• 图片轮播、转场和卡点动画

需要注意，Remotion 本身不是 AI 视频生成模型。它可以让静态图片产生平移、缩放、旋转等动画，但不会自动生成真实的人物行走、复杂物体运动等画面。

和 AI 视频生成模型有什么区别

对比项	Remotion	AI 视频生成模型
实现方式	使用代码控制画面和动画	通过模型生成动态影像
画面效果	图片动效、图形动画、字幕、转场	真实运动、人物动作、复杂场景
可控性	文字、时长、位置可精确控制	依赖模型生成，结果存在随机性
修改方式	修改代码后重新渲染	调整提示词或重新生成镜头
费用	本地渲染不按视频秒数收取模型费用	通常需要模型生成额度或 API 费用
适用场景	宣传图卡、产品演示、课程视频	写实镜头、人物表演、动态场景

两种方式也可以组合使用。例如，先通过 AI 视频模型生成写实镜头，再交给 Remotion 添加字幕、品牌元素和片尾。

本次教程只使用 Codex 生图与 Remotion 本地渲染，不调用视频生成模型。

---

二、实战目标：制作一条 15 秒产品视频

假设我们要给一款虚拟产品"IZZI 橙色旅行水杯"制作宣传短片。

目前只有产品名称和两个卖点：轻便、适合通勤。

我们希望 Codex 帮忙生成产品图片，再把图片制作成具有动画、字幕和转场效果的视频。

项目	要求
产品名称	IZZI 橙色旅行水杯
视频长度	15 秒
视频比例	16:9 横屏
视频分辨率	1920 × 1080
视频帧率	30fps
画面风格	简洁、明亮、现代产品广告
制作方式	AI 图片 + Remotion 动画
输出格式	MP4

整个制作流程如下：

Codex 将负责项目初始化、图片生成、动画编写、预览和最终渲染。我们主要负责确认分镜、产品外观和最终效果。

---

三、准备 Codex 和 Remotion

1、创建项目目录

首先启动 Codex，新建一个空文件夹，例如 video-maker，并将其设置为当前项目目录。

后续生成的图片、视频代码和 MP4 文件都保存在这个目录下，方便修改和再次使用。

2、安装 Remotion Skills

Remotion 官方提供了适用于 Codex 等 AI 编程工具的 Skills，其中包含项目创建、动画制作、素材使用和视频渲染等实践规范。

在支持 Skills 安装的 Codex 界面中搜索 remotion，找到对应技能并安装。

也可以使用 Remotion 官方提供的安装命令：

安装 Remotion Skills

npx skills add remotion-dev/skills

如果没有安装 Node.js，可以先让 Codex 检查开发环境。Remotion 需要 Node.js 和相关依赖才能在本机运行。

安装完成后，可以告诉 Codex：

检查项目环境

检查当前环境是否可以运行 Remotion。
确认 Node.js、npm 和 Remotion Skills 是否可用。
如果缺少依赖，请告诉我原因，并协助完成安装。
准备好后初始化一个 Remotion 项目。

Remotion 官方文档：https://www.remotion.dev/docs/

---

四、第一步：让 Codex 规划视频分镜

不要上来就让 Codex 直接生成视频。

先把产品信息、视频长度和画面风格告诉它，让它规划整条短片的内容。

实例：视频导演提示词

你是一位产品广告导演，同时负责使用
Codex、ImageGen 和 Remotion 完成视频制作。
请为虚拟产品「IZZI 橙色旅行水杯」
设计一条 15 秒产品介绍视频。
产品信息：
- 产品：橙色旅行水杯
- 外观：橙色圆柱形杯身，带翻盖
- 卖点：轻便、适合通勤
- 风格：简洁、现代、明亮
视频要求：
- 16:9 横屏
- 1920×1080
- 30fps
- 总时长 15 秒
- 中文字幕
- 简洁自然的动画转场
请先完成以下任务：
1. 规划视频整体创意。
2. 按时间顺序设计分镜。
3. 说明每个镜头需要的图片素材。
4. 给出字幕与动画建议。
5. 设计统一的产品视觉风格。
暂时不要生成图片和编写代码。
先把分镜方案给我确认。

Codex 会根据需求制作分镜方案，例如：

时间	画面内容	动画效果
0～3 秒	橙色水杯从画面右侧进入	平滑移动、淡入
3～6 秒	展示水杯整体外观	轻微放大、产品特写
6～10 秒	展示通勤使用场景	场景切换、字幕进入
10～13 秒	突出"轻便、适合通勤"	文字依次出现
13～15 秒	产品定格与结束画面	渐隐、收尾

确认分镜后，再让 Codex 开始生成图片素材。

---

五、第二步：使用 Codex 生成产品图片

这是整个案例中比较重要的一步。

Codex 可以通过 $imagegen 技能生成和编辑图片。我们只需要告诉它产品外观、画面风格和构图要求。

但需要注意一个问题：同一产品如果在不同场景里重新生成，外观可能会发生变化。

例如，第一张图片是圆柱形水杯，第二张可能变成方形，第三张连杯盖都不一样了。

因此，比较合适的做法是先生成一张产品标准图，确认外观后，再以这张图片为参考生成其他场景。

1、生成产品标准图

实例：生成产品主图

请使用 $imagegen 生成一张产品标准图。
产品描述：
一只无品牌、橙色、圆柱形的旅行水杯，
具有翻盖，杯身简洁，外观现代。
图片要求：
- 1:1 正方形
- 产品居中
- 完整展示杯身和杯盖
- 简洁浅灰背景
- 柔和的商业摄影光线
- 产品结构清晰
不要添加文字、Logo、水印。
不要增加多余的装饰。
请保存为：
assets/images/cup-master.png
先生成这一张，等我确认产品外观。

生成后检查产品的颜色、杯盖、比例和外观。确认没有问题，再进行下一步。

2、生成视频所需的场景图

接下来以已经确认的产品主图为参考，让 Codex 生成不同构图的素材。

实例：批量生成视频素材

请使用 $imagegen 继续生成视频素材。
以 assets/images/cup-master.png
作为产品外观参考。
产品的颜色、杯身形状、杯盖结构必须保持一致。
生成以下图片：
1. cup-hero.png
16:9 横图，水杯靠右，左侧大面积留白。
适合视频开场。
2. cup-detail.png
16:9 横图，水杯居中，突出整体外观。
适合产品展示镜头。
3. cup-lifestyle.png
16:9 横图，水杯位于简洁通勤场景。
可以有背包、桌面等元素，但水杯是主体。
4. cup-ending.png
16:9 横图，水杯位于画面中央。
背景简洁，适合结束画面。
统一要求：
- 保持产品一致性
- 现代商业广告风格
- 明亮、简洁
- 不要文字、Logo、水印
- 不要自行改变产品设计
- 图片保存到 assets/images 目录
如果参考图片无法保证产品细节一致，
请优先保留原产品图，
使用裁切、合成和背景替换完成场景制作。
生成后列出全部素材文件。

这里建议不要把字幕直接生成到图片里。字幕交给 Remotion 编写，后期修改会方便很多。

3、检查图片素材

素材生成完成后，检查一下图片是否齐全。

重点检查产品外观是否一致，画幅是否正确，以及是否预留了添加字幕的位置。

---

六、第三步：让 Codex 使用 Remotion 制作视频

图片准备好之后，就可以开始制作视频了。

这一步不需要手动打开剪辑软件。让 Codex 读取之前确认的分镜和图片素材，使用 Remotion 编写视频代码即可。

实例：开始制作 Remotion 视频

现在开始制作视频。
请使用已经安装的 Remotion Skills，
按照我们确认的分镜和图片素材，
完成一条 15 秒的产品介绍视频。
技术要求：
- React + Remotion
- 1920×1080
- 30fps
- 450 帧
- 16:9 横屏
- 输出 MP4
制作要求：
1. 使用 assets/images 中已经确认的素材。
2. 按分镜安排每个镜头的时间。
3. 添加平滑的缩放、移动和淡入淡出动画。
4. 字幕使用 React 文字组件制作。
5. 字幕内容只使用确认过的产品信息。
6. 保证产品图片不被拉伸变形。
7. 转场简洁自然，不要过度使用特效。
8. 如果没有提供可使用的背景音乐，
   先制作无配乐版本，不要擅自下载音乐。
请自动完成工程初始化、依赖安装和代码编写。
完成后启动 Remotion Studio，
让我检查时间轴与预览画面。
暂时不要渲染正式成片。

Codex 会创建 Remotion 工程，并编写对应的 React 组件、动画和时间轴配置。

例如，图片缩放、字幕淡入、镜头切换等，都可以通过代码控制。

预览视频效果

代码完成后，可以通过 Remotion Studio 在浏览器中预览视频。

如果项目已经配置好 Remotion，也可以使用以下命令启动：

启动 Remotion Studio

npx remotion studio

在预览界面可以拖动时间轴，检查图片切换、动画节奏和字幕位置。

如果觉得某个镜头太快，直接告诉 Codex：

实例：调整视频节奏

第 2 个镜头切换太快了。
请适当延长产品特写的停留时间，
减少不必要的缩放动画。
整体视频仍然保持 15 秒，
其他已经确认的画面尽量不变。

Codex 修改对应的时间轴和动画代码后，就可以重新预览，不需要重新生成全部图片。

---

七、第四步：渲染并导出 MP4 视频

预览效果确认后，让 Codex 在本机渲染正式视频。

建议采用两阶段制作：先输出低分辨率预览，确认没有问题之后，再导出 1080p 正式版本。

实例：导出正式视频

预览已经确认，可以开始正式渲染。
请检查：
- 总时长是否为 15 秒
- 帧率是否为 30fps
- 分辨率是否为 1920×1080
- 图片和字幕是否正常显示
- 是否存在黑屏或空白帧
确认无误后：
1. 使用 Remotion 在本机渲染。
2. 输出 H.264 编码的 MP4 文件。
3. 将视频保存到 out 目录。
4. 文件名为 IZZI-orange-cup-v01.mp4。
5. 不要覆盖已存在的版本。
6. 完成后告诉我实际文件路径。

Remotion 也支持命令行导出，例如：

Remotion 渲染命令

npx remotion render CupVideo out/IZZI-orange-cup-v01.mp4

其中 CupVideo 是示例 Composition ID，实际使用时需要与项目中的视频组件 ID 一致。

渲染完成后，可以直接使用本机播放器打开 MP4 文件。

---

八、完整演示：从提示词到视频成片

前面将制作过程拆成了几个步骤。如果已经熟悉 Codex，也可以直接提供一份完整任务说明，让它按照要求依次完成。

实例：Codex 图片与视频制作完整提示词

你是我的 AI 视频制作助手，
同时担任导演、视觉设计师和 Remotion 工程师。
请使用 Codex 的图片生成能力和 Remotion，
为虚拟产品「IZZI 橙色旅行水杯」
制作一条 15 秒宣传短片。
一、产品信息
产品名称：IZZI 橙色旅行水杯
外观：橙色圆柱形杯身，带翻盖
卖点：轻便、适合通勤
不得编造保温时长、材质认证、销量等信息。
二、视频参数
比例：16:9
分辨率：1920×1080
帧率：30fps
时长：15 秒
格式：MP4
风格：简洁、现代、明亮
三、制作步骤
第一阶段：规划
1. 根据产品信息制定视频创意。
2. 设计逐镜头分镜。
3. 列出图片素材清单。
4. 规划字幕、动画和转场。
先交给我确认，不要直接开工。
第二阶段：生成图片
1. 使用 $imagegen 生成产品标准图。
2. 让我确认产品外观。
3. 根据确认的产品图生成其他场景。
4. 保持水杯颜色、杯身和杯盖一致。
5. 素材统一保存在 assets/images。
6. 不在生成图片中添加字幕。
第三阶段：制作视频
1. 检查 Node.js 和 npm。
2. 检查并安装 Remotion Skills。
3. 初始化 Remotion 工程。
4. 编写 React 视频组件。
5. 按确认的分镜实现动画、字幕和转场。
6. 启动 Remotion Studio。
7. 提供预览并根据反馈修改。
第四阶段：导出视频
1. 先输出低分辨率预览版。
2. 经我确认后导出正式版本。
3. 正式视频为 1920×1080、30fps。
4. 输出 MP4 文件到 out 目录。
5. 文件名使用 IZZI 前缀及版本号。
6. 新版本不得覆盖旧版本。
四、工作规则
- 优先复用已经确认的素材。
- 不要修改未经授权的项目文件。
- 不要擅自购买服务或调用付费 API。
- 缺少依赖时，先解释并提出解决方法。
- 图片生成失败时，说明原因并给出替代方案。
- 不要编造产品卖点。
- 每个阶段完成后，简要说明结果。
所有代码和终端操作由你负责。
现在先检查环境，并给出视频分镜方案。

将提示词发送给 Codex 后，它会先检查环境和整理需求。

确认信息后，按照提示让 Codex 开始执行。

最终视频效果

下面是通过 Codex 与 Remotion 制作的产品视频演示：

和直接使用视频生成模型不同，这种方式生成的视频保留了完整工程文件。

之后需要修改字幕、换一张图片，或者调整动画时间，只需要让 Codex 修改相关代码，再次渲染即可。

---

九、常见问题与解决方法

问题	解决方法
Codex 无法生成图片	检查当前环境是否支持 ImageGen，确认技能和使用额度；必要时使用已有素材
不同图片中的产品不一致	固定产品标准图作为参考，优先通过裁切与合成制作其他画面
Remotion 无法启动	让 Codex 检查 Node.js、项目依赖和终端错误信息
视频中的图片不显示	检查素材是否存放在正确目录，以及路径是否匹配
动画不流畅	检查帧率、关键帧、动画曲线和转场时间
字幕出现错字	让 Codex 对照原始产品信息逐字检查
视频渲染速度慢	先降低预览分辨率，正式交付时再渲染 1080p
输出视频时长不正确	检查 Composition 是否设置为 450 帧、30fps

不满意时如何修改

第一版视频不满意，不需要重新制作整个项目。

例如，想让开场更加自然，可以直接输入：

实例：局部修改视频

请优化上一版视频：
1. 开场水杯进入速度慢一点。
2. 第三个镜头的字幕位置向上移动。
3. 转场不要太花哨，改为淡入淡出。
4. 最后一个镜头的产品停留时间稍长一些。
总时长保持 15 秒。
只修改相关动画和时间轴代码，
不要重新生成已确认的图片。
完成后提供新的预览，
保留上一版视频。

这种可重复修改的工作方式，也是 Remotion 与普通 AI 视频生成工具的重要区别。

---

十、动手练习

完成前面的 15 秒产品视频后，可以继续尝试以下练习。

练习一：生成不同画幅的产品图片

让 Codex 基于同一个橙色旅行水杯，生成三种用途的图片：

• 16:9 横图：网站首页横幅，产品靠右。
• 1:1 方图：电商商品主图，产品居中。
• 4:5 竖图：活动海报底图，产品位于下半部分。

要求产品外观保持一致，不能增加未经确认的品牌标识或产品功能。

练习二：制作 10 秒字幕短片

将之前的视频改成一条 10 秒的字幕短片。

保留产品主图，制作三张动态字卡，依次展示产品名称、轻便和适合通勤三个内容。

要求字幕清晰、动画自然，导出一个独立的 MP4 文件。

练习三：将视频改成竖屏版本

让 Codex 把原来的 16:9 视频改成 9:16，分辨率为 1080×1920。

注意不能直接拉伸原图，需要重新安排产品位置、字幕和镜头构图，必要时生成适合竖屏的新背景素材。