当 HTML 成为视频的中间表示：HyperFrames 把"生成视频"变成"写网页"

场景开篇

你让 AI 做一个 10 秒的产品介绍视频。标题淡入，背景视频循环，配一段轻音乐。

传统做法有两条路：一是用 Sora 这样的模型直接生成像素，二是用 Remotion 写 React 组件再渲染成 MP4。前者不可控——你没法精确指定第 3.2 秒标题开始淡入；后者门槛高——你得会 React，还得理解组件生命周期。

HyperFrames 给了第三条路：写 HTML 和 CSS，渲染成确定性的 MP4。

听起来简单到不像话。但仔细想，这正是编译器设计里的经典思路——找一个表达能力足够强、生态足够成熟的中间表示（IR），把所有上层语言编译到它，再从它编译到所有目标平台。LLVM 之于编程语言，HTML 之于视频渲染。

它到底做了什么

HyperFrames 是 HeyGen（是的，那个做 AI 数字人的公司）开源的框架。一句话：HTML/CSS/媒体 + 可寻址动画 → 确定性 MP4 视频。

核心机制：

• HTML 作为合成契约：用 data-* 属性标注时间轴，class="clip" 标注片段，tracks 组织轨道。你写的就是一个网页，但每个元素都有时间维度。
• 可寻址动画：GSAP、Lottie、Three.js、CSS、WAAPI——所有动画库都能用，但加了"可寻址"约束。意味着渲染器可以在任意时间点精确取帧，而不是从头播放。
• 确定性渲染：同样的 HTML 永远产出同样的 MP4。没有随机种子，没有模型推理的不确定性。

21 个 Skill：给 Agent 的视频生产流水线

HyperFrames 最有意思的设计不是渲染引擎本身，而是它附带了 21 个 Agent Skill。这些 Skill 教 AI 编码代理如何使用 HyperFrames：

• /hyperframes：路由器，读它来决定用哪个工作流
• /product-launch-video：产品发布视频
• /pr-to-video：把 GitHub PR 变成变更说明视频
• /faceless-explainer：无脸解说视频
• /talking-head-recut：给说话头视频加设计化覆盖层
• /music-to-video：音乐驱动视频
• /slideshow：交互式演示文稿
• /motion-graphics：10 秒以内的动态图形

每个 Skill 是一个 Markdown 文件，教 Agent 如何规划视频结构、写合法 HTML、连接动画、添加媒体、lint、预览、渲染。支持 Claude Code、Codex、Cursor、Gemini CLI、OpenCode。

这个设计揭示了一个趋势：工具不只是暴露 API，而是教 Agent 怎么用自己。Skill 是给 AI 看的说明书，不是给人看的文档。

为什么 HTML 是好的视频 IR

想想视频生成的历史。早期是关键帧动画，后来是 After Effects 的图层合成，再后来是 Remotion 的 React 组件。每一步都在把"描述视频"这件事变得更像"写代码"。

HTML 作为视频 IR 的优势：

1. Agent 已经会写 HTML。Claude、GPT、Gemini 天生就懂 HTML/CSS，不需要额外训练。用 Remotion 得会 React + TypeScript + 组件思维；用 HTML 只需要会写网页。
2. 生态成熟。CSS 动画、GSAP、Three.js、Lottie——几十年的 Web 动画生态直接可用。
3. 可调试。你可以在浏览器里打开 HTML，看到渲染结果，改一行 CSS 立刻生效。像素级生成模型做不到这一点。
4. 确定性。同样的 HTML 永远产出同样的视频。这对自动化流水线至关重要——你不能让 CI/CD 里同一个 commit 产出两个不同的视频。

代价是表达力上限。HyperFrames 做不了 Sora 那样的物理场景生成——你没法用 HTML 描述"一只猫从桌上跳下来打翻花瓶"。但对于产品介绍、数据可视化、解说视频、动态图形这些设计驱动的场景，HTML 的表达力绰绰有余。

和 Remotion 的区别

Remotion 是这个领域的前辈：用 React 组件写视频。HyperFrames 的差异：

• Remotion：React 组件 → 帧渲染 → MP4。你需要会 React、理解 hooks、管理组件状态。
• HyperFrames：HTML/CSS → 帧渲染 → MP4。更声明式，更接近最终输出。

Remotion 的 React 组件是命令式的——你用 useCurrentFrame() 获取当前帧，计算每个元素的位置。HyperFrames 的 HTML 是声明式的——你用 data-* 属性声明时间轴，渲染器自己处理帧采样。

声明式比命令式更适合 AI 代理生成。AI 写 React 组件需要理解状态管理和生命周期；写 HTML 只需要描述"这里有什么，什么时候出现"。

更深的趋势：Agent 原生工具设计

HyperFrames 体现了三个 Agent 原生工具的设计原则：

1. 用 Agent 已会的技能作为接口。 不发明新 DSL，不要求 Agent 学习新框架。HTML 是所有 LLM 的母语。

2. 把领域知识编码为 Skill，不是文档。 21 个 Skill 不是给人看的 README，是给 Agent 消费的指令文件。Agent 读 Skill 后知道"产品发布视频"需要哪些步骤、哪些媒体、什么结构。

3. 确定性优先。 Agent 生成的视频必须可复现。同一 prompt 产出不同视频会让自动化流水线崩溃。HTML → MP4 是确定性的，模型推理不是。

数据

• 仓库：heygen-com/hyperframes
• 语言：TypeScript
• 协议：Apache 2.0
• 今日 stars：352
• 21 个 Agent Skill，支持 Claude Code/Codex/Cursor/Gemini CLI/OpenCode
• npm 包：hyperframes

适合谁

• 做 AI 视频生成的团队，需要确定性输出而不是像素级生成
• 用 Claude Code 或 Cursor 的开发者，想让 Agent 自动产出产品视频
• 从 Remotion 迁移的团队——HyperFrames 提供 /remotion-to-hyperframes 迁移 Skill

不适合：需要物理场景生成、角色动画、电影级特效的场景。这些仍然是像素级生成模型的领地。

收尾

HyperFrames 的真正贡献不是渲染引擎，是把视频生成从"模型推理问题"变成"模板渲染问题"。模型推理不可控、不可复现、不可调试；模板渲染可控、可复现、可在浏览器里调试。

当所有人都在追逐"用 AI 生成视频像素"时，HeyGen 反过来问：如果视频只是渲染好的 HTML 呢？这个问题的答案，可能比另一个视频生成模型更有价值。