AI Agent能写代码、能对话、能自主操作——唯独还不会剪辑视频。HeyGen说，现在会了。

他们今天开源了HyperFrames：一个专为AI Agent设计的基于HTML的视频工具链和渲染框架。装上HyperFrames Skill，Claude Code直接变成你的视频编辑器。

核心思路：HTML是Agent的母语

传统视频工具（After Effects、DaVinci Resolve）基于JSON/XML，是给人设计的，不是给AI设计的。

而AI Agent（LLM）的训练数据里，网页内容压倒性最多：数十亿页HTML、数百万CSS和JavaScript动画、数以十万计的GSAP代码段、SVG构图、Canvas实验—— 웹是AI训练数据中最大的创意媒介。

当Agent写HTML、CSS、JavaScript时，它在用自己的母语工作。

HyperFrames在这个基础上加了一层极薄的数据属性（data- attributes），让HTML直接变成视频时间轴：

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

70行代码完成一个完整视频：场景一淡入标题，场景二模糊转场到CTA，纯CSS Flexbox布局，GSAP驱动动画，其余全是标准HTML。

为什么这件事现在才发生

HeyGen早就知道"代码→视频"是方向。最初他们用GSAP（JavaScript动画库）做用户视频的动态图形，模型能力还不够，输出不够可靠。

2025年11月，Gemini 3和Opus 4.5预览版出来之后，他们把这两个模型换进Video Agent——效果立竿见影，动态图形和多场景B-roll开始持续、稳定、高质量地输出。

纯HTML+CSS+JavaScript开始能够生成完整时长、审美突出、引人入胜的视频，几乎达到可交付标准。HyperFrames的雏形就此确立。

架构：薄属性层 + 标准Web语法

HyperFrames在标准Web语法基础上只要求添加少量data-属性来定义视频时间轴：

  • data-composition-id：组合ID
  • data-width / data-height：分辨率
  • data-start / data-duration：时间轴控制
  • data-track-index：层级控制

除此之外一切照旧：CSS动画、GSAP时间轴、Lottie、Three.js、D3可视化、Google Fonts——Agent用什么web技术都可以，不需要学任何新框架。

渲染在本地完成，支持输出MP4、MOV或WebM。

怎么用

一条命令，让Agent变身视频编辑器：

npx skills add heygen-com/hyperframes

开源细节

全部开源（Apache 2.0协议）：核心引擎、Studio、渲染器、Skills、示例全部放出。

这是HeyGen内部的思路转变：Avatar替换摄像头只是视频的一半，用户仍需要复杂的动态图形、B-roll和视觉叙事让视频真正吸引人。视频编辑门槛极高（时间轴、图层、关键帧这些技能需要数年学习），代码生成视频是最优解，而HTML是最自然的Agent接口。