html-video：让 AI Agent 把 HTML 变成视频，2000+ Star 的「视频即代码」新范式

引言

你有没有想过，用一段 HTML 就能生成一部真正的 MP4 视频？不是浏览器里的动画预览，而是可以上传到 B 站、嵌入 PPT、发到朋友圈的视频文件。更疯狂的是——这件事完全由 AI Agent 自动完成，你只需要用自然语言描述你想要什么。这就是 html-video，一个由 nexu-io 的 Open Design 团队在 2026 年 5 月底开源的项目。上线不到两周，GitHub Star 就突破 2000，社区热度炸裂。今天 Echo 就带大家深入拆解这个项目的架构、玩法和它背后的「视频即代码」新范式。

项目概览

先看基本面：

仓库地址：https://github.com/nexu-io/html-video
Star / Fork：2067 ⭐ / 229 🍴（截至发稿）
主语言：HTML
许可证：Apache-2.0，完全自由使用
创建时间：2026-05-27
团队：nexu-io 旗下的 Open Design 团队

项目的 slogan 只有一句话：**”HTML becomes video — on your laptop”**。听起来简洁，但背后的技术栈相当硬核。它把前端开发者最熟悉的 HTML/CSS 作为视频内容的「源码」，通过可插拔的渲染引擎将其逐帧捕获，最终编码成标准 MP4 文件。整个过程在本地完成，不需要云服务，没有按次计费，没有厂商锁定。

核心架构解析

html-video 的架构可以分为三层：

1. 内容层：HTML + CSS 即视频内容

传统视频制作的「内容」是像素、帧、时间线。html-video 把这些全部抽象为 Web 标准。一段 HTML 就是一个视频场景，CSS 动画就是转场和特效，JavaScript 就是交互逻辑。这意味着：

任何前端开发者都能零门槛上手
版本控制（Git）天然支持视频内容的 diff 和协作
AI Agent 天然擅长生成 HTML，因为它本质上就是一个代码生成器

2. 渲染层：可插拔的渲染引擎

html-video 不绑定单一渲染器。它提供了渲染引擎插件接口，开发者可以接入不同的无头浏览器或渲染后端。核心流程是：

1	HTML 输入 → 渲染引擎逐帧捕获 → 帧序列 → 编码器 → MP4 输出

这种解耦设计让项目在性能和兼容性上都有极大的扩展空间。你可以用 Puppeteer、Playwright，甚至未来的 Servo 嵌入模式来做渲染，一切取决于你的插件实现。

3. 输出层：AI 音轨生成

除了画面，html-video 还支持 AI 生成的音轨。你可以为视频自动配上背景音乐或语音旁白，让产出的 MP4 更加完整。对于需要批量生产短视频内容的团队来说，这简直是降维打击。

模板系统：21 套精心设计的起手式

不想从零开始写 HTML？html-video 内置了 21 套精选模板，覆盖了当下最流行的视频风格：

模板类型	描述
📊 数据图表	NYT 风格的数据可视化动画
🔤 故障标题	Glitch 风格的文字特效
🌊 液态背景	流体渐变的动态背景
🎬 电影画框	2.35:1 宽银幕风格的边框动画
⌨️ 打字机特效	逐字出现的 Typewriter VFX
🏷️ Logo 片尾	品牌 Logo 的动画收尾

这些模板不是简单的静态 HTML，每一个都是一套完整的、带时间轴动画的视频模板。你可以直接用，也可以在此基础上用 AI Agent 进行个性化修改。

多 Agent 支持：14+ 编码 Agent 无缝对接

这是 html-video 最让人兴奋的特性之一。它不是为某一个 AI 工具设计的，而是全面拥抱了当前的 Coding Agent 生态。官方支持的 Agent 后端多达 14 种以上：

Claude Code / Anthropic 系列
Cursor / AI IDE
Codex / OpenAI
Gemini / Google
Grok / xAI
通义灵码 Qwen / 阿里
GitHub Copilot
Aider
Hermes Agent
OpenCode
……等等

这意味着无论你平时用哪个 AI 编码工具，都可以直接驱动 html-video 生成视频。不需要额外的 SDK，不需要特殊的 API 适配——html-video 的输入就是 HTML 文件，输出就是 MP4 文件，这个接口对任何 Agent 来说都是天然可调用的。

实战演示：三种典型用法

用法一：用自然语言描述视频

在你的 Coding Agent 中输入：

“帮我生成一个 15 秒的产品发布视频，科技感的深蓝渐变背景，标题’Nova X Pro’从左侧飞入，下方数据卡片逐个弹出展示核心参数，最后 Logo 淡出。”

Agent 会：

根据你的描述生成 HTML + CSS 动画代码
调用 html-video 渲染引擎
输出一个可直接使用的 MP4 文件

用法二：给一篇博客文章，自动生成摘要视频

粘贴一篇文章的链接，Agent 会：

提取核心观点
用图表模板 + 打字机模板生成视觉化摘要
渲染为视频

用法三：指向一个 GitHub 仓库

让 Agent 分析一个开源项目，自动生成项目介绍视频——架构图动画、贡献者统计、Star 增长曲线，全部由 HTML 生成。

与传统视频工具对比

维度	传统工具（After Effects / Canva）	html-video
学习曲线	需要学习专门的 UI 操作	只需要会 HTML/CSS
自动化程度	低，大量手动操作	完全自动，Agent 驱动
版本控制	困难，二进制文件	天然支持 Git diff
批量生产	效率低	代码循环 + 模板即可批量生成
成本	订阅费 + 渲染费	免费开源，本地运行
可定制性	受限于工具能力	无限，HTML 没有天花板
AI 集成	几乎不可能	原生设计

当然，html-video 不是要取代 After Effects 做好莱坞级别的特效。它的定位非常清晰：程序化视频生成——那些需要批量、自动化、可迭代的视频内容场景。

总结

html-video 的出现，标志着一个新范式的诞生：Video as Code。

视频不再是需要专业工具和专业技能才能制作的「重资产」。当视频内容被抽象为 HTML + CSS，它就变成了和代码一样的东西——可以被 AI Agent 生成、可以被 Git 管理、可以被 CI/CD 流水线自动构建。

对于开发者来说，这意味着你可以用写前端的方式来做视频。对于内容团队来说，这意味着批量化、自动化的视频生产终于有了一个开源的、不依赖任何云服务的解决方案。对于 AI Agent 生态来说，这意味着多了一个杀手级的应用场景。

2000+ Star 只是开始。在 AI Agent 越来越强大的今天，html-video 这种「让 Agent 直接产出多媒体内容」的项目，会成为越来越重要的一块拼图。如果你还没试过，强烈建议现在就去 GitHub 上 clone 一份，跟着模板跑一遍——你会发现，原来做视频可以这么简单。

我是 Ren Echo，关注 AI、开源和开发者工具。如果这篇文章对你有帮助，欢迎分享给同样对 AI 视频生成感兴趣的朋友。