HeyGen 开源 hyperframes：让 Agent 用 HTML 直接渲染出片，48.7K Star

做短视频最贵的环节，从来不是写脚本，是把它变成画面：逐帧抠动效、配字幕、剪音画同步，每个动作都得人盯着，工具散、流程断。

海外那些“文字转视频”的 SaaS，模板固定、风格撞车，改一处动效要回头重渲整段，Agent 还插不进自己的工作流。

HeyGen 开源的 hyperframes 则换了个思路：把 HTML 当中间语言，Agent 写它最擅长的网页，GSAP 做动画、FFmpeg 渲成片，一行命令从网站捕获到 MP4 闭环。

项目速览

一句话定位：把 Agent“会写网页”的能力直接用来“出视频”，HTML 是中间语言，MP4 是最终交付，不用学新 DSL。

为什么值得看

市面视频工具分两类。一类是 SaaS 模板，模板固定、风格撞车，改一处动效要回头重渲整段，Agent 没法接管整条链路；另一类是纯代码渲染库，要自己写大量胶水，门槛高。

而 hyperframes 走第三条路：拿 HTML+GSAP 当 Agent 早已精通的技能，再加一层渲染管线（Puppeteer 逐帧截图 + FFmpeg 合成），Agent 不用学 Remotion 这类专用框架，写网页的肌肉记忆直接迁移到出片。

更难得的是它原生长在 Agent 生态里。仓库自带 .claude/skills、.agents/skills、.cursor-plugin，Claude Code、Codex CLI 打开仓库就自动发现 5 个技能，零安装摩擦。还有 website-to-hyperframes 这种“抄网站设计系统”的技能：一行 capture 命令把任意网站的全页截图、配色、组件抽成 AI-ready 的 DESIGN.md 加 composition，Agent 照着抄就能做品牌一致的成片，不用从零定调。

五大核心特性

1. HTML 当中间语言，Agent 零学习成本。

视频内容由 HTML、CSS、GSAP 定义，是 Agent 早已精通的技能，不必学专用视频 DSL。写网页的那套思路直接迁移到出片，门槛比“上手一套视频框架”低一个量级。

2. 网站捕获把任意页面变成设计系统。

hyperframes capture <url> 一行命令，从任意网站抽全页截图、AI 生成 DESIGN.md、CSS 净化后的 composition，还自动写好 CLAUDE.md 和 .cursorrules。要做竞品同款风格的成片，抄过来改就行。

3. 208 个视频原语开箱即用。

registry 目录里 208 个可复用 video-primitive moves（转场、动效、字幕轨、UI 动画），Agent 写 composition 时直接调，不用从零逐帧写动效，起手就有半成品。

4. 完整渲染管线，Puppeteer 加 FFmpeg。

@hyperframes/producer 用 Puppeteer 逐帧截图、FFmpeg 合成 MP4，@hyperframes/engine 做框架无关的渲染层。实测能出 1080×1080、45 到 60 秒带口播配音和字幕轨的成片，不是 demo 玩具。

5. 三大 Agent 平台原生自动发现。

仓库自带 .claude-plugin/plugin.json、.agents/skills、.cursor-plugin，Claude Code、Codex CLI、Cursor 打开仓库即在 hyperframes: 命名空间下自动发现技能，无需手动 install 步骤。

适用场景

• 独立开发者 / 做 changelog 视频的：装 changelog-video 技能，喂一段 release notes markdown，自动出 1080×1080 带口播配音和字幕的发布短片
• 内容 / 社交运营：用 website-to-hyperframes 抄品牌官网设计系统，批量出风格统一的产品演示片段
• 技术布道 / DevRel：把文档站捕获下来，Agent 写 HTML 把功能点做成动效演示，渲成讲解视频发 B 站、YouTube
• SaaS 产品团队：把落地页交互录成 composition，A/B 测试不同动效版本，渲染对比挑转化高的

怎么装、怎么用

Step 1：打开仓库即用（最省事）

git clone https://github.com/heygen-com/hyperframes
cd hyperframes
# 在 Claude Code 里 /skill 列表能看到 hyperframes： 下自动发现的技能

Step 2：用 CLI 创建并预览 composition

bunx @hyperframes/cli create my-video
bunx @hyperframes/cli preview my-video

Step 3：自然语言唤起网站捕获

把 example.com 的设计系统抓下来，照它的配色做一支 10 秒产品演示

Agent 调 website-to-hyperframes 技能，跑 capture 抽 DESIGN.md 加 composition，再写 HTML 场景。

Step 4：渲染成片

bunx @hyperframes/cli render my-video --output out.mp4

为什么推荐它

推荐理由：把 HTML 当视频中间语言、使 Agent 零学习出片，这是目前开源生态里最贴合 Agent 工作方式的视频生成框架。

Apache-2.0 协议可商用，48.7K Star + 4.9K 周增证明它的真实需求，三大 Agent 平台原生自动发现省掉所有安装摩擦。

当然，诚实边界也得说清：渲染依赖 Puppeteer 加 FFmpeg 在本地跑，对机器有要求；目前还在 v0.8.x 阶段，composition API 随时可能会变。把它当“使 Agent 用会的方式出视频”的基建，而不是当“一键爆款短视频生成器”。

项目地址：https://github.com/heygen-com/hyperframes

觉得有用，去给作者点个 Star。