HyperFrames：写 HTML 就能出视频，专为 AI Agent 设计

做视频很慢。

传统视频工具是时间轴驱动的：拖素材、调关键帧、渲染、导出、修改、再渲染。你没法自动化这个流程，更没法让 AI 帮你做——因为 Premiere 不接受 prompt。

如果你想让代码批量生成视频，或者让 AI agent 独立完成一支视频，大多数方案会跟你翻脸。

HyperFrames 的解法很直接：把视频当代码写。HTML 是你会的，CSS 是你会的，动画库随你选。写完保存，浏览器预览。确认没问题，一条命令出 MP4。

而且它是 24k star 的 Apache 2.0 开源项目，没有按次渲染收费，没有商业授权门槛。

技能能做什么，不能做什么

安装 HyperFrames Skills 后，你的 AI 编程助手（Claude Code、Cursor、Gemini CLI、Codex 等）会获得一套完整的视频生产指令。它不是一个”一键生成视频”的魔法工具，而是一个让 Agent 知道怎么搭建视频项目的技能包。

Skills 提供的能力：

  • 项目脚手架：Agent 会调 npx hyperframes init 初始化视频项目目录
  • 写 HTML 和 CSS：Agent 按照你描述的场景，写布局、排版、颜色、动画
  • 接线动画：Agent 用 GSAP、CSS Animation、Lottie 等库写可 seek 的动画时间线
  • Lint 检查：Agent 会验证 HTML 结构和数据属性的正确性
  • 预览和渲染：Agent 调 npx hyperframes preview 和 npx hyperframes render 完成预览和导出
  • 设计模板：Agent 可以从 10 套 frame.md 模板中选择配色和排版方案
  • Component Catalog：Agent 可以安装复用组件——转场特效、图表动画、字幕叠加、社交贴纸等

Skills 不提供的东西：

  • 不生成图片：产品截图、插图、背景图需要你自己准备
  • 不生成视频素材：B-roll、背景视频需要你自己提供
  • 不生成音频：背景音乐、旁白配音需要你自己录制或下载
  • 不生成 AI 数字人：HyperFrames 只管合成和渲染，不生成内容资产

一句话总结：你提供素材，Agent 写代码组装，HyperFrames 渲染出 MP4。

完整使用流程

1. 安装 Skills

在你的项目目录下运行：

npx skills add heygen-com/hyperframes

这条命令会把 HyperFrames 的生产规范下载到项目中的 .agents/skills/ 目录。之后你的 AI 编程助手就能响应 hyperframes 相关的指令。

2. 准备素材

把你要用的图片、视频片段、音频文件准备好。支持的格式：

  • 图片：PNG、JPG、WebP、SVG
  • 视频：MP4
  • 音频：WAV、MP3

这些是你自己要提供的。如果你需要 AI 数字人出镜，可以用 HeyGen 生成数字人视频后，再导入 HyperFrames 做合成。

3. 给 Agent 下指令

打开你的 AI 编程助手，直接用自然语言描述：

用 hyperframes 创建一个 10 秒的产品介绍视频，带淡入标题、背景视频和轻背景音乐。
素材在 assets/ 目录下。

Agent 会自动执行以下步骤：

  1. 规划视频结构（几个镜头、每个镜头多长、出现顺序）
  2. 用 npx hyperframes init 创建项目脚手架
  3. 写 index.html——布局、CSS 样式、数据属性
  4. 写动画时间线——GSAP 或 CSS Animation
  5. 引用你提供的素材文件
  6. 跑 npx hyperframes lint 检查语法
  7. 跑 npx hyperframes preview 打开浏览器预览
  8. 你确认效果后，Agent 跑 npx hyperframes render 导出 MP4

整个过程中你不需要打开任何视频编辑软件。

4. 检查和导出

每次渲染都是确定性的——同一个 index.html，每次出完全相同的 MP4。所以你可以把视频项目放进 Git，在 CI 里跑渲染，做回归测试。

上手示例：一个 5 秒的标题动画视频

下面用一个极简示例，把安装、用 Agent、出视频的完整链路跑通。整个过程不需要任何外部素材，只有文字、颜色和动画。你会清楚地看到：每一样东西是谁生成的、Agent 做了哪些事、最终视频是怎么出来的。

