Codex × HyperFrames：用代码生成动画视频

HyperFrames 和前段时间很火的 Remotion 都属于代码化的视频生成：

1. Remotion：使用 React 写视频
2. HyperFrames：使用 HTML、CSS 或 JS 做视频

如果你想做一些轻量化的视频，比如网页转视频、文档转视频等，那么使用 HyperFrames 就是一个非常不错的选择。

在半桶水课程里，它对应的是“视觉与页面 / 内容表达 / 办公交付”的工作流：把一段内容、一本书或一个观点，转成短视频脚本、分镜画面和可预览的视频文件。

这节解决什么

很多人想做视频，但不知道从哪里开始：先写脚本，还是先做画面？要几页？每页多久？HyperFrames 的价值，是把视频拆成代码化页面和渲染流程，让 Codex 可以逐步生成、预览和修改。

这节练的是：让 Codex 先拆脚本和分镜，再用 HyperFrames 生成可预览的视频产物。

工作流卡

项目	内容
输入	主题材料、视频用途、时长、风格、画面比例、参考样片
Codex 负责	拆脚本、写分镜、生成页面帧、渲染视频、返回文件路径
人类判断	文案是否准确、节奏是否顺、画面是否贴合场景
输出	视频文件、图片帧、脚本、分镜说明
验收	文件能播放、时长合理、文字不溢出、画面不空白、内容可复核

适合谁

这一节适合：

• 想把文章、课程、读书笔记转成短视频的人。
• 需要做产品介绍、课程预告、活动宣传的人。
• 想用代码化方式生成可迭代视频草稿的人。

第一次练习建议做 10-20 秒小视频，不要直接做完整课程片。

1. 安装插件

打开 Codex 桌面 App 的左侧边栏，找到"插件和技能"。进入后搜索 HyperFrames 即可找到该插件，直接安装即可。

HyperFrames 也有对应的 Skill（技能），两者都可以使用。大家可以选择合适的或自己喜欢的方式进行安装。

---

2. 如何使用

我直接给了它一本书的内容，然后让它根据这本书的内容去制作视频，它就会调用这个技能去完成对应的任务。

任务完成之后，它会告诉我们返回本地文件的地址，点击即可跳转查看具体内容。

如果你仔细观察，会发现实际上它是生成了几张 JPEG 格式的图片，然后将图片组装成视频。大概是这样一个过程。

第一次生成的视频可能并没有想象的那么完美，这时需要继续增加需求。

比如针对以下方面进行多次迭代，效果可能就会更好：

1. 画面表现
2. 生成的具体效果
3. 每一页的文案、配色、背景等具体细节

这需要我们的耐心和一步一步的尝试。

技巧： 如果你有目标视频，可以直接把成品的视频效果发给它，让它模仿去制作，做出来的效果可能会更加符合要求。

如果你对于 Remotion 制作视频的方式感兴趣，那么我推荐王老师在 GitHub 上分享的开源项目 Remotion的skill，你可以进行参考学习。

地址：https://github.com/wshuyi/remotion-video-skill

你要重点检查什么

• Codex 是否先列出脚本和分镜，再开始生成。
• 每一帧的文案是否过长，是否会被裁切。
• 视频文件是否能播放，时长和比例是否符合预期。
• 画面是否只是堆字，还是能表达重点。
• 如果使用参考视频，是否只是学习风格，而不是照抄内容。

验收标准

完成这个案例后，至少确认：

• HyperFrames 或对应 Skill 已安装并可调用。
• Codex 输出了脚本、分镜或帧列表。
• 本地视频文件路径可打开。
• 视频播放时画面、文字、节奏没有明显错误。
• 能根据一次反馈继续迭代，而不是从零重做。

复用方式

可以保存成这个任务模板：

请使用 HyperFrames 生成一个短视频草稿。

主题：
受众：
时长：
画面比例：
风格参考：
必须包含：
禁止包含：
验收标准：

生成前请先输出脚本和分镜；生成后请返回视频文件路径、预览方式和需要人工检查的地方。