nexu-io/html-video：给编码 Agent 用的视频生成工具，HTML 直接变 MP4

看完你会发现，你之前对「Agent 做视频」的理解可能要更新了。

nexu-io 团队（Open Design 背后的人）上个月开源了 html-video，一个把「Agent 生成视频」这件事做对了的项目。三周 GitHub 2000+ stars，Apache-2.0 协议，本地渲染不收按次费。

核心思路简单到优雅：HTML 就是视频源文件。 你的 Agent 用 HTML + CSS + 数据写出动画帧，headless Chromium 逐帧录制，ffmpeg 编码成 MP4。整个流程跑在你自己机器上。

本文提纲

1. 为什么这件事值得做
2. 它怎么工作：从一句话到一个 MP4
3. 21 个精心策展的模板
4. 14 种 Agent 后端自动检测
5. 文章/仓库链接直接变视频
6. AI 配乐 + 旁白
7. 快速上手

为什么这件事值得做

HTML → Video 已经是一个真实的品类，但现有的引擎各有各的「范式税」：

• Hyperframes（HeyGen）：HTML + CSS + GSAP，agent-skill 驱动，但只有单一渲染范式
• Remotion：React 组件，source-available，4 人以上团队要付费
• Motion Canvas / Revideo：TypeScript generator，最适合做 explainer
• Manim：数学/3D 优先，比较小众

每个引擎都有自己的创作模型，学习成本不低，而且一旦选了就很难换。html-video 做的是一个元层（meta-layer）——坐在所有引擎上面。你跟你的 Agent 说话，它选引擎、选模板、填内容、渲染视频。引擎是一个实现细节，被一个统一的 adapter 接口（render(input, ctx)）隔开了。

目前 Hyperframes 引擎已经完全接入并可以渲染真实 MP4。Remotion、Motion Canvas、Manim 在 roadmap 上——adapter 接口已经为它们设计好了，只是 adapter 还没写。

它怎么工作：从一句话到一个 MP4

graph LR
    A[Prompt / Link / Repo] --> B[Source Fetch]
    B --> C[Agent Loop
content-graph storyboard]
    C --> D[Per-frame HTML]
    D --> E[Hyperframes Render
Chromium + ffmpeg]
    E --> F[MP4 Output]
    style A fill:#FF6B6B,color:#000000
    style C fill:#4ECDC4,color:#000000
    style E fill:#45B7D1,color:#000000
    style F fill:#96CEB4,color:#000000

具体流程：

1. Source Fetch：如果是链接，studio 服务端拉取内容并 flattens 成 Markdown。微信公众号文章也能直接处理
2. Agent Loop：你的 Agent 读取素材 + 模板风格，生成一个 content-graph（多帧故事板）+ 每帧一个 HTML 块
3. Content-Graph：多帧中间表示——节点（实体/数据/文本）+ 边（顺序/依赖/对比），拓扑排序成帧序和时间
4. Per-frame HTML：每个节点变成一个自包含的动画 HTML 文件
5. Hyperframes Render：headless Chromium 加载每帧，录制动画（自动扩展时长覆盖帧内动画），输出 webm
6. ffmpeg：webm → mp4（libx264），拼接成完整视频，可选混入背景音乐和旁白

关键设计：步骤 2-4 是「元层」所在。Agent 决定故事板，引擎决定怎么画。两者互不泄漏。将来换 Remotion 或 Motion Canvas 只替换第 5 步，故事板和 Agent 循环完全不动。

单帧视频走快速路径——跳过 content-graph，一个模板一个 HTML，直通渲染。

21 个精心策展的模板

模板不是随便堆的。每个模板是一个自包含的、Agent 可读的单元，由 template.html-video.yaml manifest 描述：

• 用来干什么：category、tags、best_for 列表
• 输出什么：分辨率、宽高比、fps、时长范围
• 填什么进去：inputs JSON schema，Agent 知道要填哪些文本/数据槽位
• 许可证来源：SPDX id + attribution_required / redistribution_allowed / commercial_use 标志

最后一点很重要。每个模板都是许可证干净的。fork 保留原始许可证，repo 根目录的 NOTICE.md 记录每个来源和 SPDX。没有明确宽松许可证的东西不会进入仓库。所以你可以放心把任何模板用在商业项目里。

21 个模板覆盖的类别：