第 1 步：安装 Skills 并确保环境就绪

如果你的编程助手还没装 Skills：

npx skills add heygen-com/hyperframes

这条命令把 HyperFrames 的生产规范（项目结构、HTML 语法、动画接线方式、lint 规则）下载到 .agents/skills/。之后 Agent 就知道怎么写视频了。

确保本地装了 Node.js 22+ 和 FFmpeg——这是渲染引擎的依赖。

第 2 步：让 Agent 创建项目

在编程助手里说：

用 hyperframes 创建一个 5 秒的标题动画视频 demo。
背景用紫蓝渐变，标题 "Hello HyperFrames"，副标题 "写 HTML，出视频"，
标题和副标题依次淡入上浮。不需要外部素材。

Agent 会执行完整的生产链路：

  1. 调 npx hyperframes init demo 初始化项目目录
  2. 规划 5 秒视频的时间结构：标题从 0.5s 开始、副标题从 1.2s 开始
  3. 写 index.html：包含 <style> 里的布局和颜色、<div id="stage"> 里的视频 Composition、数据属性定义轨道和时间
  4. 写 GSAP 动画时间线：标题和副标题的 opacity + y 位移，用 paused: true 模式让 HyperFrames 能逐帧 seek
  5. 跑 npx hyperframes lint 检查语法
  6. 跑 npx hyperframes preview 在浏览器里实时看效果

第 3 步：看 Agent 生成的 index.html

Agent 写完的 demo/index.html 大致是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Demo</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      width: 1920px; height: 1080px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      font-family: system-ui, sans-serif;
    }
    .center {
      text-align: center;
      color: white;
    }
    .center h1 {
      font-size: 96px;
      font-weight: 800;
      margin-bottom: 16px;
    }
    .center p {
      font-size: 36px;
      font-weight: 300;
      opacity: 0.8;
    }
  </style>
</head>
<body>
  <div id="stage" data-composition-id="main" data-start="0" data-width="1920" data-height="1080">
    <section class="clip center" data-start="0" data-duration="5" data-track-index="0">
      <h1>Hello HyperFrames</h1>
      <p>写 HTML，出视频</p>
    </section>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
  <script>
    const tl = gsap.timeline({ paused: true });
    tl.from("h1", { opacity: 0, y: 60, duration: 1, ease: "power3.out" }, 0.5);
    tl.from("p", { opacity: 0, y: 30, duration: 0.8, ease: "power3.out" }, 1.2);
    window.__timelines = window.__timelines || {};
    window.__timelines.main = tl;
  </script>
</body>
</html>

注意这个例子里：

  • 图片：没有用任何图片。渐变背景和文字排版是 CSS 写的，由 HyperFrames 渲染引擎在 headless Chrome 里逐帧绘制出来的。如果你需要在视频里放产品截图，把图片文件放在 demo/ 目录下，Agent 会在 HTML 里用 <img src="screenshot.png"> 引用——图片是你提供的，不是 Agent 生成的。
  • 视频素材：没有用任何视频片段。所有动态效果都来自 GSAP 写的动画时间线——文字淡入（opacity 从 0 到 1）和上移（y 从偏移值到 0）。如果你需要背景视频，把 mp4 文件放在项目目录，Agent 会用 <video src="..."> 引用——视频素材是你提供的，不是 Agent 生成的。
  • 音频：没有用任何音频文件。这个 demo 是无声的。如果你需要背景音乐或旁白，把 wav/mp3 文件放在项目目录，Agent 会用 <audio src="..."> 引用——音频文件是你提供的，不是 Agent 生成的。
  • 动画：GSAP 动画是 Agent 写的 JavaScript 代码，paused: true + window.__timelines 是 HyperFrames 要求的 seekable 动画模式，确保渲染引擎能跳转到任意帧。
  • 视频渲染：最终 MP4 由 npx hyperframes render 调 headless Chrome 逐帧截图 + FFmpeg 编码生成——这是 HyperFrames 做的事，不是 Agent 做的。Agent 只负责写 HTML 和调命令。

第 4 步：预览和渲染

Agent 验证语法没问题后：

npx hyperframes preview   # 在浏览器里看效果，确认排版和动画
npx hyperframes render    # 导出 demo.mp4

