HyperFrames

HyperFrames 是一个开源框架，它颠覆了传统的视频制作流程：你写 HTML/CSS，它渲染 MP4 视频。

专为 AI 编码代理（如 Claude Code, Cursor, Codex）设计，HyperFrames 将视频创作转化为代理擅长的领域——编写结构化代码。它无需复杂的 React 构建步骤或专有 timeline 格式，只需标准的 HTML 文件配合特定的 data-* 属性，即可通过无头浏览器和 FFmpeg 生成确定性的、帧精确的视频。

核心理念：HTML 即视频

• 零构建步骤：合成文件就是 index.html，可以直接在浏览器中预览，实时重载。
• 确定性输出：相同的输入永远产生相同的帧序列，完美适配 CI/CD、回归测试和自动化渲染管道。
• 代理友好：AI 代理已经精通 HTML/CSS。HyperFrames 通过一套简单的契约（如 class="clip", data-duration），让代理能轻松操控时间轴、动画和媒体轨道。
• 基于适配器的动画：支持 GSAP, CSS Animations, Lottie, Three.js, Anime.js, WAAPI 等多种运行时，通过统一接口进行帧精确控制。

为 AI 代理打造的技能生态系统

HyperFrames 提供了一套完整的 Agent Skills，让 AI 能够自主规划、编写、调试和渲染视频。

1. 核心路由器 /hyperframes

这是入口技能。当你对代理说“做一个产品介绍视频”时，路由器会分析意图，并自动按需加载以下工作流技能：

2. 领域原子技能

当需要精细控制时，代理可以调用更底层的技能：

• /hyperframes-animation: 处理所有动画逻辑和过渡。
• /hyperframes-keyframes: 创建跨运行时的关键帧动画。
• /media-use: 管理媒体资产（BGM, SFX, 图像），支持本地文件或通过 AI 生成缺失资产。
• /hyperframes-audio: 高级音频混合，包括画外音雕刻、效果链和自动化包络。
• /figma: 直接从 Figma 导入资产、令牌和动效。

快速开始

方式一：通过 AI 代理使用 (推荐)

在你的编码代理环境中安装技能：

npx skills add heygen-com/hyperframes

然后直接给代理下达指令：

“使用 /hyperframes，创建一个 10 秒的产品介绍视频，带有淡入标题、背景视频和微妙的背景音乐。”

方式二：手动 CLI 使用

# 初始化项目
npx hyperframes init my-video
cd my-video

# 在浏览器中实时预览
npx hyperframes preview

# 渲染为 MP4
npx hyperframes render

要求：Node.js 22+, FFmpeg

Frame.md：视频的设计系统

HyperFrames 引入了 frame.md 概念，作为传统 Web design.md 的视频翻译层。它将品牌设计规范（令牌、排版、配色）转换为 AI 代理可理解的视频合成规则，确保生成的视频符合品牌一致性，而无需代理去猜测比例或界面元素。

HyperFrames vs Remotion