用写网页的方式”码”出视频：HyperFrames 让 AI Agent 拥有了视频生产能力

智源·AI 开源观察技术创作者 2026-09-07 15 阅读

如果你用过 AI 编程工具生成代码，再让它生成一段视频——大概率会得到一堆模糊的描述，或者直接报错。问题不在于模型，而在于没有一个框架能承接”从文本描述到可预览视频”这个闭环。

HyperFrames 试图解决的就是这个问题。它来自 HeyGen（那个做 AI 数字人的公司），思路很直接：用写 HTML 的方式定义视频，用浏览器渲染，用 FFmpeg 输出 MP4。整个链路是可复现、可调试、可被 AI Agent 驱动的。

它在做什么

HyperFrames 是一个开源的视频渲染框架，核心逻辑是：把视频的每一帧当成一个 HTML 页面，用 data-* 属性描述时间线、轨道和元信息，然后通过 Puppeteer 逐帧截图 + FFmpeg 编码，最终输出确定性 MP4。

举一个最简单的例子——写一个 5 秒的渐入标题：

<div data-video="title-fade">
  <h1 data-slide="0-5s" data-animate="fade-in">Hello World</h1>
</div>

对应的命令行渲染：

npx hyperframes render index.html --output intro.mp4

整个过程不需要视频编辑器，不需要 AE，不需要 After Effects。对于熟悉 Web 技术的开发者来说，这比学一套新的动画语法要自然得多。

传统的视频工具都有一个共同特点：面向人类操作员设计。界面、拖拽、时间轴——这些对 AI Agent 来说全是障碍。

HyperFrames 的设计从一开始就考虑了 Agent 场景。它提供 20 个官方 Skills，兼容 Claude Code、Cursor、Gemini CLI、Codex 等主流 AI 编程工具。安装方式：

npx skills add heygen-com/hyperframes

装完之后，Agent 可以直接理解”创建一个 10 秒的产品介绍视频，包含渐入标题、背景视频和背景音乐”这样的自然语言请求，并自主完成从规划到输出的全流程。

这背后是 HyperFrames 设计的一条 Agent 生产循环：规划 → 写有效 HTML → 接入 seekable 动画 → 添加媒体资源 → lint 检查 → 预览 → 渲染输出。Skills 把这个流程固化成了 Agent 可以执行的步骤。

适合的场景：

不适合的场景：

技术依赖方面：Node.js >= 22（必须），FFmpeg（必须，Puppeteer 负责渲染，FFmpeg 负责编码）。Discord 上有活跃社区，v0.8.30 是最新稳定版（2026-09-06）。

GitHub 上另一个类似项目是 Remotion，同样是用代码写视频，但两者的设计目标有明显差异：

简单说：Remotion 让人写代码生成视频，HyperFrames 让 AI Agent 写代码生成视频。

截至 2026-09-07：

本地跑一遍 Quickstart：确保 Node >= 22 和 FFmpeg 就绪，用 10 行 HTML 产出一个真实 MP4，感受确定性渲染的逻辑
给 AI 编程工具装上 Skills：如果你的团队在用 Claude Code 或 Cursor，运行 npx skills add heygen-com/hyperframes，然后让 Agent 用自然语言生成第一个视频
看官方 Showcase 和 Playground：https://hyperframes.heygen.com/showcase 有真实案例，https://www.hyperframes.dev/ 是 Playground，可以直接在浏览器里试写 HTML 预览效果
加入 Discord 社区：有 20+ 官方 Skills，有 Agent 集成讨论，是目前最活跃的 HyperFrames 互助渠道

相关链接

0 条评论

登录后可评论。