技能介绍

HyperFrames 是 heygen-com 开源的一套确定性视频渲染框架，定位一句话：编写 HTML，渲染视频，为 AI 代理而生。它把 HTML、CSS、媒体资源和可寻址动画渲染成确定性的 MP4 视频——你可以通过本地 CLI 使用它，也可以通过 AI 编码代理加载技能来使用，或者把它当作托管创作工作流背后的渲染核心。

仓库目前获得 38K GitHub Stars，采用 Apache 2.0 许可，没有按渲染次数收费或商业使用门槛。它受 Remotion 启发，但把创作介质从 React 组件换成了 HTML + CSS，让已经会写网页的 AI 代理可以直接上手视频生产。

适用场景

  • 产品发布视频与功能公告；
  • GitHub PR 讲解（带动画代码 diff、旁白和字幕）；
  • 数据可视化、图表竞赛和地图动画；
  • 社交视频（含动态字幕、叠加层和背景音乐）；
  • 文档转视频、PDF 转视频、网站导览讲解；
  • 可复用的动态图形，用于自动化内容流水线。

核心能力

HyperFrames 提供 19 个按需加载的技能，涵盖路由、创作工作流和领域能力。完整的组件栈如下：

↔ 左右滑动查看完整表格
组件状态说明
CLI可用初始化、预览、检查、渲染本地视频项目
Core / Engine / Producer可用解析合成、驱动无头 Chrome、编码视频、混音
Catalog可用可复用的区块和组件，用于过渡、叠加层、字幕、图表、地图和特效
Agent skills可用教会 AI 编码代理视频生产的模式
Studio可用，持续演进用于预览和编辑合成的浏览器界面
AWS Lambda 渲染可用部署分布式渲染栈，从本地或 CI 驱动渲染
hyperframes.dev可用社区在线试验场，用于预览、迭代、分享和渲染 HTML 原生视频项目
frame.md可用将你的设计系统倒置为镜头服务的格式——一个 AI 代理可以从中创作视频的 DESIGN.md 超集

框架层面的几个关键设计：

  • HTML 原生：合成文件就是带数据属性的 HTML，无需 React，没有专有时间线格式。
  • 对 AI 代理友好：代理已经能写 HTML，CLI 默认非交互式。
  • 确定性：相同输入产生相同帧、相同输出，适合 CI、回归测试和自动化渲染。
  • 无构建步骤：index.html 合成文件可直接播放，浏览器中即可预览。
  • 适配器式动画：支持 GSAP、CSS 动画、Lottie、Three.js、Anime.js、WAAPI 或自定义运行时。
  • 开源：Apache 2.0 许可，无按渲染次数收费或商业使用门槛。

创作工作流技能按输入类型划分：/product-launch-video（从 URL、摘要或脚本做营销/发布视频，最长约 3 分钟，最佳 30–90 秒）、/faceless-explainer（无产品、无 URL，视觉全由 LLM 生成）、/pr-to-video（通过 gh CLI 读 GitHub PR，输出变更日志/功能揭示讲解）、/embedded-captions（给已有讲解视频加逐字字幕）、/talking-head-recut（给讲解/访谈/播客加图形叠加层）、/motion-graphics（约 10 秒以下的设计驱动动态图形，输出 MP4 或透明叠加层）、/music-to-video（节拍同步视频）、/slideshow（可导航演示 deck，非视频）、/general-video（其余长片/多场景作品与协作模式）、/remotion-to-hyperframes（把现有 Remotion 合成源码单向移植到 HTML）。

领域技能按需加载，覆盖合成合约（/hyperframes-core）、动画（/hyperframes-animation）、可寻址关键帧（/hyperframes-keyframes）、创意方向（/hyperframes-creative）、媒体资产（/media-use，统一音频引擎 + 清单追踪）、CLI 开发循环与云渲染（/hyperframes-cli）、注册表区块（/hyperframes-registry）、Figma 导入（/figma）。

效果预览

设计系统模板 frame.md 可将你的设计规范转换为 AI 代理能够直接用于视频创作的格式。以下是一些已提供的设计模板效果，你可以在 hyperframes.dev/design 浏览和混搭所有这些设计模板。

将HTML/CSS渲染为MP4视频预览

工作方式

  1. 用户提供视频描述（prompt）、URL、GitHub PR 链接、音频文件等输入。
  2. AI 代理（如 Claude Code、Cursor、Gemini CLI、Codex）或本地 CLI 使用 HyperFrames 技能来规划视频、编写 HTML、添加可寻址动画、引入媒体、检查语法、预览效果，最后渲染输出。
  3. 渲染器在无头 Chrome 中逐帧捕获，并通过 FFmpeg 编码为 MP4 视频。

预览和渲染：

npx hyperframes preview      # 在浏览器中预览，支持实时重载
npx hyperframes render       # 渲染为 MP4

你需要提供

  • 使用 AI 代理：一个文字描述，例如"创建一个 10 秒的产品介绍，包含淡入标题、背景视频和微弱的背景音乐"，以及一个支持技能的代理（如 Claude Code、Cursor、Gemini CLI、Codex）。
  • 使用本地 CLI：Node.js 22+ 和 FFmpeg 安装环境。此外，需要准备 HTML 文件、媒体文件和动画脚本。

你会获得

  • 一个确定性的 MP4 视频文件，帧与输入完全一致。
  • 对于 slideshow 工作流，会得到一个可导航的演示文稿（非视频）。

使用示例

以下是一个典型的 AI 代理提示词：

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

代理将依次执行规划、编写 HTML、添加媒体和动画、检查、预览并最终渲染。页面提供的其他起点提示词：

  • 使用 /hyperframes 创建一个 10 秒的产品介绍视频，包含淡入标题、背景视频和背景音乐。
  • 使用 /product-launch-video 为我的网站 URL 生成一个 60 秒的营销推广视频。
  • 使用 /faceless-explainer 根据我提供的文本内容，制作一个关于人工智能概念的解释性视频。

任何制作/创建/编辑/动画/渲染视频、动画或动态图形的请求，都建议先读 /hyperframes 路由技能——它是能力地图和意图路由器，会确认创作需求并分配工作流。

更多详情请参阅官方文档：https://hyperframes.heygen.com/introduction