这是什么
HyperFrames 是一个开源视频渲染框架，由 heygen-com 团队维护，核心理念是“Write HTML. Render video. Built for agents.”——用 HTML 写视频，为 AI 代理而生。它可以把 HTML、CSS、媒体资源和可定位动画，转换成确定性的 MP4 视频。你既可以在本地通过命令行使用，也可以让 AI 编程代理通过技能（Skills）自动完成视频的规划、编写、预览和渲染。
目前该仓库在 GitHub 上已获得 43110 颗星、4152 次 Fork，开源协议为 Apache-2.0，最新版本为 v0.8.20。项目内置了 20 个技能，覆盖从产品发布视频到动态图形的多种创作流程。
适合谁
- 使用 Claude Code、Cursor、Gemini CLI、Codex 等 AI 编程代理的创作者，希望通过自然语言描述直接生成视频。
- 熟悉 HTML/CSS 的前端开发者，想用代码方式制作可版本控制的视频。
- 需要批量生成产品介绍、解说视频、社交媒体片段的运营人员。
- 对视频渲染流程有定制需求，希望将渲染核心嵌入自有工作流的团队。
能做什么
HyperFrames 提供了一套完整的视频创作工作流，包括：
- 产品发布视频：从产品 URL、文案或脚本生成营销视频、网站导览或社交片段。
- 无脸解说视频：将任意文本转化为解说视频，视觉元素由 AI 生成。
- PR 转视频：读取 GitHub Pull Request，自动生成更新日志或功能亮点视频。
- 字幕叠加：为已有 talking-head 视频添加字幕，不修改原始画面。
- 动态图形：制作短小的动态文字、数据图表、Logo 片头等。
- 音乐同步视频：根据音乐节奏生成歌词、幻灯片或动态宣传视频。
- 幻灯片/演示文稿：生成可导航的演示文稿，而非渲染视频。
- Remotion 迁移：将现有 Remotion (React) 合成源码迁移到 HyperFrames HTML。
此外，还有多个原子技能（如动画、关键帧、创意指导、媒体管理）可按需加载，组合出更复杂的创作流程。
使用前准备
- 安装 Node.js 22 或更高版本。
- 准备一个支持 Skills 的 AI 编码代理，如 Claude Code、Cursor、Gemini CLI、Codex。
- 建议具备基础的 HTML/CSS 知识，以便理解生成的代码或进行手动调整。
- 可选：安装 Bun，用于部分开发脚本（如打包 Codex 插件）。
安装方法
在 AI 编码代理中安装 HyperFrames 技能，然后描述你想要的视频即可。官方推荐使用以下命令：
npx skills add heygen-com/hyperframes该命令会打开交互式选择器，默认不预选任何技能，你只需要选择“Core Skills”核心技能组即可。对于非交互式环境或代理运行，建议使用：
npx hyperframes skills update这个命令会直接从当前 main 分支安装核心技能集，确保获得最新版本。如果你需要安装全部 20 个技能，可以运行：
npx skills add heygen-com/hyperframes --all或者只安装某一个技能：
npx skills add heygen-com/hyperframes --skill <技能名>注意：skills add 解析的是 skills.sh 注册表，可能比 main 分支滞后数小时；需要最新技能时请使用 npx hyperframes skills update。
使用示例
安装完成后，你可以直接向 AI 代理描述视频需求，例如：
使用 /hyperframes，创建一个 10 秒的产品介绍视频，包含淡入标题、背景视频和微妙的背景音乐。
代理会按照 HyperFrames 的生产循环工作：规划视频、编写有效的 HTML、配置可定位动画、添加媒体、检查、预览并渲染。整个过程无需手动编写视频编辑时间线。
风险与注意事项
- HyperFrames 需要本地运行环境，渲染视频会消耗一定的 CPU/GPU 资源，复杂项目可能需要较长时间。
- 项目当前有 243 个开放 issue，作为开源框架，可能会遇到一些边缘情况或文档滞后。
- 技能安装机制有版本滞后风险：
skills add可能安装到非最新的技能版本，建议在需要最新功能时使用npx hyperframes skills update。 - 非交互式运行
skills add且未指定--skill时会安装全部 20 个技能，可能超出你的实际需求；建议明确指定技能或使用核心集。 - 如果你打算将 HyperFrames 用于商业项目，请留意 Apache-2.0 许可证的条款。