摘要：HeyGen 把自家视频渲染引擎开源了——hyperframes，一个”写 HTML 就能渲染出视频”的框架，本周 GitHub 单周暴涨 4700+ Star，总 Star 已经 5.5 万。本文带你从安装到出片完整走一遍，AI Agent 也能直接用它干活。

一、做视频，为什么越来越像”写代码”？

说到做视频，你是不是也头疼？打开剪映、PR 这类软件，时间轴、轨道、关键帧一堆概念砸过来，光是把一段字幕对上嘴型就得折腾半天。

更麻烦的是：如果你想批量出片——比如每天生成 10 条产品介绍视频——手动剪辑根本不可能。这时候最好的办法其实是：让 AI 写代码生成视频。

而 hyperframes 就是干这个的：你（或者你的 AI 助手）只管写 HTML，它负责把这段 HTML 一帧一帧”拍”成 MP4 视频。

二、hyperframes 是什么来头？

hyperframes 是视频 AI 公司 HeyGen 开源的 HTML 视频渲染框架，Apache-2.0 协议，完全免费商用。它的口号很简单：Write HTML. Render video. Built for agents.（写 HTML，渲染视频，为 AI Agent 而生）

它能火不是没道理的：

• 零学习成本的画面能力：你会写网页，就会做视频画面。CSS 布局、渐变、动画，全都是现成技能
• 真·渲染引擎：底层用 Puppeteer 逐帧截图 + FFmpeg 合成，支持 GSAP 时间轴动画
• 为 AI 而生：内置 Claude Code 插件、Codex 插件、Cursor 插件和一组 Agent Skills，AI 助手可以直接上手出片
• 数据驱动：改几个变量就能批量生成不同内容的视频，天然适合流水线

三、安装：两行命令搞定

前置要求：电脑上装好 Node.js 18+（跑前端的都懂，就是一个让 JS 能在你电脑上运行的环境），另外渲染需要 FFmpeg。

# 全局安装 CLI
npm install -g hyperframes

# 在你的项目里初始化（会装好核心 Agent Skills）
npx hyperframes init

如果你用 Claude Code，还有更省事的插件安装方式：

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

# 其他 AI 编码工具（Codex / Cursor 等）走 skills 通道
npx skills add heygen-com/hyperframes

装完后 CLI 提供三个核心命令：create（创建一个视频合成工程）、preview（浏览器里实时预览）、render（渲染导出 MP4）。

四、核心概念：5 分钟看懂它怎么工作

hyperframes 的视频工程就是一个 HTML 文件，画面靠 DOM 元素，时间靠 data-* 属性控制。看一段最典型的代码：

<div id="stage" data-composition-id="demo"
     data-start="0" data-duration="6"
     data-width="1920" data-height="1080">

  <video class="clip" src="intro.mp4" muted playsinline
         data-start="0" data-duration="6" data-track-index="0"></video>

  <h1 class="clip" data-start="1" data-duration="4" data-track-index="1">
    发布日快乐
  </h1>

  <audio src="music.wav" data-start="0" data-duration="6"
         data-volume="0.5" data-track-index="2"></audio>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("#title", { y: 40, opacity: 0, duration: 1 });
  </script>
</div>

拆开看其实就三层意思：

1. 舞台：#stage 定义视频分辨率和总时长（这里是 1920×1080、6 秒）
2. 片段：每个带 class="clip" 的元素都是一段素材，data-start 是它出现的时刻，data-duration 是持续多久，data-track-index 相当于剪辑软件里的”轨道”（数字越大越靠上层）
3. 动效：GSAP 时间轴和你平时写网页动画一模一样，渲染时会逐帧对齐到视频时间轴上

说白了：HTML 是画面，属性是时间轴，渲染器是摄像机。你不用再学剪辑软件那一套。

五、上手实操：从零渲染第一条视频

跟着做，四步出片：

第 1 步：创建工程

npx hyperframes create my-video
cd my-video

第 2 步：编辑画面。打开生成的 HTML，把标题、配色、素材换成你自己的。会写网页的人零门槛，不会写的直接把这个文件丢给 AI 助手：”帮我改个科技感开场”。

第 3 步：预览

npx hyperframes preview

浏览器里会实时播放，改完刷新即可，不用等渲染。

第 4 步：渲染出片

npx hyperframes render
# 输出 output.mp4，直接就能发布

想批量？把标题、文案做成一个 JSON 数组，脚本循环改 HTML 里的变量再 render，一晚上能出几十条——这是它比手动剪辑真正强的地方。

六、它和同类工具怎么选？

一句话：想让人剪，用剪映；想让机器批量出片，用 hyperframes。

七、常见问题

Q：完全不会写代码能用吗？
A：能，但体验打对折。它的最大价值是配合 AI 助手——你用中文描述想要的视频，AI 写 HTML，工具渲染。你负责提需求就行。

Q：渲染需要显卡吗？
A：不需要。本质是浏览器截图 + FFmpeg 编码，CPU 就能跑，配置一般的电脑也没问题，就是 1080P 长视频会慢一些。

Q：支持中文和自定义字体吗？
A：支持，就是普通的网页字体方案——把字体文件放进项目里用 @font-face 引入即可，和做网页一个道理。

Q：现在稳定了吗？
A：版本号还在 0.x（当前 0.8.158），API 可能有变动，生产环境建议锁定版本号。

📥 软件下载

夸克网盘下载：https://pan.quark.cn/s/3d9df553b02b（当天所有软件在文件夹内，进入 hyperframes 目录，含 v0.8.158 安装包 + README 安装说明）

项目主页（开源免费，Apache-2.0）：https://github.com/heygen-com/hyperframes

本文首发于 CSDN，转载请注明出处。工具信息采集于 GitHub Trending 周榜，Star 数据截至发布时。