HyperFrames GitHub 仓库首页

概述

HeyGen 今天正式开源了 HyperFrames——一个让 AI Agent 通过写 HTML 来生成视频的框架。核心逻辑很直接：用 HTML 定义画面和动画，用 Headless Chrome 逐帧渲染，用 FFmpeg 合成 MP4。同一个 HTML 文件可以在浏览器里实时预览，也可以在 CI 里无头渲染出确定性的视频输出。

HyperFrames 已获得 37,000+ GitHub Star，由 HeyGen 内部孵化并开源（Apache 2.0 许可），没有逐帧计费或商用限制。

产品基因

HeyGen 是目前最成功的 AI 视频生成产品之一，年收入超过数亿美元。HyperFrames 是它的技术底座的开源版本——意味着这个框架已经经过 HeyGen 自身的高并发生产环境验证，不是实验室项目。

项目的设计哲学与市面上大多数视频工具相反：不是用 GUI 拖拽，而是让写代码的人（以及 AI Agent）用最自然的表达方式——HTML——来定义视频。 这个选择有几个好处：

Agent 友好：所有主流 AI 编码工具（Claude Code、Cursor、Gemini CLI、Codex）都在训练写 HTML。不用学新语言，不用处理 JSX 编译链
零构建：一个 index.html 文件就能 preview，不需要 webpack/Vite
确定性渲染：相同输入产生完全相同的关键帧和输出，适合回归测试和 CI 管道

核心功能

HyperFrames 的工作流可以理解为三个步骤：

1. 定义——写一个 HTML 文件，通过 data-* 属性标记画面元素的时间线

<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
  <video class="clip" data-start="0" data-duration="6" data-track-index="0" src="intro.mp4" muted playsinline></video>
  <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>
  <audio data-start="0" data-duration="6" data-track-index="2" data-volume="0.5" src="music.wav"></audio>
</div>

每个元素用 data-start 和 data-duration 定义时间点，用 data-track-index 指定轨道层级。动画通过 GSAP、CSS Animations、Lottie、Three.js、Anime.js、WAAPI 等适配器驱动。

2. 预览——npx hyperframes preview 在浏览器里实时预览，支持热重载

3. 渲染——npx hyperframes render 启动 Headless Chrome + FFmpeg 管道，输出 MP4。渲染可以在本地执行，也可以通过 AWS Lambda 分布式部署

Agent Skills 体系

HyperFrames 最独特的设计是它的 19 个 Agent Skill——这些不是教程，而是可以被 AI 编码工具直接加载的技能包。安装方式：

npx skills add heygen-com/hyperframes --full-depth

之后 Agent 就学会了 HyperFrames 的生产循环：规划视频 → 写合法 HTML → 配置可寻帧动画 → 添加媒体 → Lint → Preview → Render。

预置的创建工作流覆盖了 10 个常见场景：

Skill	适用场景
`/product-launch-video`	产品发布/功能公告视频，从 URL 或简介直接生成
`/faceless-explainer`	纯文本概念讲解，无产品无 URL，全部由 LLM 生成视觉
`/pr-to-video`	GitHub PR 转 changelog/feature 演示视频
`/embedded-captions`	给已有视频添加字幕/标题
`/motion-graphics`	10 秒内的动态图形（kinetic type、chart hit、logo sting）
`/slideshow`	演示文稿/交互式 Deck（非视频输出，可导航）
`/general-video`	自由创作——品牌/Sizzle Reel 等长片

Frame.md：为摄像头重写设计系统

HyperFrames 引入了一个叫 frame.md 的概念——把品牌设计系统（通常以 design.md 形式存在于 Web 语境）转换成摄像头可理解的设计规范。同样是配色、字体、间距，但针对的是 1920x1080 的视频帧，而不是 1440px 的浏览器窗口。AI Agent 有了 frame.md 就不再需要猜测缩放比例和画面构图。

亮点对比

HyperFrames 最直接的竞品是 Remotion（基于 React 的视频渲染框架）。

维度	HyperFrames	Remotion
创作方式	HTML + CSS + seakable 动画	React 组件（JSX）
构建步骤	不需要 build step	需要打包工具
Agent 接替	纯 HTML，AI 天然会写	JSX/React 项目结构
许可	Apache 2.0	Source-available Remotion License
分布式渲染	AWS Lambda	Remotion Lambda（更成熟）

适合谁：已经有 AI 编码管道的内容团队、需要自动化视频输出的产品团队、不想绑定 React 生态的开发者。

不太适合谁：希望拖拽式操作的视频创作者、对视频画质要求极高的专业剪辑师——HyperFrames 的输出质量受限于 HTML 渲染和 Chrome 的截帧能力。

限制与值得注意的点

Node.js 22+ 和 FFmpeg 是硬依赖
非 Web 动画运行时（如 After Effects 插件）无法接入
Agent Skills 当前只支持 Claude Code、Cursor、Gemini CLI、Codex 等，不支持通用的 LLM API 调用（但纯 HTML 文件本身就是通用的）
AWS Lambda 渲染需要自行部署，不是开箱即用

总结

HyperFrames 解决的真正问题不是「怎么写 HTML 生成视频」——这是它展示出来的接口。真正的产品判断是：视频生产在 2026 年已经从创意工作变成了工程问题。当 AI 可以写代码的时候，用一个 AI 最擅长的格式（HTML）来定义视频，比用任何专有的时间线编辑器都更高效。

QuickStart：

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # 浏览器预览
npx hyperframes render       # 渲染 MP4

文档：hyperframes.heygen.com
GitHub：github.com/heygen-com/hyperframes
Playground：hyperframes.dev

HyperFrames | HeyGen 开源的 HTML 转视频框架

概述