把一篇公众号文章的链接丢给你的 AI 编程助手，说一句「做个解读视频」。几分钟后，它回你一段多镜头、带动画、甚至带旁白的 MP4——整个过程在你自己的电脑上完成，不花渲染费、不依赖云、不被任何平台锁死。
这不是 demo 里的魔法，是开源项目 html-video 正在做的事。
它是什么：一句话定位
html-video，一句话定位是 「HTML→Video meta-layer for coding agents」——给本地编程 agent 用的「HTML 变视频」元层（meta-layer）。它属于 nexu-io 团队，是 Open Design 的姊妹项目。
它的设定很明确：你带着自己的 agent（Claude Code、Cursor、Codex、Gemini、Windsurf、Trae……一共支持 14 个），描述一个视频，或者直接贴一篇文章链接 / 一个 GitHub 仓库，agent 就把它变成多帧、全动画的视频，然后在你本机渲染成真实的 MP4。
许可证 Apache-2.0，没有按次渲染费，没有席位上限，没有 vendor lock-in。一句话概括它的主张——Bring your agent. Pick any engine. Render any video.
为什么需要它：HTML→Video 的「巴别塔」
HTML→Video 已经是一个真实存在的技术品类。但麻烦在于：每个渲染引擎都很有主见，逼着你学它那一套 authoring 模型。
Hyperframes · HTML + CSS + GSAP，靠 agent skill 驱动
Remotion · 写 React 组件来描述每一帧
Motion Canvas / Revideo · 在 canvas 上写 TypeScript 生成器，适合做 explainer
Manim 及同类 · 数学 / 3D 优先，小众但硬核
痛点很现实：选一个引擎 → 学它的模型 → 大概率被它锁死。多数团队只能选一个，然后默默忍受它的上限。为不同场景挑对引擎、分别学会每套模型、再缝合成一个工作流，要花掉不少真实的工程时间。
html-video 的答案是：在所有引擎之上加一层「meta-layer」。你只负责跟 agent 说话；选哪个引擎、挑哪个模板、怎么填内容、怎么渲染，都是 agent 的事。引擎被收编成一个 adapter 接口的实现细节——所有 backend 满足同一个 render(input, ctx) 契约。新增一个引擎，所有模板、所有 agent、整个 studio 流程都自动用上它。不用学新 DSL，换引擎也不用重写。
怎么用：三种输入，三条命令
html-video 接受三种素材来源，无论哪种，都会变成视频真正依据的内容，而不是套在预制模板外面的装饰：
一句话 Prompt 描述主题，agent 自己从零写内容。 | 文章链接 贴 URL，服务端抓取转 Markdown，微信公众号这类服务端渲染页面直接支持。 |
GitHub 仓库
拉取 description、顶层目录结构、README，适合做「介绍这个开源项目」的视频。
装好依赖，三条命令就能把本地 Studio 跑起来：
pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio
# 浏览器打开 http://127.0.0.1:3071 ，就是本地工作台
常用的命令行工具还有两个：
node packages/cli/dist/bin.js doctor
node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3
# doctor 检测本机已装的 agent 和引擎；search-templates 按你的意图匹配最合适的模板
You：做一个解读视频 https://mp.weixin.qq.com/s/…
Agent：好，我读完了这篇文章——这就基于它生成。下一步选风格。
→ 多帧解读片，每一句都追溯到文章里的真实观点。
它怎么把链接变成视频：六步管线
一句话或一个链接进去，一段真实 MP4 出来。无论素材是 prompt、文章还是 repo，流水线都一样：
① 抓取素材 · 服务端拉取 URL 或 repo，展平成 Markdown
▼
② Agent 循环 · 你的 agent 读素材 + 所选模板的风格，产出 storyboard
▼
③ 内容图谱（content-graph） · 多帧中间表示：节点（实体 / 数据 / 文本）+ 边（顺序 / 依赖 / 对比），拓扑排序成帧序与时长
▼
④ 逐帧 HTML · 每个节点变成一个自包含的动画 HTML 帧，落盘
▼
⑤ 引擎渲染 · 无头 Chromium 加载每一帧并录制（自动延长录制以覆盖帧自身的动画）→ 每帧 webm
▼
⑥ ffmpeg · 每段 webm → mp4（libx264），再拼接成一条视频；可选 MiniMax 音乐 + 旁白混入
→ 你的 .mp4
关键：②–④ 是「meta-layer」真正所在——agent 决定讲什么、引擎决定怎么画，两者互不泄漏。⑤ 是引擎专属：以后换上 Remotion 或 Motion Canvas，替换的只是这一格，storyboard 和 agent 循环原封不动。全程在本地跑，唯一的网络调用是可选的素材抓取和可选的配乐。
注：单帧视频走 fast path，跳过 content-graph——一个模板、一段 HTML、直接渲染。
它凭什么值得看：八个特点
① 本地真实出片 无头 Chromium 录制动画 HTML + ffmpeg 编码 MP4，没有云渲染、没有按片段计费。 | ② 可插拔引擎 一个 render(input, ctx) 接口，N 个后端；Hyperframes 已通，其余在路上。 |
③ 14 个 agent 后端 Open Design(Vela)/Windsurf/Trae/Claude Code/Cursor/Codex/Gemini/Grok/Qwen/OpenCode/Copilot/Aider/Hermes/Anthropic API，自动检测、顶栏切换。 | ④ content-graph 多帧 结构化 IR，节点 + 边 + 拓扑排序，支持多场景编排与逐帧编辑。 |
⑤ 20+ 模板，授权干净 每个模板一个 manifest（inputs schema + 授权 provenance），商用免审计。 | ⑥ AI 配乐 MiniMax 生成背景音乐 + TTS 旁白，导出时自动混入 MP4。 |
⑦ Studio + CLI 双形态 既是本地浏览器工作台，也是可脚本化的命令行工具。 | ⑧ 干净的 Apache-2.0 无按次费、无席位上限、无贡献者协议（CLA）。 |
一句话：本地、免费、可插拔、不被锁死——同时把「选引擎」这件最累的活交给了 agent。
和同类产品比：先看全景，再看单点
HTML→Video 这条赛道，主流玩家各有各的范式。先一张表横向看清楚：
其中最接近、最常被拿来比较的是 Hyperframes（HeyGen 出品，21K★，已 Apache-2.0 开源，本身也是 agent-native）。html-video 没有走「做 HF 杀手」的正面竞争路线，而是把它（以及未来的 Remotion 等）都包成可选 backend——单点差异如下：
差异化很明确：html-video 不与任何单一引擎正面相撞，而是做「引擎之上的选择层」——agent 选引擎 + 选模板 + 一键出片。Hyperframes 在这里不是对手，而是默认且最强的那个 backend。
架构一览：一个 monorepo，九个包
packages/
├── core/ 类型 / registry / orchestrator + MiniMax + ffmpeg 音频混合
├── content-graph/ 多帧 storyboard IR（节点 + 边 + 拓扑排序）
├── runtime/ 14 个 agent 的 runtime（detect / spawn / stream）
├── adapter-hyperframes/ Hyperframes 引擎 adapter，真实渲染
├── adapter-remotion/ Remotion adapter（Phase1 桥接 → Phase2 原生 tsx）
├── cli/ html-video 命令 + studio HTTP server + 素材抓取
├── project-studio/ 浏览器 Studio UI（聊天 / 画廊 / 逐帧 / 配乐 / 导出）
└── studio-next/ 实验性：嵌入 hyperframes/studio 的集成壳
核心是 core（项目 / 资产 / 内容图谱的类型与编排）和 content-graph（多帧中间表示）。runtime 把 14 个 agent 抽象成统一的 spawn / stream 接口；两个 adapter 是引擎落地点；cli 同时承载命令行与 Studio 的 HTTP 服务。
上手、路线图，以及它适合谁
前置依赖很轻量：
路线图——已完成的部分已经相当完整：
✅ 引擎 adapter 规范 · 模板元数据格式 · 多帧 storyboard · Studio（画廊 / agent 切换 / 逐帧编辑）· 文章与 repo → 视频 · AI 配乐 · 真实 MP4 渲染（Hyperframes）· agent 模型选择
🗺️ Remotion / Motion Canvas / Revideo 的 adapter · agent skill 包 + 模板市场
它适合谁？
内容创作者 把长文 / 公众号文章快速变成带动画的解读视频。 | 开源维护者 给自己的项目做一支结构化的介绍片。 |
开发者 / 布道师 做产品 demo、CLI 演示、技术讲解视频。 | Agent 工具开发者 研究「coding agent + 视频」这条新交互范式。 |
html-video 由 nexu-io 团队（Open Design 团队）出品，Apache-2.0 开源。和 Open Design（设计 meta-layer）、HTML Anything（静态 HTML）属于同一产品家族。
GitHub：github.com/nexu-io/html-video
网友评论