HyperFrames：写 HTML 就能出视频，HeyGen 开源的 Agent 视频框架
HyperFrames：写 HTML 就能出视频，HeyGen 开源的 Agent 视频框架
一句话概括这个项目：Write HTML. Render video. Built for agents.——写 HTML，渲出视频，专为 agent 而生。
这是 HeyGen 开源的 HyperFrames。它做的事情说起来很简单：把一段 HTML、CSS、媒体素材加上"可寻址的动画"，编译成一段确定性的 MP4。但这句话背后的取舍很有意思——它没有赌 React，没有赌某个专有的时间轴格式，而是把赌注全押在"HTML 本身就是最好的视频描述语言"上。
理由也很直接：AI agent 本来就会写 HTML。与其教它一套新的 DSL，不如让它继续写它最熟的东西。
这个项目在 GitHub 上已有 6.2 万 Star，Apache 2.0 协议，TypeScript 编写。下面把它拆开看一遍。
目录
- 一、它到底在解决什么问题
- 二、核心思路：把视频"写"成 HTML
- 三、三种上手方式
- 四、21 个 Skills：agent 的视频生产流水线
- 五、frame.md：把设计系统"翻译"给摄像机
- 六、Catalog、Stack 与代码结构
- 七、和 Remotion 比，差别在哪
- 八、几个值得注意的细节
一、它到底在解决什么问题
传统的程序化视频渲染（code-to-video），主流路线是 Remotion：用 React 组件描述画面，配合打包器构建，再用 headless Chrome 逐帧截图、FFmpeg 合成。
这套方案很强，但有两个"摩擦点"：
- 它要求你会 React。对于一个只想把一张数据图做成 10 秒短片的场景，写一个 React 项目、装一堆依赖、跑构建，成本偏高。
- 它不天然适合 agent。AI coding agent 写 JSX 也会写，但一个完整的 React 工程涉及打包、依赖解析、目录结构，出错的面积比单文件 HTML 大得多。
HyperFrames 的赌注就是针对这两点：用纯 HTML 做描述层，去掉构建步骤，让一份 index.html 直接能播、能渲。
二、核心思路：把视频"写"成 HTML
HyperFrames 的 composition 就是一个 HTML 文件，时间信息全部由 data-* 属性承载。
Launch day
这段代码几乎是自解释的，但有几个设计点值得单独拎出来讲。
2.1 时间线不是"时间轴对象"，而是 DOM 属性
data-start/data-duration：这个元素在时间轴上的位置。data-track-index：它落在第几条轨道上（相当于图层）。class="clip"：标记这是一个参与合成的片段。data-composition-id：整个舞台的标识。
好处是一切都可读、可 diff、可被程序解析。一个 agent 生成这份 HTML 后，人类可以直接打开浏览器看效果，不需要跑任何构建。
2.2 动画必须"可寻址"（seekable）
这是整个框架最关键的技术约束。视频渲染不像网页播放——渲染器需要跳到任意一帧并让画面呈现那一帧应有的状态。这要求动画不能依赖"真实时钟"，必须能被"问"出第 t 秒长什么样。
HyperFrames 的约定是：把时间线挂到 window.__timelines.<compositionId>。渲染器拿到这个对象后，就能 seek 到指定时间点再去截图。README 里也专门点出这是它相对 Remotion 的差异点之一——"library-clock animations 在 HyperFrames 里必须 seekable, frame-accurate"。
2.3 渲染管线：headless Chrome 逐帧 + FFmpeg 编码
flowchart TB Author["Author / AI agent writes HTML"] --> Compose["Composition: data-* timing + class=clip"] Compose --> Preview["hyperframes preview (live reload in browser)"] Compose --> Lint["hyperframes lint / check"] Lint --> Render["hyperframes render"] Render --> Chrome["Headless Chrome seeks each frame"] Chrome --> Ffmpeg["FFmpeg encodes frames"] Ffmpeg --> Mp4["Deterministic MP4"] Compose --> Adapters["Frame adapters: GSAP / CSS / Lottie / Three.js / Anime.js / WAAPI"] Adapters --> Chrome Render -.-> Lambda["AWS Lambda distributed render (optional)"] Render -.-> Cloud["HeyGen cloud render (optional)"]
因为每一帧都是"寻址 + 截图"得到的，而不是实时录屏，所以同样的输入永远产出同样的视频。这一点对 CI、回归测试、自动化流水线非常关键——README 里甚至用 Git LFS 存了约 240MB 的 output.mp4 作为黄金基线，用来做逐帧回归比对。
三、三种上手方式
HyperFrames 同时照顾了三类用户：AI coding agent、想快速试的人、要接进自己系统的工程师。
3.1 给 AI coding agent 用（推荐）
以 Claude Code 为例，安装版本化插件：
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes然后在 /plugin → Marketplaces 里给 hyperframes marketplace 打开自动更新，之后用 /hyperframes:hyperframes 调用。插件指南里还覆盖了 Copilot、VS Code、Cursor、Gemini CLI。
如果只想装"独立 skills"（包括 OpenCode），用：
npx skills add heygen-com/hyperframes装完之后，直接对 agent 说一句自然语言就行：
Using
/hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.
3.2 手动 CLI
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 浏览器里带热重载预览
npx hyperframes render # 渲染成 MP4环境要求：Node.js 22+ 和 FFmpeg。
3.3 整体流程
agent 的工作闭环被 skills 教成了一条清晰的流水线：规划视频 → 写合法 HTML → 接上可寻址动画 → 补媒体素材 → lint → 预览 → 渲染。
四、21 个 Skills：agent 的视频生产流水线
这是这个项目最有辨识度的部分——它没有把这些知识塞进一个巨大的 system prompt，而是拆成 21 个按需加载的 skills，分三层组织。
flowchart TB Router["/hyperframes router (read first)"] --> CW["Creation workflows"] Router --> DS["Domain skills (on demand)"] CW --> W1["product-launch-video"] CW --> W2["faceless-explainer"] CW --> W3["pr-to-video"] CW --> W4["embedded-captions"] CW --> W5["talking-head-recut"] CW --> W6["motion-graphics"] CW --> W7["music-to-video"] CW --> W8["slideshow"] CW --> W9["general-video"] DS --> D1["hyperframes-core"] DS --> D2["hyperframes-animation"] DS --> D3["hyperframes-keyframes"] DS --> D4["hyperframes-creative"] DS --> D5["media-use"] DS --> D6["hyperframes-cli"] DS --> D7["hyperframes-audio"] DS --> D8["hyperframes-registry"]
第一层是路由：/hyperframes。它是一张"能力地图"，任何"帮我做个……"的请求都先经过它，由它决定走哪条工作流。
第二层是创作工作流（Creation workflows），把常见的视频类型各做成一个 skill：
| Skill | 用途 |
|---|---|
/product-launch-video |
任意网站的产品发布/宣传片，或站点导览、社交短片（best 30–90s） |
/faceless-explainer |
从任意文本讲解一个概念，画面全由 LLM 生成（排版/抽象/图表/数据可视化） |
/pr-to-video |
把 GitHub PR 变成 changelog / feature reveal / 修复说明（通过 gh CLI 读取） |
/embedded-captions |
给已有的口播视频加字幕（素材不动） |
/talking-head-recut |
给口播/访谈/播客加设计感图形层（下三分之一、数据标注、动态标题） |
/motion-graphics |
10 秒以内的无旁白动效（动态字体、数据动画、logo sting、透明叠加） |
/music-to-video |
音乐 → 卡点视频（歌词/幻灯片/动感宣传） |
/slideshow |
演示文稿 / pitch deck（可导航的 deck，不是渲染出的视频） |
/general-video |
兜底的自由创作，也是"协作模式"的家 |
/remotion-to-hyperframes |
把已有的 Remotion（React）composition 单向迁移到 HyperFrames |
第三层是领域 skill（Domain skills），是被上面的工作流按需调用的"原子能力"：composition 契约（hyperframes-core）、全部动画知识（hyperframes-animation）、seek-safe 关键帧（hyperframes-keyframes）、创意方向（hyperframes-creative）、媒体操作系统（media-use）、CLI 开发循环（hyperframes-cli）、音频混音（hyperframes-audio）、registry 块与组件（hyperframes-registry），再加一个 /figma 负责把 Figma 资产重建为动画。
这种"一个路由器 + 一组工作流 + 一堆原子能力"的拆法，是这套框架给 agent 友好的答案：agent 不需要一次吞下所有知识，只需要在正确的时刻加载正确的那一个 skill。
五、frame.md：把设计系统"翻译"给摄像机
这是项目里我觉得最妙的一个概念。
README 的原话是：每个品牌都有一个 design.md，但没有一个是写给摄像机看的。
frame.md 就是那层缺失的翻译：它拿走你在 Web 语境下的设计规范，然后为画框把它倒过来——同一套 token、同一套规则，但重写成"AI agent 能据此编排一支宣传片"的形式，而不用去猜尺度、也不用把 Web 的横幅、导航栏这些"浏览器填缝件"搬进视频。
产出是一份 DESIGN.md 的超集，整条工具链都能读它。它的原则被概括成一句话：Atoms stay sacred. Composition stays free. Numbers come from the script.（原子保持神圣，组合保持自由，数字来自脚本。）
官网提供了大量可直接 remix 的设计模板，比如 Biennale Yellow、BlockFrame、Blue Professional、Bold Poster、Broadside、Capsule、Cartesian、Cobalt Grid、Coral、Creative Mode 等，全部可以在 hyperframes.dev/design 浏览。
六、Catalog、Stack 与代码结构
6.1 Catalog：现成的块与组件
npx hyperframes add flash-through-white # 着色器转场
npx hyperframes add instagram-follow # 社交叠加层
npx hyperframes add data-chart # 动画图表转场、叠加、字幕、图表、地图、特效都做成了可复用的 block / component，缺什么装什么。
6.2 技术栈全景
| 组件 | 状态 | 作用 |
|---|---|---|
| CLI | 可用 | 脚手架、预览、lint、inspect、本地渲染 |
| Core / Engine / Producer | 可用 | 解析 composition、驱动 headless Chrome、编码视频、混音 |
| Catalog | 可用 | 可复用的块与组件 |
| Agent skills | 可用 | 教 coding agent 那些通用 Web 文档里没有的视频生产模式 |
| Studio | 可用，演进中 | 浏览器里的预览与编辑界面 |
| AWS Lambda rendering | 可用 | 部署分布式渲染栈，从笔记本或 CI 驱动渲染 |
| hyperframes.dev | 可用 | 社区 playground，预览/迭代/分享/渲染 |
| frame.md | 可用 | 把设计系统倒过来给摄像机用 |
6.3 代码怎么组织的
仓库是一组 monorepo 包，职责切得很清楚：
| Package | 职责 |
|---|---|
hyperframes |
CLI（创建、预览、lint、渲染） |
@hyperframes/core |
类型、解析器、生成器、linter、runtime、frame adapters |
@hyperframes/engine |
基于 Puppeteer + FFmpeg 的可寻址 page-to-video 捕获引擎 |
@hyperframes/producer |
完整的渲染管线：捕获、编码、音频混音 |
@hyperframes/studio |
浏览器端 composition 编辑器 UI |
@hyperframes/player |
可嵌入的 <hyperframes-player> web component |
@hyperframes/shader-transitions |
给 composition 用的 WebGL 着色器转场 |
@hyperframes/aws-lambda |
分布式渲染的 AWS Lambda SDK 与部署面 |
硬件加速的转场、可嵌入的播放器、Lambda 分布式渲染——它不只做了一个 CLI，而是把"渲染"做成了一个可以嵌进别人产品里的基础设施。README 也明说了：它既可以本地用，也可以作为托管式创作工作流背后的渲染内核。
七、和 Remotion 比，差别在哪
HyperFrames 自己承认受到 Remotion 的启发，两者都用 headless Chrome + FFmpeg。真正的差别在创作模型：Remotion 赌 React 组件，HyperFrames 赌"人和 agent 都能轻松写的纯 HTML"。
| HyperFrames | Remotion | |
|---|---|---|
| 创作方式 | HTML + CSS + 可寻址动画 | React 组件 |
| 构建步骤 | 无；index.html 直接能播 |
需要打包器 |
| 交给 agent | 纯 HTML 文件 | JSX / React 工程 |
| 库时钟动画 | 通过 adapter 实现可寻址、逐帧精确 | 实时钟动画模式需要额外小心 |
| 分布式渲染 | 本地 + AWS Lambda | Remotion Lambda（更成熟的云渲染） |
| 许可证 | Apache 2.0 | Source-available（Remotion License） |
许可证这一栏值得单独说：HyperFrames 是 Apache 2.0，没有按次渲染费，也没有商用门槛。 对于一个要把渲染嵌进生产流水线的团队来说，这一条的重量可能比技术细节还大。
八、几个值得注意的细节
增长速度快得反常。 仓库 2026 年 3 月创建，到 10 月已经 6.2 万 Star、5578 Fork（数据取自 GitHub API）。半年多冲到 6 万 Star，说明"HTML → 视频 + agent 友好"这个组合确实踩中了当下很多人的需求点。
它有"原生 App"了。 仓库首页展示图直接写的是 "HyperFrames app opening from the Dock: native Mac and Linux app now available"。也就是说除了 CLI 和 Studio，它还有本地桌面应用。
它把自己吃自己的狗粮。 README 说 HyperFrames 在 HeyGen 生产环境使用，社区还有 tldraw、TanStack 等团队在用（见
ADOPTERS.md）。视频公司拿它做生产工具，这个背书比 Star 数更实在。文档比代码"重"。 21 个 skills、大量 guides（GSAP 动画、Claude Design、Open Design、HyperFrames vs Remotion……）、catalog、showcase——这个项目把很大一部分精力投在了"怎么让 agent 和人都用对"上。从它的 self-description "Built for agents" 就能看出来，这不是一句营销口号，而是资源分配的结果。
开发时要注意 Git LFS。 回归测试基线（约 240MB 的
.mp4）走 Git LFS，clone 完整仓库前要先git lfs install；只要源码可以用GIT_LFS_SKIP_SMUDGE=1。它没有试图做"全自动"。 一个容易被忽略的细节：
/slideshow的产出是可导航的 deck，而不是渲染出的视频；/hyperframes是"读了再说"的路由层，会先确认创作意图（the intent layer that confirms every creation brief up front）。这说明它的设计哲学不是"一句话甩给 AI 全自动生成"，而是先对齐意图，再让 agent 干活——这大概是从一堆 AI 生成视频工具里能跑出来的关键。
一句话评价：HyperFrames 的真正创新不在"用 HTML 渲视频"这件事本身，而在于它把 agent 的可用性当成了第一性的设计约束——从 HTML 描述层、无构建、确定性渲染，到 21 个按需加载的 skills 和 frame.md 这套设计翻译层，每一处都在回答同一个问题："怎么让一个只会写 HTML 的 agent，可靠地产出一支视频？"
想亲自试，最快的方式是打开 hyperframes.dev 的 playground，或者直接对 Claude Code 说一句"用 /hyperframes 给我做个 10 秒的片头"。
📦 项目地址: https://github.com/heygen-com/hyperframes 🔗 官网 / Playground: https://www.hyperframes.dev/ 📚 文档: https://hyperframes.heygen.com/introduction 💬 Discord: https://discord.gg/EbK98HBPdk 📄 许可证: Apache 2.0 ⭐ Star: 62.2k（截至 2026-10-13） 📦 npm: https://www.npmjs.com/package/hyperframes
作者: itech001 来源: 公众号：AI人工智能时代 网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。
