什么是HyperFrames？
HyperFrames 是一款让 AI 代理通过编写 HTML、CSS 和 JavaScript 来创作视频的开源工具，由 HeyGen 发起并面向社区维护。你不需要传统视频剪辑软件，只要会写网页代码，就能用“氛围编码”（Vibe-Coding）的方式快速生成动态视频。项目采用 Apache 2.0 协议，完全免费，适合开发者、AI 爱好者以及想探索视频自动化的创作者。
HyperFrames的核心功能有哪些？
- AI 代理驱动视频创作：直接让 AI 代理（如 Claude Code）通过编写 HTML/CSS/JS 代码来生成视频画面，无需手动拖拽时间线。
- 开源 & 社区共建：基于 Apache 2.0 许可，代码完全开放，你可以在 GitHub 上查看、修改和贡献。
- Playground 实时预览：提供在线 Playground 环境，一边写代码一边看视频效果，快速迭代。
- Compositions 模板库：内置多个示例 composition（如 Siri 介绍动画），方便你直接修改或参考。
- 跨平台 CLI 集成：支持通过
npx一键安装 HyperFrames skill，无缝接入 Claude Code 等 AI 工具。 - 纯 Web 技术栈：视频本质上是动态 HTML 页面，意味着你可以用浏览器调试、导出，与现有前端工具链完美兼容。
HyperFrames的使用案例有哪些？
- 快速制作产品演示视频：用代码编写一个交互式产品介绍，替代传统视频软件，适合创业团队快速迭代。
- AI 生成动态内容：让 AI 代理根据你的文案自动生成配套动画，用于社交媒体、教学短片或营销素材。
- 开发者创意项目：在黑客松或个人项目中，用 HyperFrames 把代码逻辑直接变成可视化动画，省去学习专业剪辑软件的时间。
- 教学与演示：教师或技术博主可以用 HyperFrames 制作代码演示视频，把代码执行过程可视化。
- 自动化视频生产流水线：结合 CI/CD 流程，让 AI 代理自动根据数据生成日报、周报动画视频。
如何使用HyperFrames？
- Step 1：打开 HyperFrames Playground 或 clone 项目仓库，查看示例 compositions（如
siri-intro.html）。 - Step 2：在编辑器中修改 HTML、CSS 或 JS 代码，调整视频内容、样式和动画逻辑。
- Step 3：实时预览效果，不满意继续调代码，直到视频符合预期。
- Step 4：如果想用 AI 辅助编辑，在终端运行
npx skills add heygen-com/hyperframes安装 skill，然后通过 Claude Code 等工具直接语音或文字指令生成视频。 - Step 5：导出最终视频文件（或直接使用 HTML 页面分享），发布到你需要的地方。
