HyperFrames 实战：让 AI Agent “写”出一支视频

最近试了不少 AI 视频工具，总觉得差点意思——生成式的太随机，模板套用的又太死板。

直到发现 HyperFrames，思路挺有意思：视频不是”生成”的，是”写”出来的。用 HTML + GSAP 动画定义内容，最后渲染成 MP4。更妙的是，它提供了 AI Agent Skill，让 Claude Code 这类工具懂得如何”写”视频代码。

先说说 HyperFrames 是什么

HeyGen 开源的框架，核心理念就一句话：HTML is the source of truth for video。

简单说：

HTML 定义内容和布局
CSS 定义样式
GSAP 定义动画和时间轴
命令行渲染成 MP4

关键是它有 AI Agent Skill——装上后，Agent 就懂得了视觉风格、动画原则、过渡效果、字幕同步这一整套东西。

安装

如果你用 Claude Code、Cursor、OpenCLAW 这类工具，一条命令：

npx skills add heygen-com/hyperframes

会装三个 skill：

/hyperframes - 写视频代码
/hyperframes-cli - 命令行工具
/gsap - GSAP 动画参考

手动用 CLI 也可以：

npx hyperframes init my-video
npx hyperframes preview
npx hyperframes render

需要 Node.js >= 22 和 FFmpeg。

实战：让 Agent 做一支产品介绍视频

需求

想把一篇 OpenCode Go 套餐的介绍转成短视频：

50 秒左右
价格对比、模型介绍、使用步骤
中文配音
科技感风格

给 Agent 的提示词

用 HyperFrames 制作一支 50 秒的 OpenCode Go 套餐介绍视频。

风格：Swiss Pulse（科技感、黑白+电蓝强调色）

内容结构：
1. 开场：标题 + 副标题
2. 痛点：对比竞品价格
3. 价格对比表格
4. 套餐亮点
5. 7 款模型介绍
6. 使用步骤
7. 总结 + CTA

配音：中文，Edge TTS

输出到 ~/Desktop/opencode-video/

Agent 干了什么

先定风格

我指定了 Swiss Pulse，Agent 就用了：

黑白配色 + 电蓝 #0066FF
Inter 字体，标题 96px，正文 28px
快速果断的动画，expo.out、power4.out 这种

还生成了 DESIGN.md，记录了这些规范，后面改起来也有据可查。

规划场景

Agent 把 50 秒拆成了 7 段：

场景	时间	时长
开场标题	0-5.5s	5.5s
痛点对比	5.5-10.8s	5.3s
价格表格	10.8-23.2s	12.4s
套餐亮点	23.2-30.7s	7.4s
模型介绍	30.7-37.7s	7.0s
使用步骤	37.7-43.9s	6.1s
总结 CTA	43.9-51s	7.3s

生成配音

调用 Edge TTS，按场景分段生成。这样后面调整某个场景的时长，不用重录整段。

写 HTML 代码

生成的代码大概这样：

<div data-composition-id="root" data-width="1920" data-height="1080"
     data-start="0" data-duration="51">

  <div id="scene-1" data-start="0" data-duration="5.5" data-track-index="1">
    <div class="scene-content">
      <h1 id="s1-title">OpenCode Go 套餐</h1>
      <p id="s1-subtitle">每月 $10 用 7 款国产大模型</p>
    </div>
  </div>

  <!-- 更多场景... -->

  <audio id="audio-1" data-start="0" data-track-index="10" 
         src="audio/s1.wav" data-volume="1"></audio>
</div>

<script>
const tl = gsap.timeline({ paused: true });

tl.from("#s1-title", { y: 50, opacity: 0, duration: 0.7, ease: "power3.out" }, 0.3);
tl.from("#s1-subtitle", { y: 30, opacity: 0, duration: 0.5, ease: "power2.out" }, 0.6);

// 场景过渡
tl.to("#scene-1", { opacity: 0, duration: 0.3 }, 5.2);
tl.from("#scene-2", { opacity: 0, duration: 0.3 }, 5.5);

window.__timelines["root"] = tl;
</script>

Agent 懂得几个关键规则：

先写静态布局，再加动画
入场用 gsap.from()，从不可见状态动画到目标位置
场景之间要淡入淡出，不能跳切
Timeline 要注册到 window.__timelines
不同场景用不同的 track-index

验证和渲染

npx hyperframes lint
npx hyperframes render . --output video.mp4 --quality high

合并音频

渲染出来的 MP4 不带声音，Agent 用 ffmpeg 合并：

ffmpeg -i video.mp4 -i merged.wav -c:v copy -c:a aac -shortest final.mp4

内置的视觉风格

HyperFrames Skill 内置 8 种风格，Agent 能根据内容选，也能按你指定用：

风格	氛围	适合
Swiss Pulse	临床感、精确	SaaS、开发工具
Velvet Standard	高端、永恒	企业软件、演讲
Deconstructed	工业感、原始	科技发布
Maximalist Type	喧闹、动感	大型发布
Data Drift	未来感、沉浸	AI、前沿科技
Soft Signal	亲密、温暖	健康品牌
Folk Frequency	文化感、鲜艳	消费应用、美食
Shadow Cut	暗黑、电影感	戏剧性揭示

实际效果

最终得到：

1920x1080，50 秒
2 MB 大小
7 个场景，过渡平滑
中文配音，音画同步

全程就是一个提示词，剩下都是 Agent 干的。

踩过的坑

手动编辑的话容易踩这些坑，但 Agent 懂规则，自动避开了：

场景黑屏——场景之间没有过渡动画。Agent 自动加 opacity 淡入淡出。

lint 报 overlapping_clips——同一 track 的场景时间重叠。Agent 自动分配不同 track-index。

动画冲突——多个 timeline 同时动画同一属性。Agent 遵循”不同时动画同一属性”的规则。

无限循环动画——用了 repeat: -1。Agent 会根据时长计算精确的 repeat 次数。

其实agent生成的时候如果模型能力不够的话，经常生成出来的会有点小瑕疵，最经常碰到的问题就是动画切换时机的问题，虽说多对话几轮也是能解决的，但是建议如果想节省时间提高效率，尽量用你能使用的最顶级的模型去生成视频。

适合什么场景

适合：

产品介绍、数据可视化、教程演示
开发者主导的制作

不适合：

真人出镜、复杂特效
追求快速出片（剪映这种更快）

HyperFrames 实战：让 AI Agent '写'出一支视频