HyperFrames：写 HTML 就能出视频，HeyGen 开源的 AI 视频框架

GitHub: heygen-com/hyperframes | ⭐ 6,100+ | Apache-2.0 | Node.js >= 22

如果你以为视频只能用 AE、Premiere 剪出来——这个项目会颠覆你的认知。

HyperFrames 是 AI 数字人头部公司 HeyGen 开源的视频渲染框架。它的核心理念只有一句话：

Write HTML. Render video.

写 HTML，出视频。就这八个字，背后是一整套为 AI Agent 设计的视频生产管线。

它是什么？

HyperFrames 不是一个"视频编辑器"，而是一个视频渲染引擎。你用 HTML 和 CSS 动画定义每一帧的内容，它负责逐帧截图、编码、合成音频，最终输出 MP4 文件。

听起来简单？但它解决了一个真正的痛点：让 AI Agent 能自动做视频。

AI Agent 天生就会写 HTML。给它一个视频框架，让它写 AE 工程文件？它不会。让它写 HTML？这是它的母语。

工作原理

第一步：用 HTML 定义视频

<div data-composition-id="my-video" data-width="1920" data-height="1080">
  <!-- 0-5 秒：背景视频 -->
  <video data-start="0" data-duration="5" src="intro.mp4" muted playsinline></video>

  <!-- 2-5 秒：Logo 出现在第 2 秒 -->
  <img data-start="2" data-duration="3" data-track-index="1" src="logo.png" />

  <!-- 0-9 秒：背景音乐 -->
  <audio data-start="0" data-duration="9" data-volume="0.5" src="music.wav"></audio>
</div>

data-start 定义元素出现时间，data-duration 定义持续时间，data-track-index 定义轨道层级。多个轨道叠加，就是完整的视频时间轴。

第二步：预览

npx hyperframes preview

浏览器里实时预览效果，支持热重载。改代码即时看到变化。

第三步：渲染

npx hyperframes render

Puppeteer 逐帧截图 + FFmpeg 编码 = MP4 视频。确定性强，同一份输入永远得到相同的输出。

杀手级能力

1. AI Agent 原生支持

这是 HyperFrames 最独特的地方。它不只是"一个框架"，而是专门为 AI Agent 设计的。

一行命令安装 4 个 AI 技能：

npx skills add heygen-com/hyperframes

这会在 Claude Code、Cursor、Gemini CLI、Codex 等工具里安装：

安装后，你只需对 AI 说：

"帮我做一个 10 秒的产品介绍视频，标题渐入，配背景音乐。"

"把这个 PDF 总结成 45 秒的路演视频。"

"做一个 9:16 的抖音风格视频，字幕弹跳，配 TTS 旁白。"

AI 会自动搭建项目结构、编写动画代码、渲染成 MP4。

2. 网站克隆

这是我最惊艳的功能：

hyperframes capture https://stripe.com

一行命令，它会：

• 截取网站完整页面截图
• 提取配色、字体、组件、图标等所有设计资产
• 用 AI 生成 DESIGN.md 设计规范文档
• 自动提取 Lottie 动画和 WebGL Shader 代码
• 生成 CLAUDE.md + .cursorrules 给 AI Agent 用

然后你可以用这个品牌设计系统生成视觉一致的视频。

3. 50+ 组件库

npx hyperframes add flash-through-white   # WebGL 转场
npx hyperframes add instagram-follow      # Instagram 关注按钮
npx hyperframes add data-chart            # 动态图表

包括：社交叠加层（点赞、关注、评论气泡）、Shader 转场（14 种 WebGL 特效）、数据可视化（柱状图、饼图）、电影级特效（光晕、粒子、模糊）。

4. TTS + 字幕一体化

HyperFrames 内置 TTS 支持，直接生成语音旁白：

npx hyperframes tts "欢迎使用 HyperFrames" --voice zh-CN

字幕自动同步。你甚至可以做音频响应动画——音量大的时候元素放大，低频时背景闪烁。

5. 可视化编辑器（Studio）

不只是命令行工具。HyperFrames 提供了一个浏览器里的可视化编辑器 @hyperframes/studio，拖拽调整时间轴、实时预览、所见即所得。

快速上手

方式一：让 AI 帮你做

npx skills add heygen-com/hyperframes
# 然后在 Claude Code 里说：
# "/hyperframes 帮我做一个产品介绍视频"

方式二：手动开始

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

架构组成

HyperFrames 是 Monorepo 结构，包含 7 个子包：

适合什么场景？

非常适合：

• AI Agent 自动批量生成视频（日报、周报、产品更新）
• 社交媒体内容生产（抖音、小红书、TikTok、Reels）
• 数据可视化视频（排行榜、趋势图）
• 产品演示和教程
• 带字幕/旁白的短视频
• 需要程序化、可编程地生成视频的任何场景

不太适合：

• 复杂的影视后期（AE/PR 级别的合成、调色）
• 需要精确手动微调的视频制作
• 完全不懂 HTML 和 CSS 的用户

冷静评价

优点：

• HeyGen 出品，工业级技术背书——不是玩具项目
• HTML 原生，AI Agent 天生就会写
• 完整的 Skills 系统，Agent 集成体验一流
• 50+ 组件开箱即用
• 确定性渲染，适合自动化流水线
• 网站克隆功能是差异化亮点
• TTS + 字幕一体化，做短视频很顺手
• Apache-2.0 许可，商用无限制
• Studio 可视化编辑器

需要注意的：

• Node.js >= 22 是硬性要求
• 需要 FFmpeg（渲染依赖）
• 项目 2026 年 3 月才开源，社区还在成长
• 视频质量最终取决于你写 HTML/CSS 动画的水平
• Shader 转场需要一定 WebGL 知识才能自定义

总结

HyperFrames 是目前最完整的"HTML → 视频"开源方案，而且是第一个真正为 AI Agent 设计的视频框架。

它的价值不只是"又一个视频工具"——它打通了一条从 AI 理解到视频生产的完整路径。AI 会写 HTML，HTML 能定义视频，视频能被渲染。这是一个闭环。

HeyGen 把内部使用的视频引擎开源，说明他们相信程序化视频生产是未来。我觉得他们是对的。

仓库：https://github.com/heygen-com/hyperframes 文档：https://hyperframes.heygen.com 快速开始：npx hyperframes init my-video && cd my-video && npx hyperframes preview

标签：HyperFrames, HeyGen, AI 视频, HTML 转视频, 开源, GSAP, 程序化视频, AI Agent, FFmpeg