你会在 demo/ 目录下得到 demo.mp4。一个紫蓝渐变背景上，标题和副标题依次淡入上浮的 5 秒动画视频。

第 5 步：改造成你自己的视频

把刚才的 HTML 拿给 Agent：“把标题改成我的产品名，颜色换成我的品牌色，加一个 PNG logo 在左上角”。Agent 会改 CSS 渐变色值、替换文字、加 <img> 引用你的 logo 文件。你只需要提供 logo.png，别的都是 Agent 搞定。

核心设计：HTML 即是视频源文件

HyperFrames 的核心理念是一个直觉到会被忽视的想法：浏览器能渲染的任何东西，都应该能输出为视频。

你的项目目录里会有一个 index.html 文件，里面就是一个完整的视频 Composition：

<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>

数据属性（data-start、data-duration、data-track-index）告诉引擎每个元素什么时候出现、持续多长、属于哪个轨道。动画用你熟悉的库——GSAP、CSS Animation、Lottie、Three.js、Anime.js、WAAPI 都行。

然后三条命令走完全程：

npx hyperframes init my-video    # 脚手架
npx hyperframes preview           # 浏览器实时预览
npx hyperframes render            # 渲染出 MP4

渲染引擎在 headless Chrome 中逐帧截图，用 FFmpeg 编码成视频。同一个 HTML 输入，每次出完全相同的 MP4 输出。CI 可跑，回归可测，Agent 可控。

为什么 Agent 需要它

AI 编程助手已经能写 HTML 了——而且写得不错。但你让它做视频，它会懵。

原因很简单：现有的视频工作流不是文件驱动的。After Effects、Premiere、Final Cut 都依赖 GUI 操作，Agent 拿不到一个”可编辑的源文件”。

HyperFrames 改变了这个前提：Agent 不需要操作视频工具，它只需要写 HTML。

Skills 安装后，Agent 就拥有了完整的视频生产知识——从项目结构、HTML 语法规范、动画接线方式，到 lint 检查、预览和渲染命令。Agent 负责组装，你负责提供素材和审核结果。

frame.md：把设计系统翻译成视频语言

你的团队大概率有一份 design.md，定义了颜色、字体、间距。但这些东西面向的是网页和 App，不是 1920×1080 的 24fps 画面。

frame.md 解决的就是这个断层。

它接收你现有的设计规范，生成一份视频专用的设计指令：同样的颜色 Token、同样的字体规则，但重写成 Agent 能直接用来构图的内容——元素应该多大、动画应该多快、画面应该怎么留白。

输出是 DESIGN.md 的超集，你的整个工具链都能读。目前有 10 套模板可直接使用：Biennale Yellow、BlockFrame、Blue Professional、Bold Poster、Broadside、Capsule、Cartesian、Cobalt Grid、Coral、Creative Mode。

适合什么场景

产品发布视频和功能更新。

你已经有产品截图和文案。用 HTML 拼好布局，加 fade-in 和 slide-up，导出就是一支不丢人的发布视频。改文案不需要重新做，改 HTML 就行。

可重复使用的自动化视频管道。

把数据灌进 HTML 模板——报表、天气、比分、监控大盘——定时渲染成视频，推送到社交媒体。这个工作流里没有人需要打开剪辑软件。

Agent 驱动的视频生产。

PR 走查视频、文档转视频讲解、数据可视化动效——凡是”内容有规律、需要批量产出”的视频需求，都适合交给 HyperFrames。Agent 处理结构和逻辑，你只需要把关最终效果。

和 Remotion 的区别

HyperFrames 明确受 Remotion 启发。两者都用 headless Chrome + FFmpeg 渲染视频。

区别在创作模型：

维度HyperFramesRemotion
创作方式纯 HTML + CSS + 可 seek 动画React 组件
构建步骤无，index.html 即开即用需要 Bundler
Agent 友好度原生支持，Agent 直接写 HTML 文件需要理解 React/JSX 项目结构
分布式渲染本地 + AWS LambdaRemotion Lambda（成熟云渲染）
许可证Apache 2.0Remotion License（源码可用）

