夜雨聆风上周在群里看到一个很有意思的画面：一个开发者为了给产品做个演示视频，从 Figma 切图 → After Effects 做动画 → Premiere 合成 → 最后还要压缩导出，折腾了一整天。群里另一个老哥说："换成我用 Claude 写一段 HTML+CSS，然后拿工具转成 MP4，十分钟搞定。"
他说的是最近在 GitHub 上爆火的新项目——html-video。
这到底是什么？
html-video 是一个为 AI 编程助手打造的"元层级"视频生成工具。
用最简单的话说：你跟 AI 说"帮我做个介绍产品的视频"，AI 先写出 HTML+CSS+JS 动画，html-video 再把这些 HTML 转成真实的 MP4 视频文件。
整个流程全在你的本地机器上完成，不需要上传到任何云服务，不按每分钟计费。
项目由 nexu.io 团队开源，Apache-2.0 协议，刚上线不到一周就冲上了 GitHub Trending 的前排。截至目前已有 900+ Star 日增长，被多个开发者社群称为"视频生成领域的拥抱脸时刻"。
为什么说它解决了真问题？
先想想你平时做视频要经过多少环节：
• 从零写一个视频制作脚本 • 找模板、找素材、找配乐 • 在剪辑软件里拖拽、调时间轴 • 反复渲染导出 • 压缩到合适的大小
更糟的是，市面上的视频生成工具各自为战：Runway 会做 AI 视频但不会做精确的 UI 动画；Canva 能快速做幻灯片但做不了程序化的逐帧动画；After Effects 什么都能做但你得专门学。
html-video 的定位非常聪明——它不跟你争"谁是最强的视频引擎"，而是说不管用哪个引擎，我都是你 AI 助手和你选的渲染引擎之间的胶水层。
怎么用？复制即用的实战指南
安装
几秒钟就能装好：
# 通过 npm 全局安装npm install -g @nexu-io/html-video# 验证安装html-video --version基础用法
装完之后，结合你的 AI 编程助手（支持 Claude Code、Cursor、Codex、Hermes 等），你只要给它一段描述：
"生成一个 30 秒的产品介绍视频，包含：品牌 Logo 展示 → 三大功能介绍卡片 → CTA 号召行动，科技感蓝色调，配上缓入缓出的动效"AI 助手会生成一份 HTML 文件，然后你运行：
# 从 HTML 文件生成视频html-video render output.html --format mp4# 或直接给提示，让工具自己生成 HTML 再渲染html-video generate "产品介绍视频，蓝色科技风" --engine playwright21 种内置模板
html-video 内置了 21 种视频模板，覆盖了常见的场景：
# 列出可用模板html-video list-templates# 基于模板生成html-video generate --template product-launch \ --title "AI Chat 2.0" \ --subtitle "重新定义人机交互" \ --cta "立即体验"多种渲染引擎可选
这是 html-video 最酷的设计——引擎只是一个适配器。你可以根据需求切换：
• Playwright（默认）：无头浏览器渲染，效果最逼真 • Puppeteer：Chrome/Chromium 渲染 • Remotion：适合 React 生态的项目 • FFmpeg：纯命令行渲染，适合 CI/CD 流水线
# 切换渲染引擎html-video render demo.html --engine remotion给视频加 AI 配乐
甚至还能自动生成配乐：
html-video generate "产品演示视频" --soundtrack --style cinematic会自动生成与视频节奏匹配的背景音乐，不需要另外找 BGM。
高级用法：程序化生成
如果你需要在 CI/CD 流水线中批量生成视频（比如为每个新用户生成个性化欢迎视频），可以配合脚本使用：
// generate.jsimport { render } from '@nexu-io/html-video';const video = await render({ html: `<html>...动态生成的 HTML...</html>`, engine: 'playwright', format: 'mp4', fps: 30, duration: 15,});await video.save('./output/welcome-video.mp4');为什么这个项目值得关注？
1. 它改变的是"创作流程"而非"创作工具"
大多数视频工具都在解决"怎么渲染得更好看"，而 html-video 解决的是"怎么让 AI 和视频生成无缝对接"。这个思路转变很关键——在 AI 时代，工具之间的互操作性比工具本身的功能更重要。
2. 本地运行，数据完全私密
所有渲染都在本地完成，你的产品素材、内部数据不会被上传到任何第三方。这对于需要处理敏感信息的企业团队来说，是一个巨大的优势。
3. 开发者优先的设计哲学
从 CLI 到 API，从模板系统到引擎适配器，整个项目透着一股"为开发者而生"的气质。这意味着你可以：
• 集成到 CI/CD 中自动化生成演示视频 • 用代码动态生成个性化营销素材 • 自建视频模板库给团队复用
4. 生态潜力巨大
作为"视频生成领域的 MCP协议层"，html-video 让任何 AI 编程助手直接获得视频能力。想象一下：未来你在 Claude Code 里写完一个功能，说句"帮我生成这个功能的演示视频"，视频就直接出现在你的文件夹里。
结尾
html-video 目前还处于早期阶段（v0.x），但它的设计思路已经足够清晰——不造新的轮子，而是让现有的轮子能互相配合。
如果你是一个经常跟视频打交道的开发者，或者你的产品需要批量生成演示内容，这个项目值得你立刻 Star 并尝试。几分钟的配置，换来的是省下的几小时甚至几天的重复劳动。
项目地址：https://github.com/nexu-io/html-video
