HyperFrames

用写网页的办法写视频：画面是 HTML 和 CSS（网页的骨架和样式），动画用 GSAP 这类网页动画库，再标上每个元素第几秒出现、持续多久。它在后台打开一个看不见的浏览器，一帧一帧截下来，再用 FFmpeg 合成 MP4，同样的输入每次渲出来都一模一样。它配了一套给 AI 用的 skill，装上以后，Claude Code、Codex 这类 AI 助手就知道怎么规划镜头、写对代码、预览和出片。

适合谁

• 想让 AI 从零做动画解说、片头、数据图动画的人。
• 想做带字幕、配乐的短视频，又不想学剪辑软件的人。
• 习惯写网页、不想学 React 的人（同类工具 Remotion 要写 React）。

怎么开始

1. 电脑上先装 Node.js 22 或更新的版本（跑这套工具的基础软件）和 FFmpeg（处理音视频的工具），不会装就让 Claude Code 帮你装。
2. 装 skill：把仓库链接发给 Claude Code，说「帮我装上 HyperFrames 的 skill」。想自己装，就在命令行（电脑上那个黑底白字、靠打字下命令的窗口）里运行 npx skills add heygen-com/hyperframes，弹出的选单默认什么都没勾，勾上「Core Skills」那一组就够了。
3. 对 AI 说你要什么。说明里的例子是：「用 /hyperframes 做一支 10 秒的产品片头，标题淡入，有背景视频和轻柔的背景音乐」。
4. 它会写好工程，在浏览器里给你预览，满意了再渲成 MP4。

要注意

• Apache 2.0 许可，开源免费，渲多少条都不收费，商用也没有门槛。
• 自带几百个现成的转场、字幕、图表、地图组件，AI 会先从里面找，不用每样都从头画。
• 找配乐、配音这类素材的 skill，可以走 HeyGen 的服务，也能用免费的本地工具。