SOTA Sync
← 返回 FEED
AGENT2026-04-17

HeyGen开源HyperFrames：让AI Agent用HTML语法生产专业视频

HeyGen正式开源完整HyperFrames项目（Apache 2.0），不是半成品，是完整可用的video composition framework加一整套Agent工具链。

核心定位

HyperFrames是一套用HTML+CSS+JavaScript制作专业视频的框架和工具链。给AI Agent安装HyperFrames Skill，它就能用标准web技术栈生产视频：GSAP动画、WebGL着色器、Lottie、60fps渲染、本地FFmpeg输出。

为什么选HTML？因为AI的训练数据里，网页内容压倒性最多——数十亿页HTML、GSAP代码段、SVG构图、Canvas实验。HTML是AI的母语，不是After Effects那套给人类设计的专有格式。

六核心包架构

@hyperframes/core      — 共享类型、HTML生成、GSAP工具、运行时
@hyperframes/cli       — CLI：init/preview/lint/render/doctor/capture
@hyperframes/engine    — 框架无关渲染引擎（BeginFrame + FFmpeg）
@hyperframes/producer  — 视频渲染管线（Puppeteer + FFmpeg）
@hyperframes/ui-player — 浏览器内视频播放器组件
@hyperframes/studio   — 可视化编辑器（React前端 + Hono后端）

另有独立包：@heygen/oxide（样式系统）、@heygen/video-resolver（视频处理）。

CLI命令体系

安装：npx hyperframes init

命令作用
hyperframes init [name]初始化项目
hyperframes preview启动本地预览服务器（热重载）
hyperframes lint代码检查（GSAP lint、inline style lint）
hyperframes validate运行时验证（JS异常、缺失资源、对比度）
hyperframes render [file]本地渲染MP4/MOV/WebM
hyperframes doctor环境诊断（Node/FFmpeg/Chrome/内存/磁盘）
hyperframes capture <url>抓取任意网站生成完整设计系统

核心创新：hyperframes capture

hyperframes capture <url>是这次开源最重磅的功能——一个AI驱动的网站→视频制作流程提取工具。

输入任意网站URL，自动输出：

  • 全页截图（懒加载感知，导航栏固定顶部）
  • AI生成DESIGN.md（颜色、字体排版、Elevation、组件、Do's/Don'ts）
  • 完整资产目录（136+资产，带HTML上下文标注：img[src]、css url()、link[rel=preload]）
  • CSS精简（87%尺寸缩减，PurgeCSS驱动）
  • HTML预格式化（每标签一行，AI可读性最优）
  • CLAUDE.md + .cursorrules（AI Agent指令文件）
  • Lottie动画检测（网络拦截提取）
  • WebGL着色器源码提取（gl.shaderSource劫持）

捕获流程：

  1. Puppeteer截图 + Gemini 3.1 Pro生成设计系统描述
  2. CSSPurge压缩 + HTML prettify
  3. 资产下载（字体/图片/SVG，dedup去重）
  4. 质量检查：对比度、缺失资源、JS异常
  5. 可选：replica refinement loop（生成→截图→对比→修复）

7步视频制作Skill

/hyperframes
  → Step 1: 理解参考 → 设计系统分析、GSAP检测、Lottie检测
  → Step 2: 读取参考 → 过渡效果词汇表、GSAP代码模式
  → Step 3: 写剧本 → Hook类型选择（数字/问题/反直觉）、故事节奏
  → Step 4: 分镜 → 视觉词汇表、过渡能量矩阵、每beat技术分配
  → Step 5: 构建 → GSAP set()、着色器连线、本地字体、节拍验证
  → Step 6: 标题 → TTS排行（Kokoro优先）、音频波形
  → Step 7: 验证 → 快照测试、对比度检查、FFmpeg渲染预览

关键设计原则：Agent通过文件路径传递内容而非内嵌内容，使用本地字体而非Google Fonts，每个节拍后验证../assets/引用。

着色器系统

内置28种WebGL着色器过渡效果（从shader-showcase.zip提取），每种都是独立HTML+WebGL示例。着色器注册到catalog，Tag为transition+shader，可被Skill直接引用。

评估基础设施

HeyGen同时公开了评估系统：

  • Abhay的仪表盘：量化视频质量追踪
  • Teodora的78项检查清单：78-criteria guide覆盖所有视频质量维度
  • Prompting指南：easing词汇表、过渡能量矩阵、音频反应频率映射、TTS语音推荐

与今天X推文的联系

今天Liu8in的X帖子描述的HyperFrames"用HTML写视频"核心理念，在这个GitHub开源版本里已经完全落地：

  • GSAP动画驱动（不是After Effects关键帧）
  • HTML结构即时间轴（data-start、data-duration属性）
  • 本地FFmpeg渲染输出
  • AI Agent的7步Skill封装

这不是一个想法，是可安装、可运行、可量产的工具：npx skills add heygen-com/hyperframes。

相关