做内容的都懂这个痛：一篇好文章，想配个解读视频，流程是打开剪辑软件、找模板、改字、调动画、导出——半天没了。或者花钱买云端视频生成服务，按条数计费，改一版重扣一次。
GitHub 上最近有个思路很野的项目：html-video（4.7k Star，Apache-2.0），它不让你学剪辑，也不让你学 React——它让你把写代码的 AI 助手变成剪辑师。你丢给它一句需求、一篇公众号文章链接、或者一个 GitHub 仓库地址，它在你本机把内容变成多镜头分镜，用 HTML + CSS 写成带动画的页面，再用无头 Chromium 逐帧录制、ffmpeg 编码，吐出一个真实的 MP4 文件。
全程在你笔记本上跑。没有云端渲染，没有按次收费，视频源码就是 HTML 文件，想改哪个字改哪个字。
为什么是”给 AI 用的”视频工具
先说清楚它和 Remotion、Manim 这些老玩家的区别。
HTML 转视频这个赛道不缺引擎，缺的是统一的工作流。Remotion 要你写 React 组件，Motion Canvas 要你写 TypeScript 动画生成器，Manim 是数学可视化专用——每个引擎都自带一套”作者模型”，学一个是一门课。多数团队最后只能选一个，然后忍受它的边界。
html-video 的定位是引擎之上的元层（meta-layer）：你只跟你的 coding agent 对话，它负责选引擎、选模板、填内容、渲染。引擎被抽象成一个 render(input, ctx) 接口，谁来实现都行。今天跑通的是 Hyperframes 引擎（HTML + CSS + GSAP 范式，headless Chromium 录制 + ffmpeg libx264 编码），Remotion / Motion Canvas / Revideo / Manim 都在路线图上——接口设计好了，适配器还没做完。
所以现在的诚实状态是：架构是插件化的，今天真正能渲染出 MP4 的是 Hyperframes 这一条线。这对大多数场景够用了，因为视频模板本身就是 HTML。
最实用的玩法：一个链接变一条视频
这才是普通人最想用的模式。Studio 支持三种输入：
网页文章——服务端抓取并摊平成 Markdown，公众号文章（mp.weixin.qq.com）开箱即用，不用复制粘贴正文。Agent 读完文章，自己决定需要几个镜头，把关键论点变成分镜节点，把”这一步接那一步””这个和那个对比”的关系变成图谱的边，再套上模板的视觉风格。一篇 1500 字的文章，出来一条节奏完整的多镜头解读视频，每句话都能追溯到原文。
GitHub 仓库——通过公开 API 拉项目描述、目录结构和 README，生成”这个开源项目是干什么的”结构化讲解视频。做技术推广内容的可以直接受益。
纯口述需求——直接描述主题，Agent 从零写文案和分镜。
背后是一条挺讲究的流水线：源抓取 → Agent 循环产出分镜 → content-graph（多镜头中间表示：节点是实体/数据/文案，边是顺序/依赖/对比，拓扑排序定镜头顺序和时长）→ 每个节点落成独立的动画 HTML → Chromium 逐帧录制（自动延长录制以覆盖该帧自身的动画时长）→ ffmpeg 转码拼接 → 可选混入配乐和旁白。单镜头视频走快路径，跳过 content-graph 直接渲染。
21 个模板，每个都过了 license 审计
模板不是随便攒的图层文件，每个模板是一个自包含单元，带 template.html-video.yaml 清单，启动时被 Studio 扫描。清单里写清楚：这是干嘛用的（category/tags/best_for）、输出什么分辨率/画幅/帧率/时长、要填什么（inputs JSON schema，Agent 知道哪些文案槽要填）、以及许可证溯源——SPDX ID、是否要求署名、是否允许商用、上游来源 URL。
仓库根目录有 NOTICE.md 记录每个模板的出处。没有清晰许可的东西不进仓库。也就是说：21 个模板全部可以放心商用，不用自己做 license 审计。这在开源视频模板这个混乱的领域里是很少见的自觉。
模板覆盖的类型：NYT 风格数据图表、瑞士网格/Vignelli 数据卡、故障艺术标题（chromatic aberration + 扫描线）、打字机光标特效、极光液体渐变 hero、漏光胶片质感、15s/30s 多镜头产品宣传片、动态字体（kinetic type）、决策树讲解器……都是真渲染出来的动画，不是效果图。
14 种 coding agent 全兼容
不管你现在用哪家的 AI 编程工具，大概率它已经支持：Claude Code、Codex CLI、Cursor Agent、Gemini CLI、OpenCode、GitHub Copilot CLI、Aider、Windsurf CLI、Trae CLI、Grok Build、Qwen Code、Hermes，还有 Open Design 自家的 Vela（一次登录切换多家模型）。全部自动从 PATH 检测，Studio 顶栏一键切换。
一个都没装？填 Anthropic API key，Studio 直接走 Messages API，零 CLI 依赖。
配乐和旁白也能 AI 生成
Settings → Audio 里配一个 MiniMax API key，就能在 Soundtrack 面板里：
- 背景音乐——描述情绪（”calm cinematic ambient, slow build”），MiniMax 生成一段纯音乐
- 旁白——写好脚本，TTS 直接读
导出时 ffmpeg 自动混音：人声下面音乐自动压低（ducking），可选淡入淡出。没配 key 也不影响其他功能。
上手三条命令
环境要求：Node.js ≥ 20、pnpm ≥ 9、ffmpeg、Chromium（没有就 npx playwright install 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
说点实在的：边界在哪
- 引擎现状：今天能跑的是 Hyperframes（HTML+CSS+GSAP → Chromium + ffmpeg）。Remotion / Motion Canvas / Revideo / Manim 是路线图，适配器没做完之前别指望切换。不过模板本身就是 HTML，绝大多数动效需求不依赖那些引擎。
- 配乐旁白要 MiniMax key：可选项，不配也能出无声视频。
- 本机渲染意味着吃本机资源：长视频、高分辨率会占 CPU 和时间——好处是数据不出本机、不按条计费，坏处是没有云端的”点击即得”。
- 依赖不算轻：Node 20+、pnpm、ffmpeg、Chromium 一套都要有。好在都是开发者机器上常见的东西。
- 项目还年轻：139 commits、4.7k Star，API 和模板格式可能还会动。商业关键流程建议锁定版本。
和 Remotion 怎么选
一句话版本：要团队协作的 React 视频生产线、公司能接受席位费，选 Remotion；要”AI 助手一句话、本机免费出片”、要贴公众号文章链接、要在多个 coding agent 之间切换，html-video 现在就能干，而且 Apache-2.0 全部功能不收费。
它俩其实不完全对立——html-video 的路线图里就写着 Remotion 适配器。理想状态是你的 Agent 在两者之间按需选择，那正是这个项目”元层”定位想做的事。
谁最该试
- 技术内容创作者——文章/仓库链接变解读视频，公众号、B 站、YouTube 一鱼多吃
- 开源项目维护者——README 一键变项目介绍片，放仓库首页
- 已经在用 coding agent 的人——你机器上那个 Claude Code / Codex / OpenCode，多装一个项目就多了”会剪视频”的技能
- 讨厌按次收费的人——Apache-2.0，渲染零边际成本，跑一千条视频不花一分渲染费
项目地址： github.com/nexu-io/html-video（Apache-2.0，Open Design 团队出品，有官方中文 README）
姊妹项目： Open Design（设计领域的 agent 元层，同团队同哲学）
