📹 它是什么？AI 写视频的“语法手册”

HyperFrames 是 HeyGen 开源的一个视频渲染框架——用 HTML 写视频，专门为 AI 代理设计。而 hyperframes-core 是这个框架的 核心技能插件，本质上是一份给 AI 代理看的“技术契约”。 你可能用过视频剪辑软件，也知道怎么用 HTML 写网页。但让 AI 自动生成一段能渲染出 MP4 视频的 HTML 代码？这完全是另一回事。AI 如果不懂 HyperFrames 的底层规则，写出来的 HTML 可能看起来没问题，但一渲染就各种报错——时序对不上、动画跑偏、媒体播不出来。 hyperframes-core 解决的就是这个问题。它教 AI 代理理解 HyperFrames 的“语法”： 如何用 data-* 时间轴属性 声明每个元素的出场和消失时机 如何用 class="clip" 标记可剪辑的片段 如何组织和嵌套 音轨（tracks） 和 子合成（sub-compositions） 如何声明和使用 变量（variables） 实现渲染时的动态替换 如何遵循 确定性渲染规则，保证每次渲染结果一致 一句话总结：hyperframes-core 是 AI 代理的“视频合成语法书”——它不直接生成视频，而是教会 AI 如何写出能被 HyperFrames 渲染引擎正确解析的 HTML 代码。
hyperframes-core 插件把 HTML 变成可渲染的视频合成规范
hyperframes-core 插件把 HTML 变成可渲染的视频合成规范

🛠️ 第一次使用：两步完成安装

安装 hyperframes-core 非常简单，只需在终端执行一条命令。 前置准备 在安装之前，你需要确认： 已安装 Node.js（v18 或更高版本） 你使用的 AI 编程环境支持 skills（Claude Code、Cursor、Gemini CLI、Codex 等） 已安装 Chrome Headless 和 FFmpeg（HyperFrames 渲染视频需要这两个依赖） 正式安装 第一步：打开终端 打开你的终端或命令行工具（Terminal、iTerm、Windows Terminal 等）。 第二步：执行安装命令 复制并运行以下命令： bash npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-core 安装完成后，hyperframes-core 会自动配置到你的 AI 编程环境中，在 Claude Code、Cursor 或 OpenClaw 中即可直接使用。 💡 小提示： HyperFrames 一共提供了 20 个技能插件。如果你不确定需要哪些，建议先只装核心技能组（Core Skills）——hyperframes-core 是其中之一。后续当 AI 遇到具体的创作需求时，/hyperframes 路由技能会自动按需安装对应的工作流插件。如果想一次性安装全部 20 个技能，可以运行 npx skills add heygen-com/hyperframes --all。

🎯 谁适合用？三个典型场景

hyperframes-core 不是给普通视频创作者用的，它面向的是 用 AI 编程代理来自动化生成视频 的开发者。 场景一：用 AI 代理批量生成营销视频 你运营着一个 SaaS 产品，每周都要发布新产品功能的演示视频。以前需要人工剪辑，现在让 Claude Code 配合 HyperFrames 自动生成——给 AI 一个产品页面 URL，它就能自动抓取内容、生成脚本、合成视频。hyperframes-core 确保 AI 写出的 HTML 符合渲染规范，不会翻车。 场景二：把 PR 代码变更自动变成讲解视频 你的团队每天有大量 Pull Request 需要 Code Review。用 HyperFrames 的 /pr-to-video 工作流，AI 可以自动把 PR 的代码变更生成一段讲解视频。hyperframes-core 在背后保障了视频合成的技术正确性。 场景三：为产品文档生成动态演示 你正在写一份技术文档，想插入一段产品功能的动态演示视频。让 AI 代理根据文档内容自动生成一段 10-30 秒的操作演示视频——不需要打开任何剪辑软件，全部在终端里完成。 ⚠️ 不适合谁： 如果你只是想手动用 HTML 写一个视频，或者不熟悉命令行和 AI 编程代理，那么直接使用 HyperFrames 的 CLI 工具可能更合适。hyperframes-core 是为 AI 代理准备的“教学材料”，不是给人类直接使用的操作手册。

💡 一个真实的使用案例

假设你正在用 Claude Code 开发一个新产品，明天要发布，需要一个 10 秒的产品介绍视频。 传统做法：打开剪辑软件 → 找素材 → 剪片子 → 加字幕 → 配音乐 → 导出。最快也得一两个小时。 用 HyperFrames + hyperframes-core 的做法： 第一步，在 Claude Code 中安装 HyperFrames 技能（hyperframes-core 会自动包含在核心技能组中）： bash npx skills add heygen-com/hyperframes 第二步，在 Claude Code 中向 AI 发出指令： “Using /hyperframes, create a 10-second product intro for https://myproduct.com with a fade-in title, a background video, and subtle background music.” 第三步，AI 代理会： 读取 /hyperframes 路由技能，理解这是一个“产品发布视频”需求 自动调用 hyperframes-core 中的合成规范，生成符合渲染要求的 HTML 代码 调用对应的创作工作流插件完成视频合成 输出可渲染的 HTML 文件和预览链接 整个过程可能只需要几分钟，全程在终端里完成，不需要打开任何视频编辑软件。 hyperframes-core 在其中的角色是：确保 AI 生成的 HTML 代码在语法和结构上是正确的，不会因为时序声明错误、媒体引用问题或动画配置不当而导致渲染失败。

🤖 这个插件适合哪些 AI 工具？

hyperframes-core 是专门为 AI 编程代理设计的技能插件，支持以下 AI 工具： Claude Code：Anthropic 推出的终端内 AI 编程助手，是 HyperFrames 的首选运行环境。安装后技能会注册为斜杠命令，输入 /hyperframes 即可调用。 Cursor：集成了 AI 能力的现代化代码编辑器，支持 skills 加载。 Gemini CLI：Google 的 AI 编程命令行工具，同样支持 HyperFrames 技能。 Codex：OpenAI 的编程代理，HyperFrames 提供了专门的 Codex 插件打包流程。 GitHub Copilot CLI：GitHub 的命令行 AI 助手，通过 copilot /skills reload 即可加载 HyperFrames 技能。 Google Antigravity：Google 的 AI 开发环境，支持在项目目录中安装 HyperFrames 技能。 其他支持 skills 的 AI 编程代理：只要你的 AI 工具支持 vercel-labs/skills 规范，hyperframes-core 就能正常工作。 💡 小提示： 安装完成后，建议重启 AI 代理的会话，确保技能正确加载。在 Claude Code 中，技能会注册为斜杠命令；在其他代理中，可能需要通过对应的技能调用方式来激活。

📊 社区数据与口碑

hyperframes-core 是 HeyGen 开源项目 HyperFrames 的一部分。截至 2026 年中，HyperFrames 在 GitHub 上已获得 超过 11,200 颗 Star。hyperframes-core 单个技能在 Learn Skills 平台上的安装量已超过 27.3 万次，趋势评分 2.5K。 社区评价普遍认可它“把视频制作变成代码”的设计理念。有开发者评论说：“HyperFrames 的真正野心是让 AI 自己拍视频”。而 hyperframes-core 正是实现这一野心的 底层基石——没有它，AI 代理就不知道如何写出能被正确渲染的 HTML 视频合成代码。 当然，hyperframes-core 定位非常明确：它只负责“技术契约”，不负责创意方向。如果你需要 AI 理解配色方案、字体风格、叙事节奏等创意层面的内容，需要配合使用 hyperframes-creative 等其他技能。这种“一个技能只做一件事”的设计哲学，让整个 HyperFrames 技能体系保持了良好的可组合性和可维护性。