选 HyperFrames 的理由很明确：如果你想让 Agent 做视频，或者你不想在视频项目里引入 React。选 Remotion 的理由也明确：如果你的前端团队已经深度使用 React，Remotion 的组件模型会让你更顺手。

注意事项

它不是 After Effects 的替代品。

如果你想做复杂的运动图形、粒子特效或手动调色的精细动画，After Effects 仍然更合适。HyperFrames 的优势在自动化、可重复、Agent 可操作，不是手调级精细度。

你需要自己准备素材。

图片、视频片段、音频文件都需要你提供。Skills 让 Agent 学会组装视频，但不会凭空生成内容资产。如果你需要 AI 数字人，可以用 HeyGen 生成数字人后导入 HyperFrames 合成。

你需要会用 HTML 和 CSS。

这个门槛很低，但不是零。如果你完全不会前端，入门会比预想中慢。好消息是 Agent 能帮你写大部分 HTML，你只需要审查和调整。

视频渲染需要算力。

本地渲染依赖 headless Chrome + FFmpeg，长视频或高分辨率会占用大量 CPU。如果需要高频渲染，建议走 AWS Lambda 分布式方案。

动画时间控制有学习成本。

HyperFrames 用的是 seekable animation——时间轴需要能跳转到任意帧并保持状态一致。GSAP 的 paused: true + seek() 模式可以做到，但如果你习惯的是 wall-clock 动画（比如直接用 setTimeout 控制时序），需要适应这种写法。

结尾

视频生产的瓶颈不是工具不够多，而是工具没有为代码和自动化设计过。

HyperFrames 做的事很简单：把视频格式从时间轴文件变成 HTML 文件。这个转变意味着三件事——你可以用 Git 管版本，你可以用 CI 跑渲染，你的 Agent 可以独立产出完整的视频。

如果你已经在用 AI 编程助手，HyperFrames 是你离”让 Agent 做视频”最近的一步。

GitHub: https://github.com/heygen-com/hyperframes

设计模板: https://www.hyperframes.dev/design

Playground: https://www.hyperframes.dev

标签 :
分享 :

相关文章

如何把真实世界的能力封装为 Agent Skill

通用 AI Agent 能力很强，但缺少每支团队都有的东西：程序性知识。你的代码审核清单、部署手册、API 规范——这些都不在模型的训练数据里。 这就是 Agent Skill 要解 ...

Karpathy 的 LLM Wiki：让 AI 把知识编译成会生长的第二大脑

Karpathy 的 LLM Wiki：让 AI 把知识编译成会生长的第二大脑

你把 20 份 PDF 扔进 NotebookLM，问了几个问题，答案看起来不错。第二天再问一个更细的问题，AI 又从零开始检索、拼接、猜测。没有积累。没有共识。没有记忆。 Karpathy 的 L ...

跟 Claude 说一声，图就画好了：/drawio 在 Claude Code 里直接出图

跟 Claude 说一声，图就画好了：/drawio 在 Claude Code 里直接出图

你在跟 Claude Code 描述系统架构。它回复了一堆 ASCII art，差不多能看，但总觉得差点意思。你心想："要是能直接让它画张图就好了。" 可以。 draw.io 的 Claude C ...

用 PPTX Skill 生成不像 AI 做的幻灯片

AI 几秒就能生成一份演示文稿。问题在于它看起来就是 AI 做的——蓝色主题、密集项目符号、每个标题下一条装饰线。Anthropic 的 PPTX Agent Skill 换了一种思路：把幻灯片生成当 ...

Karpathy 给 Claude Code 开的药方：四个原则治住 AI 乱写代码

Andrej Karpathy 一句话戳到了痛点：LLM 会带着错误的假设一路狂奔。它们把代码搞复杂、造抽象层、乱动不该动的东西。最气人的是，它们做得彬彬有礼、信心满满、而且批量生产。 一个 CLA ...

Quartz：把 Markdown 笔记变成可搜索、可漫游的数字花园

Quartz：把 Markdown 笔记变成可搜索、可漫游的数字花园

你已经有一堆 Markdown 笔记。问题不是写不出来，而是它们永远躺在本地文件夹里：搜索靠编辑器，引用靠记忆，分享靠复制粘贴。 把这些内容搬到传统博客也不对。博客假设文章是一条时间线，数字花园假设 ...

查看更多 →