Codex + HyperFrames 完整教程：用 AI 写 HTML 生成视频

Codex 负责理解需求、编写代码，HyperFrames 负责把代码渲染成 MP4。你要做的是把视频需求描述清楚，再逐帧验收结果。

Codex 是 OpenAI 的 AI 编程智能体，HyperFrames 是 HeyGen 开源的「HTML 转视频」框架。两者组合后，你用一句自然语言描述想要的视频，Codex 写出 HTML、CSS 和动画代码，HyperFrames 把这份代码确定性渲染成 MP4。这条路最适合产品介绍、数据可视化、代码讲解这类不依赖实拍的内容。还不熟悉 AI 编程智能体的读者，可以先看 AI Agent 是什么。

Codex 和 HyperFrames 分别是什么

先用一张表看清两个工具的定位：

Codex 能自主理解任务、读取项目、编写代码、运行命令并检查结果，支持多智能体并行和定时后台任务。它有三种使用形态：ChatGPT 里的 Codex 应用、IDE 扩展和命令行工具（CLI）。做视频这条链路主要用 CLI 或桌面应用形态，因为它需要在本地项目目录里创建文件、执行渲染命令。

HyperFrames 的官方口号是 "Write HTML. Render video. Built for agents."（写 HTML，出视频，为智能体而生）。一个视频作品就是一个 HTML 文件：用 data-* 属性声明每个片段的开始时间、时长和轨道，用 CSS 和 GSAP 等动画库描述动作，框架接管媒体播放，最终渲染出逐帧确定的 MP4。它从设计之初就面向 AI 智能体集成——官方文档明确说明，作品是任何大模型都能直接生成的纯 HTML，CLI 默认非交互式，方便智能体调用。

为什么这两个工具天然是一对

HyperFrames 官方仓库明确支持 Claude Code、Cursor、Gemini CLI、Codex 等编程智能体，并提供一键安装的技能包。这个组合的价值在于三点：

1. 代码就是视频的「源文件」。AI 文生视频每次生成结果都不同、难以精确修改；HTML 写成的视频可以像改网页一样精确调整——字号差 2 像素、动画提前 0.3 秒，都只是改一行代码的事。
2. AI 编程智能体最擅长写 HTML/CSS。Codex 的日常工作就是写网页，让它写一个「视频形状的网页」，正落在它能力最强的区间。
3. 渲染是确定性的。同一份代码渲染两次，每一帧完全一致，适合团队协作、版本管理和批量复用。

这也是「Vibe Coding」思路在视频领域的延伸：你描述感觉，AI 负责实现。还不熟悉这种工作方式的读者，可以看 Vibe Coding 入门。

准备工作：环境与账号

开始前确认三件事：

1. Node.js 22 或更高版本。HyperFrames 要求 Node.js 22+，先运行 node -v 确认。
2. FFmpeg。视频渲染依赖 FFmpeg：macOS 可用 brew install ffmpeg，Windows 从官网下载安装。
3. Codex 使用权限。Codex 依赖 ChatGPT 账号（Plus/Pro 等套餐包含使用额度，以官方页面为准）。

安装 Codex CLI：

npm i -g @openai/codex

四步做出第一支视频

第一步：给 Codex 安装 HyperFrames 技能

在任意目录执行：

npx skills add heygen-com/hyperframes

这个命令会打开一个技能选择器，选择 Core Skills（核心技能组）即可——它会安装 /hyperframes 路由技能和核心领域能力，具体创作工作流会在使用时按需自动安装。

如果在智能体或脚本里非交互执行，改用官方推荐的命令：

npx hyperframes skills update

它直接从 GitHub 主分支安装核心技能集，结果更精确。关于技能安装位置、目录结构和不生效排查，可参考 Codex Skill 安装指南。

第二步：用一句自然语言描述视频

新建一个空目录，在 Codex 里直接描述需求。官方给出的示例提示词是：

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

（用 /hyperframes 创建一个 10 秒的产品介绍视频：标题淡入、背景视频、轻微的背景音乐。）

中文同样有效，一个可直接套用的中文模板：

使用 /hyperframes 技能，帮我制作一支 15 秒的竖版短视频：
1. 主题：介绍我们团队的 AI 周报工具；
2. 画面：前 5 秒大标题「每周一，自动收到你的 AI 周报」淡入；
   中间 7 秒逐条展示三个功能点；最后 3 秒放 logo 和下载引导；
3. 风格：简洁、蓝色系、无衬线字体；
4. 音乐：轻微的背景音乐，结尾淡出。

需求写得越像「验收标准」，结果越好：时长、画面顺序、风格、每段停留时间都交代清楚。

第三步：让 Codex 生成并自检

Codex 会按技能内置的工作流执行：先规划（可能生成 BRIEF.md 向你确认需求），再写 HTML 组合文件，接着运行检查命令：

npx hyperframes check    # 语法、布局、动画、对比度综合检查
npx hyperframes preview  # 浏览器实时预览，可逐帧拖动时间线

预览不满意就直接对 Codex 说，比如「标题再大一点」「第二段停留时间延长到 2 秒」——因为改的是代码，每次修改都精确可控。

第四步：渲染出片

确认预览效果后执行：

npx hyperframes render   # 渲染为 MP4

渲染完成的 MP4 就在项目目录里，可直接发布到抖音、B 站、视频号等平台。

HyperFrames 能做哪九类视频

官方技能包内置九个创作工作流，在提示词里直接点名即可：

对内容团队来说，产品介绍和数据可视化是投入产出比最高的两类：改数据、换文案都是改几行代码的事。

和其他做视频的方式怎么选

两点提醒：

1. 认准官方渠道。搜索 "HyperFrames" 会看到一些名称相近的「文字生成视频」网站，它们与 HeyGen 开源的 HyperFrames 框架无关。开源框架的官方入口只有三个：GitHub 仓库 heygen-com/hyperframes、官方文档 hyperframes.heygen.com 和在线体验站 hyperframes.dev。
2. 代码化视频和 AI 生成视频是两回事。前者你精确控制每一帧，适合品牌规范严格、需要反复修改的场景；后者胜在画面真实感和想象力。两者可以配合：用 AI 生成素材片段，再用 HyperFrames 组装成片。

需要实拍、数字人方向选型的读者，可以继续看 AI 视频生成工具怎么选。

五个常见坑

1. 一次让 AI 做太长的视频。从 15-30 秒开始，跑通完整流程后再加长。
2. 需求描述模糊。只说「做个好看的视频」，AI 只能靠猜。写清时长、顺序、风格和文案。
3. 跳过 preview 直接 render。渲染耗时，先用 preview 逐帧检查能省大量返工。
4. 忽视素材版权。代码里引用的字体、背景音乐、图片素材，商用前要确认授权；官方技能内置了素材解析能力，但授权责任始终在使用者。
5. Node 版本过低。低于 22 会出现各种渲染异常，先 node -v 确认再排错。

结论

Codex + HyperFrames 的本质是：把「做视频」变成「写网页」，再把「写网页」交给 AI。它最擅长产品介绍、数据可视化、知识讲解这类信息密度高、需要反复修改的视频；真人出镜、实拍情感类内容则不适合。建议从一支 15 秒的产品短视频开始，跑通「描述 → 生成 → 预览 → 渲染」的完整流程，再决定是否把它纳入日常工作流。