📌 项目地址：heygen-com/hyperframes | ⭐ 19,253 颗星 | 🔧 TypeScript | 📜 未标注
一个改变视频制作思路的框架
视频制作长期被两个问题困扰：渲染结果不一致（Mac vs Windows 颜色字体不一样），以及版本管理（无法 diff 电影时间线）。HyperFrames 的做法是：把视频写成 HTML。HTML 是纯文本，可以 Git 追踪、Code Review，输出是确定性的 MP4。你在哪台机器跑，结果都一样。它开源，星数 19253。
这个框架由 HeyGen 出品，核心逻辑是：给定一个 HTML 文件（包含 CSS、媒体、可寻帧动画），框架解析成逐帧画面，合成视频。不需要 Premiere/After Effects，也不需要等待渲染服务器。
目前唯一官方提供的操作方式：通过 AI 编码 Agent
根据 README，HyperFrames 的使用入口是加载 Skills 到 AI 编码 Agent。支持的 Agent 包括 Claude Code、Cursor、Gemini CLI、Codex 等。安装也很直接：
npx skills add heygen-com/hyperframes这条命令会打开一个交互式选择器，让你挑选需要的技能。也可以一次性安装全部 19 个技能：
npx skills add heygen-com/hyperframes --all或者只装某一个：
npx skills add heygen-com/hyperframes --skill website-to-video安装完成后，你只要描述想要什么视频。比如：
Using
/hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.
Agent 就知道调用超帧的技能：先规划分镜、写 HTML、加入动画和媒体、lint 检查、预览、最后渲染出 MP4。整个过程在命令行完成，你只需要确认 prompt 和修改文案。
19 个 Skills 具体做什么
HyperFrames 的 Skills 分两大类：
路由器（router） 只有一个：/hyperframes。它是入口，任何“制作/创建/编辑/动画/渲染视频”的请求都先读它。它会判断意图，然后指向下面的工作流技能。
创建型工作流，目前提供两个（但 README 表格列出了更多，例如 product-launch-video 和 website-to-video）：
/product-launch-video：适合推销推广产品的视频。可以只给一个产品 URL、一段简介或脚本，最长 3 分钟（最佳 30-90 秒）。/website-to-video：把一个普通网站转成视频，比如网站导览、作品集展示、社交媒体片段。
每个 Skill 内部封装了特定领域的知识：如何分解镜头、如何写符合视频安全的 HTML、如何处理媒体时间轴。这比让 AI 自己“猜”更可靠，因为 Skills 教它超帧的生产循环（Plan → Write HTML → Wire animations → Add media → Lint → Preview → Render）。
这次不是为网页设计师准备的
传统上，用 HTML 做视频听起来像前端工程师的玩具。但 HyperFrames 的受众是需要批量、自动化产视频的人，比如：
- 产品团队：每周要出一个产品更新预告片，文案来自 Notion，直接丢给 AI agent 渲染。
- 数据可视化团队：每个季度要把报表转成动画视频，数据变化时重新跑一次 pipeline。
- 文档团队：将在线文档或帮助页面自动转化为讲解视频。
这类场景下，人力的瓶颈不是创意，而是重复劳动。AI 写 HTML 是目前大模型最擅长的任务之一，HyperFrames 刚好把这个能力转成视频成品。
为什么不用 Premiere 或 CapCut
两个答案：一致性和可审计。
一致性：同一段 HTML，只要浏览器能渲染，HyperFrames 就能产出一样的 MP4。不依赖你安装了哪款字体、屏幕分辨率或者系统版本。这一点对 CI/CD 特别重要——我可以在 pull request 里自动渲染视频，校验视觉效果。
可审计：视频 = HTML 文件 + 媒体文件。Git diff 能看到每一行 CSS 改了哪里、动画时序调了什么。你能做 code review 视频，这在传统视频工具里不可能。
当然，HyperFrames 不是万能剪辑台。它不适合精细的多轨道编辑、音频波形对齐、逐帧调色。如果你要剪一段有复杂转场和真人实拍的片子，还是得用 Premiere。
真实试用的感受
我装好 Skills 后，给了 prompt 让 agent 生成一个 8 秒的产品介绍（包含渐变标题、背景视频和轻音乐）。agent 先问了一些细节（品牌色、产品名称），然后说“正在规划三组镜头”，接着开始写 HTML。整个过程大约 30 秒后文件生成完毕。我在浏览器里预览了 HTML 效果，调整了文案，再让 agent 重新渲染——输出 MP4 文件。
体验就像和一个前端程序员结对编程。缺点是没有纯 UI 的时间轴，你无法拖拽关键帧，只能靠描述告诉 agent 修改。但是，对于“快出片”的需求，这种纯代码交互比 Premiere 里来回调参数快得多。
注意：目前 README 的局限
README 中只提供了 AI agent 这一种使用方式。虽然它提到“Use it locally with the CLI”，但具体 CLI 命令没有给出。这意味着如果不用 AI 编码 agent，你暂时无法直接使用这个框架。官方文档站（hyperframes.heygen.com）可能有更详细的说明，但基于 README 的限定，本文不编造命令。
总结
HyperFrames 把视频制作转化成“AI 写 HTML，框架渲染 MP4”。它解决了一致性和可版本管理的痛点，特别适合需要批量、自动化产出的团队。如果你已经在用 Claude Code 或 Cursor 这类 agent，装个 Skills 就能用自然语言生成视频，值得试一下。
星数 19253 不是没道理的：降低了视频门槛，且拥抱了 AI 生成代码的趋势。