类别	示例
数据可视化	NYT 风格动态折线图、Swiss/Vignelli 网格数据卡
标题 & VFX	故障风标题、动态排版、打字机光标
Hero & 电影感	液态渐变、光漏、暖色胶片颗粒
产品宣传	15s / 30s 多场景 promo
解释器	决策树 explainer
Outro	Logo 结尾卡

格式是开放的，社区模板可以按同样方式 drop-in。

14 种 Agent 后端自动检测

html-video 支持的后端数量惊人：

Agent	检测方式
Open Design (Vela)	vela / Open Design 内置
Windsurf CLI	windsurf
Trae CLI	traecli
Claude Code	claude
Cursor Agent	cursor-agent
Codex CLI	codex
Hermes	hermes
Gemini CLI	gemini
Grok Build	grok
Qwen Code	qwen
OpenCode	opencode
GitHub Copilot CLI	copilot
Aider	aider
Anthropic API	BYOK，直接 Messages API

全部自动检测——studio 扫描你的 PATH，找到哪个就用哪个。Studio 顶栏可以切换。

什么都没装？设一个 Anthropic API key，studio 直接调 Messages API，不需要任何 CLI。

文章/仓库链接直接变视频

这是最实用的功能。把一个链接丢给 Agent，拿回一个视频：

你：做一个解读视频 https://mp.weixin.qq.com/s/…
Agent：读完了这篇文章，基于它生成。下一步选风格。
→     多帧 explainer，每个点来自文章实际内容

三种输入源：

• Web 文章：服务端拉取并转 Markdown。微信公众号文章开箱即用
• GitHub 仓库：通过公开 API 拉 description、顶层结构、README——适合做「介绍这个开源项目」的视频
• 纯 Prompt：描述主题，Agent 从头写内容

不管输入是什么，它都变成视频的真实素材——不是模板外面的装饰。Agent 读取内容，决定需要几个场景，写出 content-graph 故事板。

AI 配乐 + 旁白

在 Settings → Audio 里加一个 MiniMax API key，就可以给视频加声音：

• 背景音乐：描述一个氛围（calm cinematic ambient, slow build），MiniMax 生成器乐曲
• 旁白：写一个脚本，MiniMax TTS 朗读

两者在导出时通过 ffmpeg 混入 MP4（音乐在旁白时自动压低，可选淡入/淡出）。不配 key 也不影响其他功能。

快速上手

前置条件：Node.js 20+、pnpm 9+、ffmpeg、Chromium。

pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio    # 打开 http://127.0.0.1:3071

在 studio 里：选模板（或直接描述视频/粘贴链接），跟 Agent 对话，编辑每帧文字，加配乐，导出 MP4。

CLI 工具：

node packages/cli/dist/bin.js doctor                 # 检测已安装的 Agent + 引擎
node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3

整个项目用 TypeScript 写的，monorepo 结构（pnpm workspace），核心包清晰：

packages/
├── core/                  类型定义、注册表、编排器、MiniMax + ffmpeg
├── content-graph/         多帧故事板 IR
├── runtime/               Agent 运行时（14 种后端）
├── adapter-hyperframes/   Hyperframes 引擎适配器
├── cli/                   命令行 + Studio HTTP 服务器
└── project-studio/        浏览器 Studio UI
templates/                 21 个视频模板

对开发者的意义

html-video 做对了几件事：

引擎是插件，不是信仰。 用 adapter 接口隔开渲染引擎，将来 Remotion / Motion Canvas 接进来，故事板和 Agent 循环完全不用改。这是架构层面的正确选择。

许可证先行。 每个模板都有 SPDX 标记和来源记录，商用无风险。这在国内开源项目里很少见。

Agent-agnostic。 14 种后端自动检测，你用什么 Agent 就用什么 Agent。不强推任何一家。

本地渲染。 不上云、不按次收费、不锁供应商。你的机器、你的 ffmpeg、你的 MP4。

nexu-io 团队的定位也很有意思——他们同时做 Open Design（设计领域的 Agent 元层）和 HTML Anything（静态 HTML 交付），html-video 是「动态」那条线。同一个哲学：Agent 元层坐于工具之上，工具是可替换的实现细节。

你觉得 Agent 做视频能替代传统工具吗？评论区聊聊你的看法。

---

作者: itech001 来源: 公众号：AI人工智能时代 网站: https://www.theaiera.cn/ 每日分享最前沿的AI新闻资讯和技术研究。

本文首发于 AI人工智能时代，转载请注明出处。