跳到主要内容HyperFrames 提示词工程 · prolist返回项目库
查看仓库原始简介
Write HTML. Render video. Built for agents.
项目解读由 AI 根据历史资料整理，尚未经人工复核。仓库资料更新于 2026-09-08，与历史解读分开保留。
项目概览
HyperFrames 是由 HeyGen 开源的一款 HTML-to-Video 渲染框架，核心理念是“Write HTML. Render video. Built for agents”。它让 AI Agent（如 Claude Code、Cursor、Codex）能够用纯 HTML + GSAP 动画来“编写”视频，再通过无头浏览器确定性渲染为 MP4/WebM 视频文件。框架不是视频编辑器，而是声明式视频合成框架，用户写 HTML，输出视频。其设计哲学是 Agent-First，通过三个 Slash Command（/hyperframes、/hyperframes-cli、/gsap）将框架知识注入 Agent 上下文，并通过自然语言词汇表（如“smooth”、“bouncy”、“dramatic”）直接映射到 GSAP easing 函数，实现意图到代码的精准映射。框架支持冷启动（从零描述）和暖启动（喂素材转化）两种 Prompt 形态，并强调小步精准修改的迭代原则。
解决什么问题
传统视频制作链路存在结构性缺陷。GUI 工具（如 After Effects、Premiere、Final Cut）不可编程，AI Agent 无法操作。代码方案（如 Remotion、Motion Canvas）API 偏向程序员思维，AI Agent 需要理解大量框架专有概念。提示词与实现脱节，代码质量取决于模型对目标框架的理解程度。迭代反馈断裂，每次修改需重新生成完整代码。Canvas 或随机动画生成的视频缺乏帧级确定性，可能出现闪烁、跳变。HyperFrames 优化了“自然语言 → HTML 视频”这一整段链路，把提示词作为入口，把 HTML 作为中间表示，把无头浏览器作为渲染器。
工作方式
HyperFrames 的 Composition 就是一个 HTML 文档，通过 data-* 属性（如 data-start、data-duration、data-track-index）定义元素出现时间、持续时间和轨道。支持视频、图片、音频和子合成四种剪辑类型。渲染引擎基于 Playwright 的无头 Chromium，通过 GSAP Timeline 逐帧执行，帧截图与音频混音后由 FFmpeg 编码输出。框架通过 Skills 系统（兼容 vercel-labs/skills 规范）注入领域知识，三个 Slash Command 分别覆盖 Composition 编写、CLI 命令和 GSAP 动画 API。词汇表将自然语言形容词映射到框架设置，如“smooth”映射到 power2.out，“bouncy”映射到 back.out。确定性渲染通过三条铁律保证：禁止 Math.random()、所有 GSAP Timeline 注册到 window.__timelines、Timeline 构建中不允许 async/await 或 fetch()。
核心能力
- Agent 原生设计，为 AI Agent 编写视频而打造
- 纯 HTML + CSS 合成语言，零学习成本
- 自然语言词汇表驱动，非技术人员也能精确控制
- 帧级确定性渲染，同一 HTML 渲染出相同视频
- 支持冷启动和暖启动两种 Prompt 形态
- 内置 TTS 集成（Kokoro）
- 支持透明通道（WebM 输出 Alpha 通道）
- 提供 50+ Block Catalog 预置组件
- 支持 Marker Highlights 手绘强调效果
- 提供 lint 和 validate 调试工具
使用前需要了解
- AI 整理 · 本地测试，未经人工复核；依据历史报告节选，不代表当前产品状态。
- 复杂动画受限，GSAP 不如 After Effects 特效丰富。渲染速度较慢，无头浏览器逐帧截图。实时预览依赖本地浏览器服务器。音频处理简单，只有基本混音，没有专业 DAW 能力。社区生态早期，Block 和插件数量有限。不建议用于需要专业级视觉特效（粒子系统、3D 渲染、复杂合成）、多人协作的复杂视频项目、实时视频处理（直播、视频会议）和纯音频制作的场景。
AI 中文译文，非官方翻译；安装命令与技术细节请对照原文。
npm version（请在原文查看）
npm downloads（请在原文查看）
License（请在原文查看）
Node.js（请在原文查看）
Discord（请在原文查看）
编写 HTML。渲染视频。为智能体而生。
快速开始 |
案例展示 |
在线体验 |
目录 |
文档 |
Discord
HyperFrames 是一个开源框架，用于将 HTML、CSS、媒体和可搜索动画转换为确定性的 MP4 视频。你可以通过 CLI 在本地使用它，也可以借助技能（skills）从 AI 编码智能体中使用，或者将其作为托管创作工作流背后的渲染核心。
快速开始
使用 AI 编码智能体
安装 HyperFrames 技能，然后描述你想要的视频：
npx skills add heygen-com/hyperframes
选择器打开时没有任何预选项目——核心技能组就是你所需要的全部：/hyperframes 路由器会按需安装每个创作工作流。智能体和非交互式运行应改用 npx hyperframes skills update——它只安装精确的核心集，而 skills add --all 会安装仓库中的每一个 SKILL.md——即 20 个已发布的技能，外加 .claude/skills / 下的六个仓库内部技能。如需完整的已发布集合，请使用 。
.agents/skills
npx hyperframes skills
skills add 解析 skills.sh 注册表 blob，该注册表可能比 main 滞后数小时。npx hyperframes skills update 从当前的 main 安装，因此当你需要最新版本的技能时，请使用它。
使用 /hyperframes，创建一个 10 秒的产品介绍视频，包含淡入标题、背景视频和微妙的背景音乐。
这些技能教会智能体 HyperFrames 的生产循环：规划视频、编写有效的 HTML、连接可搜索动画、添加媒体、检查、预览和渲染。它们适用于 Claude Code、Cursor、Gemini CLI、Codex 以及其他支持技能（skills）的编码智能体。
技能
HyperFrames 附带 20 个技能，智能体可按需加载。请先阅读 /hyperframes——它是路由器和能力地图；它会为任何“帮我做一个……”的请求（视频、演示文稿或作品集移植）选择工作流，并指向下面的领域技能。
默认使用核心集——路由器会按需安装每个创作工作流。npx hyperframes skills update 可从任何位置精确安装该集合；交互式选择器（npx skills add heygen-com/hyperframes）将其列为“核心技能”组，且没有任何预选项目。该选择器仅限交互式——没有 --skill 的非交互式或智能体运行将安装全部 20 个技能。使用 npx skills add heygen-com/hyperframes --all 可有意安装全部 20 个（跳过选择器），或使用 npx skills add heygen-com/hyperframes --skill <name> 仅安装一个（使用裸名称，不带前导 /）。
此后安装保持精简：npx hyperframes init 保持核心集最新（路由器、hyperframes-* 领域技能和 media-use——外加任何已安装的内容；/figma 保持按需安装），并且永远不会扩展部分安装；创作工作流按需安装——路由器在进入工作流之前会运行 npx hyperframes skills update <workflow>。不会在后台重新拉取完整集合。
上传到 Codex
从已提交的 HEAD 版本的清单、品牌资产和技能构建可上传的 Codex 插件归档：
bun run package:codex-plugin
这将写入 dist/hyperframes-plugin.zip，其中包含 hyperframes/ 根文件夹，如果归档超过 Codex 的 100 MB 上传限制，则会失败。
路由器
创作工作流
领域技能（按需加载）
创作工作流所组合的原子能力——在需要特定层时调用。
手动使用 CLI
npx hyperframes init my-video
cd my-video
npx hyperframes preview # preview in browser with live reload
npx hyperframes render # render to MP4
你可以构建什么
需要灵感？浏览 展示 查看你可以观看、阅读、运行和混音的成品视频。
- 产品发布视频和功能公告
- 带动画代码差异、配音和字幕的 PR 演示
- 数据可视化、图表竞赛和地图动画
- 带动态字幕、叠加层和音乐的社交媒体视频
- 文档转视频、PDF 转视频和站点导览解说
- 用于自动化内容管道的可复用动态图形
Frame.md
每个品牌都有 design.md。但没有一个是为镜头而写的。frame.md 是缺失的翻译层：它获取你的网页上下文设计规范，并针对帧进行反转 — 相同的令牌、相同的规则，但重写后 AI 代理可以无需猜测比例或依赖网页界面即可合成宣传视频。
输出是你的整个工具链都能读取的 DESIGN.md 超集。原子保持神圣。合成保持自由。数字来自脚本。
工作原理
将视频定义为 HTML。添加数据属性以控制时间和轨道。使用 GSAP、CSS、Lottie、Three.js、Anime.js、WAAPI 或您自己的帧适配器来实现可定位的动画。
<div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080">
<video
class="clip"
data-start="0"
data-duration="6"
data-track-index="0"
src="intro.mp4"
muted
playsinline
></video>
<h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day</h1>
<audio
data-start="0"
data-duration="6"
data-track-index="2"
data-volume="0.5"
src="music.wav"
></audio>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });
tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
window.__timelines = window.__timelines || {};
window.__timelines.launch = tl;
</script>
</div>
在浏览器中即时预览。在本地或 Docker 中渲染。渲染器在无头 Chrome 中定位每一帧，并使用 FFmpeg 编码结果，因此相同的输入会产生相同的视频。
HyperFrames 技术栈
HyperFrames 是开源渲染引擎，加上一套不断扩展的、围绕 HTML 原生视频创作的工具。
目录
npx hyperframes add flash-through-white # shader transition
npx hyperframes add instagram-follow # social overlay
npx hyperframes add data-chart # animated chart
为什么选择 HyperFrames？
- HTML 原生： 合成是带有数据属性的 HTML 文件。无需 React，没有专有时间线格式。
- 对代理友好： 代理已经会写 HTML，而且 CLI 默认非交互。
- 确定性： 相同输入、相同帧、相同输出。专为 CI、回归测试和自动渲染而构建。
- 无需构建步骤：
index.html 合成可直接播放，并可在浏览器中直接预览。
- 基于适配器的动画： 可引入 GSAP、CSS 动画、Lottie、Three.js、Anime.js、WAAPI 或自定义运行时。
- 开源： Apache 2.0 许可证，无按渲染收费或商业使用门槛。
HyperFrames 与 Remotion 对比
HyperFrames 的灵感来自 Remotion。两者都使用无头 Chrome 和 FFmpeg 渲染视频。主要区别在于创作模型：Remotion 押注 React 组件；HyperFrames 押注人类和代理都能轻松编写的纯 HTML。
文档
包
社区
开发说明
该仓库使用 Git LFS 存储 packages/producer/tests/**/output.mp4 下的黄金回归测试基线（约 240 MB 的 .mp4 文件）。如果您要克隆完整仓库进行开发，请先安装 Git LFS：
# macOS
brew install git-lfs
# Ubuntu / Debian
sudo apt install git-lfs
# Windows
winget install GitHub.GitLFS
# Then, once per machine
git lfs install
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git
许可证
09.08
