乐于分享
好东西不私藏

Codex 安装 HyperFrames:用 AI 自动生成视频教程

Codex 安装 HyperFrames:用 AI 自动生成视频教程

最近我发现了一个很适合 AI 自动化视频生产的工具:HyperFrames

它不是传统意义上的“文生视频”工具,而是一个 HTML-to-Video 视频生成框架。简单说,就是让 Codex 这样的 AI 编码助手先写出 HTML、CSS、JavaScript 动画页面,然后再用 HyperFrames 把这个页面逐帧渲染成 MP4 视频。

这套方式特别适合做知识科普视频、产品介绍视频、数据动态图、短视频片头、课程内容和批量化内容生产。

一、HyperFrames 是什么?

HyperFrames 是 HeyGen 开源的一个视频渲染框架。它的核心思路很直接:

用写网页的方式写视频,用浏览器渲染画面,再导出成 MP4。

也就是说,视频里的标题、图片、字幕、背景、转场、图表动画,都可以用 HTML/CSS/JS 来描述。Codex 擅长写代码,所以它可以根据你的文字需求自动生成视频项目。

比如你对 Codex 说:

帮我用 HyperFrames 生成一个 10 秒的 AI 副业介绍视频,竖屏 9:16,有标题动画、字幕、背景音乐和结尾引导。

Codex 就可以帮你创建项目、写页面、写动画、调整样式,最后调用 HyperFrames 渲染出视频。

二、安装前准备

使用 HyperFrames 之前,电脑需要先准备两个东西:

  1. Node.js 22 或以上版本
  2. FFmpeg 视频编码工具

先检查 Node 版本:

node --version

如果版本低于 22,需要先升级 Node.js。

再检查 FFmpeg:

ffmpeg -version

如果没有安装,Mac 可以用:

brew install ffmpegWindows 可以用:winget install ffmpegUbuntu / Debian 可以用:sudo apt install ffmpeg

三、在 Codex 里安装 HyperFrames

HyperFrames 官方推荐给 AI 编码助手安装对应的 skills,这样 Codex 会更懂 HyperFrames 的项目结构、动画写法和渲染命令。

在终端运行:

npx skills add heygen-com/hyperframes

如果你使用的是支持 Codex 插件系统的环境,也可以安装 HyperFrames 的 Codex 插件:

codex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets

安装完成后,Codex 就可以更稳定地生成 HyperFrames 视频项目。

四、创建第一个视频项目

接下来创建一个视频项目:

npx hyperframes init my-videocd my-video

如果想跳过交互式选择,可以使用:

npx hyperframes init my-video --non-interactive --example blankcd my-video

项目创建完成后,一般会包含这些文件:

my-video/  index.html  meta.json  compositions/  assets/

其中最重要的是 index.html,它就是视频的主体画面。

五、让 Codex 自动生成视频内容

进入项目目录后,直接让 Codex 写视频即可。

你可以这样提示:

使用 HyperFrames,帮我生成一个 15 秒的竖屏短视频。主题:Codex 自动生成视频比例:9:16风格:科技感、干净、适合短视频平台内容:1. 开头 3 秒:标题“Codex 自动生成视频”2. 中间 8 秒:展示从提示词到代码、再到 MP4 的流程3. 结尾 4 秒:出现“用 AI 搭建自己的内容生产线”要求:有字幕动画、背景动效、淡入淡出转场。

Codex 会根据这个需求修改 index.html,加入布局、字幕、动画和时间轴。

六、预览视频

生成代码后,可以先预览:

npx hyperframes preview

它会启动本地预览页面。你可以一边让 Codex 修改画面,一边实时查看效果。

比如继续让 Codex 调整:

把标题放大一点,背景换成深色科技风,字幕节奏更像短视频。

或者:

改成小红书风格,画面更明亮,字体更大,节奏更轻快。

七、渲染成 MP4

确认效果后,运行:

npx hyperframes render --output output.mp4

渲染完成后,就会得到:

output.mp4

这就是最终视频文件。

八、为什么 Codex + HyperFrames 很适合自动化视频?

传统视频制作需要脚本、设计、剪辑、字幕、导出多个步骤。Codex + HyperFrames 的优势是:

第一,视频可以代码化。所有画面和动画都写在文件里,方便修改、复用和批量生成。

第二,适合 AI 参与。Codex 本来就擅长写 HTML、CSS 和 JavaScript,所以它可以直接生成视频画面。

第三,结果更稳定。HyperFrames 是逐帧渲染,适合做可重复生成的视频模板。

第四,适合批量生产。你可以准备 100 个选题,让 Codex 套用同一个视频模板,批量生成不同内容的视频。

九、适合做哪些视频?

这套流程很适合:

  • AI 工具介绍视频
  • 产品功能演示视频
  • 数据图表动画视频
  • 知识科普短视频
  • 课程片头片尾
  • 小红书/抖音/B站竖屏内容
  • 自动化营销视频
  • 文章转视频、文档转视频

它不太适合直接生成真人电影级画面。它更像是“程序化视频制作工具”,适合做清晰、可控、可批量生产的视频内容。

十、总结

Codex + HyperFrames 的核心价值,不是简单地“让 AI 生成一个视频”,而是让视频制作变成一套可以自动化的生产流程。

你只需要描述需求,Codex 负责写代码,HyperFrames 负责预览和渲染,最后输出 MP4。

如果你想做 AI 内容副业、批量短视频、课程素材、产品介绍或者自动化内容生产,这套工作流非常值得尝试。