HyperFrames Skill：让 AI Agent 用 HTML 写出好莱坞级别的 MP4 视频

Skill超级捕获手 技术创作者 2026-09-08 83 阅读

HyperFrames Skill：让 AI Agent 用 HTML 写出好莱坞级别的 MP4 视频

总结

HyperFrames 是 HeyGen 开源的 HTML-to-MP4 框架，标语「Write HTML. Render video. Built for agents.」——用纯 HTML/CSS/动画描述视频场景，通过无头 Chrome 逐帧截图 + FFmpeg 编码输出确定性 MP4。它不是 Remotion（React 组件做视频），也不是 Runway（Prompt 生成视频），而是把代码即源文件的可维护性、逐帧确定性渲染的可复现性、以及 AI Agent 一等公民的可自动化性，三件事一次搞定。截至 2026-09-07，GitHub 获 44k stars，成为 AI 视频赛道的现象级开源项目。

功能与原则

HyperFrames 核心是一个 Monorepo TypeScript 包集群：

  • @hyperframes/core：HTML 解析、编译器、浏览器运行时、动画适配器、Linter、Studio API
  • @hyperframes/engine：基于 Puppeteer + CDP 的无头 Chrome 逐帧截图引擎
  • @hyperframes/producer：完整渲染管线（编译 → 截帧 → 编码 → 音频混流）
  • hyperframes（CLI）：24 个子命令
  • @hyperframes/studio：浏览器端 NLE 风格视频编辑器
  • @hyperframes/player：Web Component 可嵌入播放器
  • @hyperframes/shader-transitions：14 种 WebGL 着色器转场效果

设计原则：确定性 > 录屏。同一份 HTML 连渲两次，画面完全一致，而非 wall-clock 录屏的不可控帧率。代码即视频源码，可 Git 管理、可 Code Review、可版本化。

认可度

  • GitHub Star：44k（截至 2026-09-07）
  • Forks：4.2k
  • Issues：41 / Pull Requests：200+
  • 已被 HeyGen 自家生产环境、tldraw、TanStack 等团队正式采用
  • 今日头条、知乎等平台多篇深度解读，开发者社区讨论热度持续攀升
  • GitHub Trending 持续在榜，2026-09-08 当日新增约 474 stars

链接

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

官网：https://hyperframes.heygen.com

Playground：https://www.hyperframes.dev/

原作者

HeyGen（@heygen-com）—— AI 视频生成领域的头部创业公司，曾获 IDG 资本等机构融资。HyperFrames 于 2026-03-10 开源，持续活跃维护（最新提交 2026-09-07），项目采用 Apache-2.0 许可证。

介绍

HyperFrames 的核心洞察是：AI Agent 能写代码之后，下一个需求往往是「把输出变成可交付的媒体」——而视频是最难搞定的最终产物。传统方案要么靠录屏（不确定性高、无法精控），要么靠 Prompt 生成（抽卡、不可复现），HyperFrames 则绕开了这两条路——让 Agent 写 HTML，框架负责渲染成片。

技术路径是「无头 Chrome 逐帧截图 + FFmpeg 编码」：用 Puppeteer 驱动无头 Chrome 渲染 HTML，通过 CDP（Chrome DevTools Protocol）按时间轴精确截取每一帧，再调用 FFmpeg 将帧序列编码为 MP4，同时支持音频混流。输出是确定性的——同一段 HTML 两次渲染，画面完全一致，这是录屏方案无法做到的。

项目提供 20 个预置 Skill，形成完整的工作流覆盖：路由 Skill /hyperframes 负责意图识别和任务分发，下游子 Skill 涵盖 /product-launch-video（产品发布视频）、/faceless-explainer（无脸解说）、/pr-to-video（PR 变更视频）、/embedded-captions（字幕压制）、/talking-head-recut（真人出镜视频重包装）、/motion-graphics（动态图形）、/music-to-video（音乐驱动视频）等。

特点

  • 代码即源：HTML 文件就是视频源码，可 Git 管理、Code Review、版本化，与现有开发流程无缝衔接
  • 确定性渲染：逐帧截图 + FFmpeg 编码，同一输入 100% 输出一致，不像录屏方案受机器负载影响
  • AI Agent 原生：20 个 Skill 覆盖完整视频创作流程，Agent 通过 /hyperframes 路由自动识别任务类型并加载对应子 Skill
  • 多工具链集成：支持 Puppeteer、Playwright、FFmpeg 等主流工具，渲染结果可直接用于 CI/CD流水线
  • 多场景覆盖：从产品发布视频、PR 变更动画、到动态图形、字幕压制，20 个 Skill 几乎涵盖所有常见视频类型

使用方法

第一步：安装 Skill（以 Claude Code 为例）

npx skills add heygen-com/hyperframes

非交互式或 Agent 场景使用 npx hyperframes skills update 安装核心 Skill 集。

第二步：描述你想做的视频

在 Claude Code / Cursor / Codex 中调用 /hyperframes，例如：

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and subtle background music.

第三步：本地渲染 MP4

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # 浏览器预览
npx hyperframes render    # 输出 MP4

确保本机已安装 FFmpeg 并加入 PATH。输出目录中生成最终 MP4 文件。

Skill 路由机制：项目内置意图识别——Agent 收到「帮我做一个产品介绍视频」，路由 Skill 自动分发到 /product-launch-video 子 Skill，引导 Agent 完成 plan → HTML → preview → render 的完整流程。

使用场景与人群

适用场景：

  • AI 应用需要程序化生成视频内容（营销、产品演示、社交媒体片段）
  • 开发者希望把视频渲染接入 CI/CD 流水线，实现自动化成片
  • 需要确定性、可复现的视频输出（录屏无法满足）
  • AI Agent 需要把生成的代码/设计直接转化为可交付媒体

目标用户：

  • AI 应用开发者、AI 视频工具集成者
  • 需要程序化生产视频内容的营销/运营团队
  • 希望让 AI Agent 完成「代码→视频」最后一公里的工程师
  • 视频内容创作者寻找 AI 辅助生产流水线

输入与输出案例

案例一：产品发布视频

输入（Agent prompt）：

Using /hyperframes, create a 30-second product launch video with a fade-in title “AI Coding Agent”, background gradient animation, and a subtle background music.

输出：生成包含动画标题、渐变背景、背景音乐的 MP4 文件，时长 30 秒，画面逐帧确定性渲染，音效与画面同步混流。

案例二：GitHub PR 变更动画

输入（Agent prompt）：

Using /hyperframes, create a PR changelog video for owner/repo#123.

输出：自动拉取 PR 内容，生成 changelog 风格视频——展示变更文件列表、diff 摘要、提交记录，配合动态排版输出为可分享的 MP4。两次渲染结果完全一致，可用于自动化发布通知。

GitHub：https://github.com/heygen-com/hyperframes
Star：44k（截至 2026-09-07）
许可：Apache-2.0

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 83 阅读