hyperframes
hyperframes

什么是 HyperFrames 插件

视频制作这件事，传统的路径是打开 Premiere 或者剪映——拖素材、拉时间线、调关键帧，鼠标点一下动一下。但如果你本身就在用 AI 编程助手写代码，有没有想过——视频能不能也像写网页一样，用 HTML 写出来？

HyperFrames 就是干这个的。

它是 HeyGen 开源的一个视频渲染框架，核心理念就一句话——“Write HTML. Render video. Built for agents.”。你不用学 After Effects，不用摸任何剪辑软件，用 HTML、CSS 和 JavaScript 描述视频里每一帧长什么样、什么时候切换、怎么动，HyperFrames 就能把这些代码渲染成 MP4 视频。

而 HyperFrames 插件（或者说 Skills 包），是这个框架专门为 AI 编程助手准备的一套“技能包”。它解决的问题很实际：AI 助手虽然会写 HTML，但不知道 HyperFrames 这个框架的特殊规则——动画怎么写、媒体怎么引用、项目结构长什么样。把这些技能安装到你的 AI 助手里，它就能听懂“帮我做个视频”这种话，然后自动写出正确的 HyperFrames 代码。

这个仓库目前发布了 20 个 AI 代理技能，在 GitHub 上开源。

核心功能

HyperFrames 插件不是一个单一的工具，而是一整套技能包的集合。安装之后，你的 AI 助手就拥有了完整的视频创作能力。

核心路由技能：/hyperframes

这是所有技能的入口。当你在 AI 助手中输入“帮我做个视频”或者“用 HyperFrames 生成一个产品介绍”时，/hyperframes 技能会先理解你的意图，然后自动选择最合适的工作流。你不需要记住每个技能的名字，只需要说清楚你想要什么。

  • 给一个产品网站 → 自动走“产品发布视频”工作流

  • 给一篇文章或脚本 → 自动走“无面讲解视频”工作流

  • 给一个 GitHub PR → 自动走“PR 转视频”工作流

领域技能（按需加载）

除了核心路由，HyperFrames 还提供了十几个专门的领域技能：

  • hyperframes-cli：命令行工具技能，处理初始化、检查、预览、渲染等操作

  • media-use：处理视频中的媒体资源——背景音乐、音效、图片、Logo、配音、调色等

  • faceless-explainer：把一篇文章或脚本转成讲解视频

  • motion-graphics：生成短小精悍的无配音动态图形（10秒以内）

  • pr-to-video：把一个 GitHub Pull Request 转成代码变更讲解视频

  • general-video：当输入不符合其他任何特定类别时的通用兜底技能

  • remotion-to-hyperframes：把 Remotion 项目迁移到 HyperFrames 格式

  • website-to-hyperframes：抓取网页内容并自动生成视频

此外还有针对具体动画库的技能——GSAP、Anime.js、CSS Animations、Lottie、Three.js、WAAPI 等。AI 会根据你的视频需求自动调用对应的动画技能。

完整创作工作流

安装技能之后，AI 助手会按照一套标准流程来创作视频：

  1. 规划：理解你的需求，确定视频主题和风格

  2. 编写 HTML：生成符合 HyperFrames 规范的 HTML 代码

  3. 添加动画：使用 GSAP 或其他动画库编写可定位的动画

  4. 引入媒体：处理背景音乐、图片、配音等资源

  5. 代码检查：运行 lint 检查语法错误

  6. 预览：在浏览器中打开实时预览

  7. 渲染：手动执行渲染命令生成 MP4

渲染与输出

HyperFrames 的渲染引擎通过 Puppeteer 驱动浏览器逐帧截图，再用 FFmpeg 合成视频。支持的输出格式包括 MP4、WebM、MOV、GIF 和 PNG 序列。整个过程是确定性渲染——同样的输入，产出的视频像素级一致，非常适合批量生产。

安装方法

HyperFrames 插件的安装依赖 Node.js 环境和一个 AI 编程助手（如 Claude Code、Cursor、Codex、Gemini CLI 等）。

环境准备

首先确保你的机器上有 Node.js 22 或更高版本：

bash
node --version

如果版本低于 22，去 Node.js 官网下载最新版。

然后安装 FFmpeg（用于视频合成）：

macOS：

bash
brew install ffmpeg

Ubuntu/Debian：

bash
sudo apt update && sudo apt install -y ffmpeg

安装 HyperFrames 技能包

在终端执行以下命令：

bash
npx skills add heygen-com/hyperframes --full-depth

--full-depth 参数很重要——它会完整克隆仓库的当前 main 分支。如果不加这个参数，skills add 获取的是 skills.sh 的缓存版本，可能比 main 分支滞后几个小时。

执行后会出现一个交互式选择器，列出了所有可用的技能。核心技能组（Core Skills） 是必选的——包括 /hyperframes 路由器和基础领域技能。其他专项技能按需选择即可。

安装完成后，重启你的 AI 编程助手，让新安装的技能生效。

在 Codex 中安装

如果你用的是 Codex，可以在插件中心搜索 HyperFrames 直接安装。或者通过命令行安装 Codex 插件版本：

bash
codex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets

