以前给产品做一条宣传视频，往往要经历一整套复杂流程：整理素材、录屏、剪辑、加字幕、配音、导出，还要一遍遍检查画面节奏和按钮位置。对于很多独立开发者、产品经理或者小团队来说，这件事不是不会做，而是太耗时间。
最近我用 Codex 实际完成了一次产品教程视频制作。整个过程让我感觉，AI 已经不只是能帮你写文案，而是可以真正参与到产品视频的生产流程里。
这次案例是用 7 张产品操作截图，制作一条竖屏中文教程视频，主题是“如何下载微博视频”。
一、先准备好产品截图和脚本
这次我先准备了 7 张截图，分别命名为 1.png、2.png、3.png、4.png、5.png、6.png、7.png。
这些截图对应一个完整的产品操作流程：打开微博视频，点击更多，复制链接，打开下载网站，粘贴链接，点击下载，最后在浏览器下载记录里看到保存好的视频。
除了截图，我还准备了一份脚本文件，里面写好了每一段的画面说明、字幕、配音稿和时间轴。
然后我把这些素材路径和制作要求交给 Codex，让它检查 HyperFrames 是否可用，并用这些图片生成一条竖屏中文教程视频。
这里的 HyperFrames 可以理解成一个用 HTML、CSS 和动画时间轴来制作视频的工具。它的好处是画面结构、字幕、动画、素材顺序都可以用代码精确控制，而 Codex 正好擅长读文件、写代码、调试和反复修改。
二、让 Codex 检查视频制作环境
Codex 首先检查了本地的视频制作环境，确认 HyperFrames CLI 可以运行，版本是 0.6.71。
接着它读取我提供的脚本和 7 张图片，把图片复制到视频项目目录里，再根据脚本生成一个 1080x1920 的竖屏视频工程。
中间还遇到了一个常见问题：系统里没有全局 FFmpeg，导致一开始不能直接导出 MP4。Codex 后来在项目本地安装了 FFmpeg，并通过命令让 HyperFrames 使用本地 FFmpeg 完成渲染。
这一步很关键。因为做视频不是只生成一个页面，还要能真正导出成可以发布的 MP4 文件。
三、按照图片命名顺序安排镜头
最开始的视频结构是按照原脚本来的，但后来我发现有一个问题：图片出现顺序不符合我的预期。
我希望它严格按照文件命名顺序出场，也就是：
1.png → 2.png → 3.png → 4.png → 5.png → 6.png → 7.png
于是我直接告诉 Codex：“视频里面图片出现的顺序不对，请严格按照图片的命名来决定出场顺序。”
Codex 随后重新调整了时间轴，把视频改成 7 个镜头，每个镜头对应一张图片。
这个过程很像和一个视频剪辑师沟通，只不过它改的是代码和渲染工程，而不是手动拖时间线。
四、给截图加入点击操作效果
接下来，我又提出了一个更接近真实教程视频的要求：图片里面需要有操作效果，比如点击按钮的时候，要做出点击效果。
因为如果视频只是截图轮播，观众虽然能看懂大概流程，但不一定能立刻知道具体要点哪里。
Codex 就在每张图上加了操作提示效果，包括橙色高亮框、点击波纹和指尖点击动画。
比如：
第 1 张图，高亮微博视频右下角的“更多”按钮。
第 2 张图，高亮分享菜单里的“复制链接”。
第 3 张图，突出“链接已复制”的提示。
第 4 张图，突出网页输入框。
第 5 张图，突出下载按钮。
第 6 张图，突出保存弹窗里的完成按钮。
第 7 张图，突出浏览器下载记录里的 MP4 文件。
这个效果加上之后，视频就不再像普通截图展示，而更像一条真正可以发到短视频平台的操作教程。
五、根据反馈调整点击位置
中间也不是一次就完美。
第一版点击波纹的位置有偏差，尤其是第 1 张、第 2 张、第 3 张图，点击效果整体偏上。
我把问题截图发给 Codex，告诉它定位不准，需要调整。
Codex 重新抽取视频里的关键帧进行检查，然后调整每个点击点的坐标。
第 1 张图，把点击点移动到右下角“更多/…”按钮中心。
第 2 张图，把点击点下调到“复制链接”这一行，并收窄高亮框。
第 3 张图，把点击和高亮下调到“链接已复制”的黑色提示框位置。
后面的几张图也一起做了整体校正。
这个细节很重要。产品视频最怕“看起来差不多”，但用户一眼就能发现按钮没有点准。Codex 的优势就在于它可以根据反馈继续改，而不是只给你一个半成品。
六、生成字幕和中文女声旁白
除了画面，Codex 还帮我生成了中文字幕和中文女声旁白。
它先根据脚本生成 captions.srt 字幕文件和 voiceover.txt 配音稿，然后使用中文女声生成旁白音频。
后面又遇到一个小问题：当前 HyperFrames 版本导出的 MP4 没有自动把页面里的 audio 音轨混进最终视频。于是 Codex 用 FFmpeg 手动把中文女声旁白混入 MP4。
最后验证结果是：
视频时长 42 秒。
分辨率 1080x1920。
视频流是 H.264。
音频流是 AAC 中文女声。
也就是说，最后得到的不是一个只有画面的无声视频，而是一条完整的有画面、有字幕、有中文女声、有点击动画的竖屏教程视频。
七、Codex 实际做了哪些事
从实现角度看，Codex 做的不只是“帮我写几句脚本”，而是完整跑了一遍小型视频生产流程。
它做的事情包括：
读取素材和脚本。
理解视频时间轴。
复制并整理图片。
创建 HyperFrames 视频工程。
编写 index.html 动画页面。
生成 DESIGN.md 视觉规范。
生成 captions.srt 字幕文件。
生成 voiceover.txt 旁白稿。
生成中文女声语音。
给每个步骤添加高亮框、点击波纹、指尖点击动画。
运行 lint 和 inspect 检查布局。
渲染竖屏 MP4。
用 FFmpeg 混入音轨。
验证最终视频是否包含视频流和音频流。
根据反馈继续调整点击位置。
这些工作如果人工做，可能需要打开剪辑软件反复拖动、预览、导出、修改。交给 Codex 后，你只需要不断描述目标和反馈问题，它就能在项目文件里修改实现。
八、这种方式适合哪些产品视频
这种方式特别适合做产品功能教程、App 操作引导、网站工具演示、Chrome 插件宣传、SaaS 后台功能介绍、AI 工具使用教程、新功能发布视频、客服常见问题视频化等内容。
只要你已经有截图、录屏或者网页链接，再准备一份大概脚本，Codex 就可以帮你把它变成一条结构化的视频。
更重要的是，这种方式保留了真实产品界面。它不是凭空生成一个看起来很炫但和产品无关的视频，而是基于真实截图做动画、字幕、配音和操作提示。
九、可以直接丢给 Codex 的提示词
如果你也想用 Codex 给自己的产品做宣传视频，可以直接把下面这段提示词丢给它：
请使用 HyperFrames 帮我制作一条竖屏中文产品宣传/教程视频。视频规格：竖屏 9:16，分辨率 1080x1920，总时长约 40 秒，中文女声旁白，底部中文字幕，风格干净清晰，适合发布到短视频平台。素材路径如下：[在这里填入你的图片或录屏路径]。请严格按照文件命名顺序出场。视频内容如下：第 1 步：[说明第一步操作]，第 2 步：[说明第二步操作]，第 3 步：[说明第三步操作]，第 4 步：[说明第四步操作]。请帮我完成：检查 HyperFrames 是否可用，创建视频 composition，给每个操作按钮加入点击效果，包括高亮框、点击波纹和指尖点击动画，生成中文字幕 SRT，生成中文女声旁白，渲染最终 MP4，检查最终视频是否包含视频流和音频流，如果点击定位不准，请抽帧检查并调整。
如果你已经有完整脚本，也可以这样说：
我已经准备好了产品视频制作包，里面包含脚本、时间轴、字幕和配音稿。请读取这个文件：[脚本文件路径]。请使用这些素材：[素材路径列表]。要求：严格按照素材命名顺序出场，每个镜头保留 4 到 7 秒，加中文女声旁白，加底部中文字幕，操作步骤要有点击波纹、高亮框、指尖点击动画，输出竖屏 1080x1920 MP4，渲染完成后检查是否有 AAC 音轨，如果按钮点击位置偏移，请抽帧检查并微调。
十、最后总结
这次实践给我的最大感受是，AI 做视频不一定非要从零生成复杂画面。
对于很多产品宣传和教程来说，最实用的方式反而是：用真实产品截图做主体，用 AI 帮你组织镜头、加动画、配字幕、配音和导出。
这样既保留了产品真实界面，又能大幅降低制作成本。
过去做一条产品教程视频，可能需要文案、剪辑、配音、设计几个人配合。现在你只要把素材和要求给 Codex，它就能先做出一个可用版本，然后根据你的反馈继续打磨。
对于小团队来说，这就是一种非常现实的生产力提升。
