智猩猩AI整理
编辑：六六
当下做视频，最让人头疼的就是低效内耗：不少人吐槽剪辑工具千篇一律，想做个自定义动画、搞点差异化画面，要么没合适功能，要么操作太繁琐，就连简单的转场、字幕同步，都要耗半天功夫
想靠HTML+动画做质感视频的朋友，就算有技术基础，从零搭项目、调动画、配渲染参数，也得费不少劲。
更关键的是，目前多数AI视频工具要么没法深度协作，要么生成的都是半成品，还得手动补代码、改参数，看似省实际则白忙活，这也是当下AI视频创作最头疼的地方。
为此，今天给大家分享一个由 AI 视频平台 HeyGen 开源的 HTML 原生视频渲染框架 Hyperframes。该框架基于 HTML 网页技术搭建视频画面，支持 GSAP 动画，且面向 AI Agent 设计。
不用写代码、不用死磕剪辑、不用研究渲染配置，只要和 Agent 说明你的视频需求，Agent 就能直接生成完整的视频合成工程文件，一键预览、一键渲染成 MP4，全程不用手动操心。
-
项目地址：
https://github.com/heygen-com/hyperframes
01 项目介绍
Hyperframes 支持创建、预览和渲染基于 HTML 的视频合成内容，并原生支持 AI Agent。在此基础上，Hyperframes 深度集成了 Claude Code 等 AI 编程工具。用户通过专属指令，即可让 AI 自动完成视频脚本、动画效果及合成代码的编写。
1. 原生 HTML
Hyperframes 的合成内容就是带有 data 属性的普通 HTML 文件。不需要学习 React，也没有自研的领域特定语言（DSL）。对于开发者来说，能构建网页，就能构建视频。
2. 面向智能体的设计
Hyperframes 面向 AI 智能体设计。Hyperframes 的合成内容就是纯 HTML 文档——这正是 LLMs 最擅长的生成格式。CLI 工具默认采用非交互模式，可以无缝集成到智能体驱动的工作流中。无论是 Claude Code、Cursor，还是自定义的自动化脚本，均可直接调用 Hyperframes 完成视频的生成、预览与渲染，全程无需人工干预。
这一设计使 Hyperframes 不仅是一个渲染框架，更是一个可被智能体完整操控的视频合成引擎。
3. 结果一致，流程可控
Hyperframes 的渲染过程具备完全的确定性。只要用户的输入保持不变，渲染结果就始终一致，不受时间、运行环境等影响。这使得用户可以在开发环境中反复测试，确认无误后直接推送到生产流程。同时，确定性渲染也保证了缓存与增量构建的可靠性。
4. 帧适配器模式
帧适配器模式的核心思想，是将视频合成逻辑与具体的动画实现方式分离开来。Hyperframes 本身没有绑定任何动画库或渲染引擎，而是定义了一套清晰的适配接口。用户可以根据项目需求，自由选择 GSAP、Lottie、纯 CSS 动画或 Three.js 等方案，通过实现帧适配器将其接入框架。
02 使用方法
1. 配合 AI Agent 使用
安装 HyperFrames skills：
npx skills add heygen-com/hyperframes在 Claude Code 中，skills会以斜杠命令的形式注册——调用： /hyperframes、/hyperframes-cli、/gsap。
对于Codex，一样的 skills 也已封装为 OpenAI Codex 插件——只需稀疏安装插件接口本身：
codex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets-
prompts指南链接：
https://hyperframes.heygen.com/guides/prompting
2. 手动启动项目
（1）在当前目录下创建一个名为 my-video的新项目，并生成必要的文件结构：
npx hyperframes init my-video（2）进入项目目录：
cd my-video（3）在浏览器中实时预览视频效果，并支持热重载（Live Reload）：
npx hyperframes preview（4）渲染成最终的 MP4 视频文件：
npx hyperframes renderhyperframes init 会自动安装相关的 skills，因此用户可以在任意阶段将项目交给 AI Agent继续处理 。
项目配置环境要求：Node.js >= 22，FFmpeg
03 总结
HyperFrames 是 HeyGen 开源的一个视频渲染框架，主要面向 AI Agent 和开发者。和传统做法不同——传统思路是让 AI 生成脚本，再交给渲染引擎去跑——HyperFrames 反过来，让 AI Agent 直接“住进”视频制作流程里。Agent 可以自己写 HTML/JS、启动预览、看效果、根据反馈来回改，最后把片子渲染出来。
这实则就是“用代码定义视频”的开发范式。它把做视频的门槛，从“懂视觉设计”拉低到了“会一点 Web 基础 + 能把需求说清楚”。
END
✦
✦
入群申请
✦
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