在 Cursor 中安装

Cursor 用户可以从 Cursor Marketplace 安装 HyperFrames 插件，或者克隆仓库后通过 Settings → Plugins → Load unpacked 加载。

在 Google Antigravity 中安装

在 Antigravity 中打开项目后，在项目根目录执行同样的安装命令：

bash
npx skills add heygen-com/hyperframes --full-depth .agents/skills

适用场景

一句话生成产品介绍视频

这是 HyperFrames 最典型的用法。你给 AI 一句话——“用 /hyperframes 做一个 10 秒的产品介绍，带淡入标题、背景视频和轻柔的背景音乐”。AI 自动生成 HTML 代码、配上动画、引入媒体，你只需要运行渲染命令就能出片。

把文章自动变成讲解视频

写了一篇技术博客或者产品文档，想转成视频发到 B 站或抖音。把文章丢给 AI，说“用 /hyperframes 把这篇 PDF 总结成一个 45 秒的讲解视频”。AI 会自动提炼核心内容、生成配音脚本、配上动画和转场。

GitHub PR 代码审查视频

团队代码审查的时候，与其让大家看几百行 diff，不如生成一个 2 分钟的视频讲解这次改了什么。AI 会分析 PR 的 diff、commits 和变更文件，自动生成代码变更讲解视频。

批量生成社交媒体短视频

内容创作者需要为大量商品或文章生成短视频。HyperFrames 的确定性渲染特性让批量生产成为可能——同样的模板、不同的数据，跑一遍脚本批量输出。

Figma 设计稿转视频

设计稿做完了，想快速生成一个动态展示视频。HyperFrames 支持从 Figma 文件直接导入——包括 assets、品牌标识、组件和重建的动效。

使用案例

案例一：在 Claude Code 中一句话生成视频

在 Claude Code 中安装好 HyperFrames 技能后，直接在对话框里输入：

“Using /hyperframes, create a 10-second product intro for https://example.com with a fade-in title, a background video, and background music.”

AI 会自动规划视频结构、生成 HTML 代码、配置动画、引入媒体资源，然后打开浏览器预览。你确认效果后运行渲染命令即可出片。

案例二：把一篇文章自动做成视频

一位开发者把自己的一篇自我介绍 Markdown 文章丢给 Claude Code：

“把这个文章使用 HyperFrames 做个视频。”

AI 会先问两个问题——视觉风格（科技感暗色/简约明亮/活力彩色）和视频用途（短视频/个人介绍/B站片头）。选完之后，AI 自动执行 npx hyperframes init 初始化项目，生成完整的项目结构：

text
dqtx-self-intro/
├── assets/          # 静态资源（图片、音乐等）
├── AGENTS.md        # AI 协作文档
├── CLAUDE.md        # Claude 技能配置
├── DESIGN.md        # 视觉设计方案
├── hyperframes.json # 项目配置
├── index.html       # 核心！视频的源文件
└── meta.json        # 项目元数据

其中 index.html 是最重要的文件——整个视频的画面、动画、时序全写在这里面。

案例三：从 Figma 设计稿生成视频

你在 Figma 里做好了一个产品的视觉设计稿，想快速生成一个动态展示视频。直接在 AI 助手中说：

“用 /hyperframes 从我的 Figma 文件生成一个展示视频。”

AI 会通过 Figma 导入技能提取设计稿中的 assets、品牌色、字体和布局信息，然后生成对应的 HyperFrames HTML 代码。

案例四：PR 转代码审查视频

团队有一个重要的 PR 需要审查：

“用 /hyperframes 把 #1234 这个 PR 生成一个讲解视频。”

AI 会分析 PR 的 diff，提取变更摘要，生成一个带字幕和动画的代码变更讲解视频。

案例五：Codex 中生成科普短视频

在 Codex 中安装 HyperFrames 插件后，打开计划模式，输入：

“使用 HyperFrames 制作一个科普视频，内容基于这篇文章 [链接地址]。”

AI 会先生成详细的视频大纲和分镜计划，确认后再生成完整的 HTML 代码和动画。

注意事项

Node.js 版本必须 ≥ 22。 低版本运行 HyperFrames CLI 会报错。

安装时务必加 --full-depth。 不加的话拿到的可能是旧版本的技能。安装后记得重启 AI 助手。

渲染是手动的。 AI 会生成代码、打开预览，但最终渲染成 MP4 需要你手动执行 npx hyperframes render。这不是 AI 的局限，而是设计使然——让你在出片前有机会检查效果。

本地渲染免费，不消耗 HeyGen 积分。 HyperFrames 本身是开源免费的，所有渲染都在你本地机器的浏览器和 FFmpeg 中完成。但如果用到 HeyGen 的托管配音、虚拟形象或生成媒体服务，那些可能有单独的费用。

核心技能 vs 全部技能。 首次安装建议只选 Core Skills 核心组。其他专项技能（如 pr-to-video、faceless-explainer）会在你第一次用到对应功能时自动按需安装。不需要一次性装完所有 20 个技能。

技能更新用 npx hyperframes skills update。 这个命令会刷新核心技能和已安装的 HyperFrames 技能，保持最新版本。