HeyGen 开源 HyperFrames：用 HTML 写视频，Claude Code 的第二条腿
来源: 微信公众号
GitHub: https://github.com/heygen-com/hyperframes
发布平台: 程序员茄子（chenxutan.com）
标签: AI视频, HeyGen, HyperFrames, Claude Code, 视频生成, GSAP, HTML视频
引言
剪辑软件这一行，最近一周被两件小事搅了一下。
一件是 HeyGen 16 号在 X 上发了一条 47 秒的视频，说这条视频是他们用 Claude Code 写出来的，顺手把生成框架 HyperFrames 开源了。三天涨到 54.9 万播放，GitHub 仓库 heygen-com/hyperframes 直接挂上 Apache-2.0。
另一件发生在同一天。browser-use 团队开源了一个叫 video-use 的 Claude Code Skill，对着摄像头录完，跟 Claude Code 聊两句，成品视频就出来了。
两件事凑在一起，指向一个新信号：视频制作这个一直靠 GUI 的领域，开始长出 Claude Code 那条腿了。
一、HyperFrames 到底是什么？
一句话：用 HTML + CSS + GSAP 写一段合成，然后渲染成 MP4。
官方的 slogan 是 「Write HTML. Render video. Built for agents.」
仓库里 npm 包叫 hyperframes，安装入口是一条命令：
npx skills add heygen-com/hyperframes
这条命令做的事情不是装一个 CLI，是把 HyperFrames 的 Skill 包挂到你的 AI 编程 Agent 上——Claude Code、Cursor、Gemini CLI、Codex 都认。
装完之后，Claude Code 里多出三个 slash command：
| 命令 | 功能 |
|---|---|
/hyperframes | 根据自然语言生成视频合成 |
/hyperframes-cli | 操作命令行工具 |
/gsap | 处理动画细节 |
使用示例
随后你就可以像跟剪辑师聊天一样跟它说话：
Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music.
或者把一段 GitHub 仓库的 README、一份 PDF、一份 CSV，直接丢给它，让它变成：
- 45 秒的 pitch video
- 9:16 的 TikTok hook
- 动画版的柱状图竞赛
要改节奏就一句话：「标题放大两倍，换深色模式，结尾加个 fade-out」
二、为什么是 HTML，而不是时间线？
传统剪辑的困境
传统剪辑软件的抽象是时间线：一条轨道，拖素材，打关键帧。
这套东西优势是所见即所得，代价是没法被模型理解。
你没法让 Claude 精准地「把第 3 秒的字幕放大 1.2 倍并右移 40 px」，因为它看不到时间线，也没法写一份时间线。
HyperFrames 的选择
HyperFrames 的选择是把视频退回到 Web：
- 每一帧就是一张 DOM
- 每一个动画就是一段 GSAP tween
- 模型熟悉 HTML、CSS、JavaScript，于是写视频变成了「写网页」——一件它早就会的事
这跟 Remotion 的思路是一脉相承的。
- Remotion：用 React 组件定义视频
- HyperFrames：更激进，直接把 HTML 当 primitive，并且一上来就把 Skill 文件写好塞给 agent
这个切换带来的结果
精确度和可生成性同时到位：
| 特性 | 说明 |
|---|---|
| 精确 | 每一帧都是代码，改哪里一目了然，diff 能看，版本能回滚 |
| 可生成千份变体 | 同一个模板，换文案、换颜色、换 logo，生成 1000 条视频只是多跑几次 |
| AI 能改 | 因为模型看得懂 HTML，它能自己调，也能被你用自然语言驱动 |
三、video-use 解决的是另一端
如果说 HyperFrames 是「从零生成一条视频」，video-use 解决的就是「已经录了一堆素材，怎么快速剪出成片」。
传统流程的痛苦
录播客、录教程、录口播的人都知道那种痛：
- 45 分钟素材里全是「嗯」「呃」
- 重录、口误、长停顿
- 传统流程是打开 Premiere 或剪映，一刀一刀切
video-use 的做法
Claude Code 读你的素材，识别口误和废话，给你一份删减方案，确认后批量处理。
底层思路跟 HyperFrames 镜像：
- HyperFrames：让 AI 写合成
- video-use：让 AI 读素材做决策
两头夹击，剪辑软件的 GUI 护城河开始出现裂缝。
四、它和 Seedance 那种「AI 视频」是两回事
这里容易混。
生成式 AI 视频
Seedance 2.0、Sora、Veo 这类模型做的是生成式 AI 视频——输入一段文字，模型直接出画面。
| 优点 | 缺点 |
|---|---|
| 凭空造世界 | 每次生成都在赌 |
| 创意无限 | 改一个字幕要重跑整段 |
HyperFrames 的路线
HyperFrames 走的是另一条路：
- 不生成画面，生成「渲染画面的代码」
- 画面的素材是你自己的（背景视频、图、logo、字幕）
- HyperFrames 负责把它们按代码组合起来渲染
- 可控性是天生的，因为本来就是代码
两条路线会合流
短期不冲突，反而会合流。
HeyGen 自己就是例子：
- AI 虚拟人生成 → 模型路线
- HyperFrames → 代码路线
- HeyGen × Claude MCP 集成 → Claude 里直接喊 HeyGen 出视频
整个链条补齐了：
- 模型生成内容
- 代码组合排版
- Agent 统一调度
五、谁该动起来？
这波受益面比看上去窄，也比看上去大。
1. 内容创作者
如果你做的是模板化短视频：
- 开场卡
- 数据动画
- 产品介绍
- 每日快讯
HyperFrames 能把一次剪辑变成一次提交。做 100 条视频的边际成本接近零。
2. 一人公司和小团队
以前请剪辑师，现在 Claude Code 就是剪辑师。
- 做营销物料
- 做课程视频
- 做发布会 demo
代码化之后可以沉淀成 Skill，团队共用。
3. 做 AI 产品的
如果你的产品需要给用户输出视频：
- 周报
- 战报
- 生成卡片
HyperFrames 可以直接做渲染层，不用再调三方 API 每条几毛钱。
4. 传统剪辑师
- 短期不会被替代
- 但值得学一下怎么把自己的美学写成代码
- 时间线还会在，只是会多一个并行的文本层
六、一个值得盯的细节
HeyGen 这条启动推文的评论区在让人「RT + Comment」换完整源码。
这不是套路
这是 Agent-native 产品的新分发范式：
把 Skill 装进 Claude Code 就是装机量。
不用 App Store，不用官网注册，一条npx命令就进了用户的开发环境。
过去一年的趋势
过去一年 Claude Skills 在代码圈已经跑通：
- PPT
- NotebookLM
- 剪辑
现在轮到视频。
每多一个领域，Claude Code 就多一条「可以替代专业软件」的腿。
七、技术解析
核心技术栈
| 技术 | 用途 |
|---|---|
| HTML | 视频帧结构 |
| CSS | 样式与布局 |
| GSAP | 动画引擎 |
| Puppeteer/Playwright | 渲染引擎 |
架构示意
用户输入（自然语言）
↓
Claude Code + HyperFrames Skill
↓
生成 HTML + CSS + GSAP 代码
↓
渲染引擎（Browser）
↓
MP4 视频输出
Skill 集成
# 安装
npx skills add heygen-com/hyperframes
# 使用
/hyperframes 创建10秒产品介绍视频
/gsap 调整动画为缓动效果
八、与现有工具对比
| 工具 | 路线 | 适用场景 |
|---|---|---|
| Sora/Veo | 生成式 | 凭空创造画面 |
| Seedance | 生成式 | 文生视频 |
| HyperFrames | 代码渲染 | 素材组合排版 |
| video-use | AI 剪辑 | 素材删减处理 |
| 剪映/PR | GUI | 传统剪辑 |
九、安装与使用
安装 HyperFrames
npx skills add heygen-com/hyperframes
安装依赖
# 需要 Node.js 环境
npm install -g hyperframes
# 可能需要的工具
brew install ffmpeg
基本使用流程
- 安装 Skill
- 在 Claude Code 中使用
/hyperframes命令 - 描述你想要视频
- AI 生成 HTML 代码
- 渲染成 MP4
十、总结
HyperFrames 的出现标志着视频制作领域的 Code-first 时代正在到来。
核心变革
| 维度 | 传统方式 | HyperFrames 方式 |
|---|---|---|
| 工具 | 剪映/PR | 代码编辑器 |
| 抽象 | 时间线 | HTML/CSS |
| 可控性 | 依赖操作 | 精确代码控制 |
| 批量 | 手动重复 | 循环生成 |
| 版本控制 | 无 | Git/Diff |
真正的问题
下一个被代码化的创作软件是哪一个？
这个问题值得每个创作者和技术人思考。
本文首发于「程序员茄子」博客，原文链接：https://chenxutan.com