想给产品做个 30 秒介绍视频、把一周数据做成会动的图表、给口播视频加花字，以前要么学 AE、剪映，要么写 Remotion 这种 React 代码。HeyGen 开源的 HyperFrames 换了个思路：视频就是一个 HTML 网页，标题、图片、图表用 HTML 和 CSS 摆好，动画用 GSAP 这类前端库写，最后由它一帧一帧截下来，用 FFmpeg 合成 MP4。
这件事最适合交给 AI：Claude Code、Codex 本来就擅长写网页。HyperFrames 给它们准备了一整套技能（Skills），你说一句“给这个网址做个 10 秒产品介绍”，Agent 负责写 HTML、检查、预览、渲染。项目 2026 年 3 月建仓，Apache 2.0 协议，写这篇时 GitHub 上约 6.8 万星，上周涨了近 6000 星，最新版 v0.8.181 发布于 10 月 20 日上午（北京时间），基本每天都在发版。
我们没有只看 README，而是在一台 8 核、没有显卡的 Linux 云主机上从零装了一遍，手写了一段 6 秒的中文动画并渲染出来。下面先说结论，再讲过程和踩到的坑。资料查阅和实测时间都是 2026 年 10 月 20 日。
先把预期摆正：它不是 Sora，也不是剪映
| 问题 | 答案 |
|---|---|
| 它会用 AI 生成画面吗？ | 不会。画面全部来自你（或 Agent）写的 HTML、图片和视频素材，渲染过程不调用 AI 模型 |
| AI 在哪一步？ | 写 HTML 的那一步。Agent 装上它的技能后，知道怎么排版、加动画、对时间轴、做检查 |
| 要钱吗？ | 框架免费开源，本地渲染不消耗 HeyGen 积分；Agent 的用量按你自己的 Claude / ChatGPT 套餐或 API 计费；用 HeyGen 云端渲染才另外计费 |
| 需要什么环境？ | Node.js 22 以上 + FFmpeg + Chrome（本机有 Chrome 会直接用） |
| 同样的输入，每次渲染结果一样吗？ | 一样。官方把“确定性渲染”当卖点，我们实测两次渲染同一帧逐像素对比没有差别 |
| 适合做什么？ | 产品介绍、功能发布、数据图表动画、带花字的社交短视频、给已有口播视频加字幕和信息卡、PR 讲解视频 |
所以它解决的是“我知道视频要长什么样，但不想手动做动画”的问题。想要 AI 凭空生成真人或风景镜头，还是得找视频生成模型。
三种用法，按你的习惯选
1. 交给 Agent：装插件或技能
在 Claude Code 里装官方插件：
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes
装好后用 /hyperframes:hyperframes 调用。Codex、Cursor、Gemini CLI、OpenCode 等支持 Skills 的 Agent，可以在项目目录里运行：
npx skills add heygen-com/hyperframes
选择器里只勾 Core Skills 就够了，其他工作流会在用到时自动补装。Agent 或脚本里非交互安装，官方建议改用 npx hyperframes skills update，它只装核心那几个；如果用 skills add 又不加参数，会把 21 个技能全装上。Skills 是什么、装在哪个目录，可以先看5 个热门 AI 编程技能包那篇的开头。
装好后直接说需求，比如官方给的示例：“Using /hyperframes, make a 10-second product intro for 你的网址”。Agent 会先给出方向、问清缺的信息，再动手。
2. 不写代码：Studio 桌面应用
官方另做了一个 HyperFrames Studio 桌面应用，目前只有 Mac 和 Linux 版（Linux 是一个 HyperFrames-x86_64.AppImage 文件），从 hyperframes.dev/studio 下载。它把 Agent 包进了图形界面：在首页输入框描述视频，本机的 Claude Code 或 Codex 负责制作，你可以打字、在画面上点选、涂画或批注来改。
要注意两点：第一次点按钮时会要求用 HeyGen 账号登录；它调用的 Claude Code 或 Codex 用的是你自己的账号额度。Windows 用户暂时只能用下面的命令行方式。
3. 自己动手：命令行
npx hyperframes init my-video
cd my-video
npx hyperframes preview # 浏览器里预览，改文件自动刷新
npx hyperframes render # 渲染成 MP4
我们实测走的就是这条路，下面细说。
实测：6 秒中文数据动画，4 秒渲染完
测试机是一台 8 核 Xeon、16GB 内存、没有显卡的 Linux 云主机，Node.js 22.23.3，FFmpeg 7.1.5，系统自带 Chrome。npx hyperframes doctor 自检时，Node、FFmpeg、Chrome 都通过；没装的 whisper-cpp（转字幕）、Kokoro（本地配音）、MusicGen（本地配乐）都标为可选，不影响基本渲染。
init 生成的项目很干净：一个 index.html、一个 hyperframes.json 配置，外加 CLAUDE.md 和 AGENTS.md，后两个是写给 Agent 看的规则说明。我们把 index.html 改成一段 6 秒、1920×1080 的动画：标题淡入，副标题跟上，三根柱子依次长高。关键写法只有三条：
- 每个要出现在时间轴上的元素加
class="clip"，用data-start、data-duration、data-track-index指定开始时间、时长和轨道； - 动画写在一个暂停状态的 GSAP 时间轴里，比如
tl.fromTo(".bar", { scaleY: 0 }, { scaleY: 1, stagger: 0.35 }, 1.4)； - 最后把时间轴挂到
window.__timelines["main"]，渲染器靠它把动画“拨”到每一帧的准确时刻再截图。
第一个坑：中文字体必须声明
写完先跑 npx hyperframes lint，直接报了一个错误：font_family_without_font_face。意思是我们在 CSS 里写了 font-family: "Noto Sans CJK SC"，但它不在渲染器能自动提供的字体列表里，渲染时会退回默认字体，中文排版就走样了。
解决办法是给系统字体补一条 @font-face，用 local() 指向本机字体：
@font-face {
font-family: "CJK";
src: local("Noto Sans CJK SC Bold");
font-weight: 700;
}
#root { font-family: "CJK", sans-serif; }
Windows 上可以换成 local("Microsoft YaHei")，Mac 上可以用 local("PingFang SC")。想让别人的电脑渲染出同样效果，更稳的做法是把字体文件放进项目目录，用 url() 引用。改完再 lint，0 错误、0 警告。顺带一提，lint 还会提醒每个元素都加一个 id，否则 Studio 里没法稳定地选中编辑它。
渲染速度和结果
npx hyperframes render 开了 4 个并行 Chrome 截帧，180 帧（6 秒 × 30fps）用时 4.1 秒，输出 1920×1080、H.264 编码的 MP4，体积 151.6 KB。没有显卡时它自动用软件渲染，简单的文字和图形动画完全够用；画面里有大量视频素材、3D 或着色器转场时会慢很多，官方也提供了 GPU 编码选项。
npx hyperframes preview 会在本地起一个 Studio 网页（默认端口 3002），左边是合成列表，中间预览，下面是时间轴，每个元素一条轨道，关键帧画成菱形，可以拖动调整，右边的面板能直接改选中元素的样式。
第二个坑：GSAP 默认从国外 CDN 加载
init 生成的模板从 cdn.jsdelivr.net 加载 GSAP，渲染时 Chrome 要能访问这个地址。国内网络不稳的话，把 gsap.min.js 下载到项目的 assets/ 目录，<script src> 改成 assets/gsap.min.js 就行。我们这样改完重新渲染，同一时刻的画面和改之前逐像素一致。另外 init 会去 GitHub 检查技能版本，GitHub 访问不畅时这一步可能很慢甚至失败，可以先设环境变量 HYPERFRAMES_SKIP_SKILLS=1 跳过。
官方准备了哪些“做视频流程”
HyperFrames 一共发布了 21 个技能，其中 /hyperframes 是总入口，它根据你的需求挑选下面这些创作流程（官方 README 列出的，括号里是适用场景）：
| 技能 | 用来做什么 |
|---|---|
/product-launch-video |
给一个网站做产品宣传、功能发布或网站导览视频，最长约 3 分钟，30～90 秒效果最好 |
/faceless-explainer |
把一段文字讲成解说视频，不需要真人出镜，画面全是排版、图表和抽象图形 |
/pr-to-video |
把 GitHub 的一个 Pull Request 做成更新说明视频 |
/embedded-captions |
给已有的口播视频加字幕，原画面不动 |
/talking-head-recut |
给访谈、播客、口播视频加人名条、数据卡、标题动画、画中画 |
/motion-graphics |
10 秒以内、无旁白的动态图形：大字动画、数据冲击、Logo 动画 |
/music-to-video |
按音乐节拍自动卡点，做歌词视频、幻灯片或宣传片 |
/slideshow |
做可交互的演示文稿，输出的是能翻页的网页，不是视频文件 |
/remotion-to-hyperframes |
把已有的 Remotion 项目迁移过来 |
此外还有动画、关键帧、音频混音、素材管理、Figma 导入等“底层技能”，由上面的流程按需调用。素材方面它自带本地语音合成命令 npx hyperframes tts，用的是 Kokoro-82M 模型，音色列表里有一个中文女声 zf_xiaobei，需要先 pip install kokoro-onnx soundfile，我们这次没有测它的中文效果。想要更自然的中文配音，可以先用VoxCPM2 这类开源 TTS 模型生成旁白，再作为音频素材放进项目。
和 Remotion、Sweety Handdraw Video 怎么选
| HyperFrames | Remotion | Sweety Handdraw Video | |
|---|---|---|---|
| 写什么 | HTML + CSS + JS | React + TypeScript | 不写，交给 Agent |
| 擅长的成品 | 产品介绍、数据图表、字幕包装、社交短视频 | 程序化批量视频，生态成熟 | 边画边讲的手绘知识视频 |
| 授权 | Apache 2.0，不限人数商用 | 自有协议：个人和 3 人以内公司免费，更大团队付费 | MIT |
| 系统 | 命令行 Windows / Mac / Linux；桌面应用仅 Mac / Linux | 全平台 | macOS、Linux |
已经用 Remotion 的团队不一定要换，HyperFrames 官方也承认 Remotion 的云端渲染更成熟。但如果你主要靠 Agent 出片，HyperFrames 的理由很实在：Agent 本来就会写 HTML，不需要打包构建，打开 index.html 就能预览。如果想要的是手绘风格的知识视频，我们之前写过的Sweety Handdraw Video 能让 Codex / Claude Code 把文章做成边画边讲的手绘视频，汉字还会按笔顺写出来，两者可以搭配用。
哪些地方会花钱、会联网
- 本地渲染免费，官方明确说不消耗 HeyGen 积分。
- Agent 的费用：插件和技能只是“说明书”，真正写代码的是你的 Claude Code、Codex，按你的套餐或 API 用量计费。一个 30 秒的视频，Agent 可能要来回改好几轮。
- 云端渲染：
hyperframes cloud render需要先hyperframes auth login登录 HeyGen 账号，项目打包上限 200 MB，4K 按 1.5 倍计费。不想装 Chrome 和 FFmpeg 时才需要它。 - 匿名统计：CLI 默认会上报匿名使用数据，可以运行
npx hyperframes telemetry disable关掉；设置了环境变量DO_NOT_TRACK=1时也会自动停用。 hyperframes publish会把项目上传到一个固定网址（默认私有），不需要就别用。
不足
- 更新太快：一天发好几个版本，今天的命令参数下个月可能就变了，文档也在跟着改。写脚本时建议固定版本号，比如
npx [email protected]。 - 门槛不算低：要装 Node.js 22，还得懂一点命令行；不用 Agent 的话，要会写 HTML、CSS 和 GSAP。
- 中文要自己处理字体，上面已经说了；字幕转写依赖 whisper，中文识别效果要自己试。
- Windows 没有桌面应用，只能用命令行加 Agent。
- 第一版成片不等于终稿，官方文档也提醒要自己检查文案、事实、文字是否看得清和声音。
适合谁
- 适合：已经在用 Claude Code、Codex 或 Cursor，想顺手做产品宣传片、更新说明视频的开发者和独立站长；要定期出数据周报、图表动画的运营；会一点前端、想用代码批量生成同一模板视频的人。
- 不太适合：只想一键出片、完全不碰命令行的用户；需要 AI 生成真实镜头的创作者。
它属于 Agent 技能包这一类工具。想了解 Claude Code、Cursor、Codex 周边还有哪些网关、MCP、监控和技能包可装，可以看AI 编程 Agent 生态全景（2026）。
项目信息
- 开发方：HeyGen（AI 数字人视频公司），已在自家生产环境使用
- 授权：Apache 2.0
- 版本：v0.8.181（2026 年 10 月 20 日）
- 环境：Node.js 22+、FFmpeg；命令行支持 Windows、macOS、Linux，Studio 桌面应用支持 macOS、Linux
- 仓库：github.com/heygen-com/hyperframes
- 文档：hyperframes.heygen.com｜快速上手：Quickstart｜案例：Showcase
- 在线体验和桌面应用下载：hyperframes.dev
