做视频有多痛苦，做过的人都知道。

拍素材、剪时间线、加字幕、调特效、配音乐……一个三分钟的视频折腾一下午。AI 来了之后情况好了一些，但所谓的「AI 做视频」基本等于「AI 生成一段素材，你还是得自己剪」。

目前有人换了个思路：不让 AI 操作剪辑软件，让 AI 直接写 HTML。写完渲染成 MP4。

这个项目叫 html-video，三天前刚开源，Apache 2.0 协议。作者 Tom Huang，来自 Open Design 团队。你丢给它一个链接、一篇文章、甚至一句话，它就能让 Claude Code 或 Cursor 自动生成一个带多帧切换、动画特效、配音配乐的专业视频。

已经有开发者在评论区喊出「html 版剪映」了。不是比喻——它真的能导出 MP4。

为什么是 HTML？

但凡用 AI 做过视频的人，都撞过同一堵墙：视频模型不靠谱。

「最大的坑是视频模型的帧序列注意力会飘，前面简单后面才稳。这个 HTML 方案挺有意思的。」

AI 视频模型的通病：时长一拉长，前面记得自己要拍什么，后面就忘了。人物变形、场景漂移、文字乱码——这是模型底层机制决定的，不是你提示词写得不好。

html-video 的思路很干脆：放弃让模型直接出视频，让模型写 HTML + CSS + GSAP 动画，然后用无头浏览器一帧一帧录下来。

这跟剪映等传统工具的根本区别是——剪映是你手动操作时间线，html-video 是你告知 Agent「我要一个 30 秒的产品宣传片，模板用故障风标题」，Agent 自己写代码、自己渲染、自己导出。

重点：Agent 输出的是代码（可调试、可修改），不是视频帧（黑盒、不可控）。出问题你能直接改 HTML，不用重新「生成」一遍。

那渲染出来的视频质量怎么样？有个硬指标：Hyperframes 引擎用 headless Chromium 录制 + ffmpeg 编码（libx264），走的是浏览器渲染管线——本质上跟你用 Chrome 打开一个网页看到的效果一样，只不过它帮你录下来了。

第一次上手：3 步跑起来

这个工具需要本地装 Node.js 和 pnpm。如果你没有，先去nodejs.org下个 LTS 版，装完 Node 之后跑 npm i -g pnpm。

前置条件满足之后，三步：

第 1 步：装依赖 + 构建

这步把项目所有包下载好、编译好。

git clone https://github.com/nexu-io/html-videocd html-videopnpm installpnpm -r build

pnpm install 装依赖，pnpm -r build 把 6 个 package 都构建好。这一步可能要跑几分钟，取决于网络和机器。

最容易在这步犯的错：忘了装 pnpm 直接用 npm 跑。这个项目是 pnpm workspace，npm 跑不动。

第 2 步：启动 Studio

构建完之后，Studio 是一个本地网页界面，所有操作都在浏览器里完成。

node packages/cli/dist/bin.js studio

浏览器会自动打开 http://127.0.0.1:3071。本地界面的基本风格是——左边聊天，右边模板画廊，顶上切 Agent。

这步做完之后，就能在 Studio 里看到 21 套模板的实时预览了。

第 3 步：选 Agent，开始出片

Studio 会自动检测你电脑上装了哪些 coding agent——Claude Code、Cursor、Codex、Gemini CLI、Qwen……一共 13 种，顶部栏一键切换。什么都没装的话，填个 Anthropic API Key 也能直接用。

然后做三件事：选模板 → 丢链接/写提示词 → 等出片。

列如你丢一篇公众号文章链接，Agent 读完自动提取要点、规划分镜、给每一帧填好 HTML，渲染导出 MP4。连公众号文章这种需要服务端渲染的页面都能直接抓，不用你手动复制粘贴。

重点：配好之后每次用只需要 pnpm -r build && node packages/cli/dist/bin.js studio。Studio 跑起来之后，剩下的都在浏览器里点点就行。

装好之后能做什么？

三个最实用的场景：

丢链接，出视频。 把一篇公众号文章、一个 GitHub 仓库链接扔给 Agent，它读内容、拆结构、写分镜、生成动画、导出 MP4。全程你不需要碰时间线。特别适合「项目介绍」「周报总结」「知识科普」这类内容型视频。

丢提示词，出视频。 不丢链接，直接描述你要什么。「做一个 30 秒的 GitHub Star 竞速赛视频，特斯拉 vs SpaceX」——Agent 自己编内容、自己匹配模板、自己渲染。

换模板，秒变风格。 同一份内容，换个模板就是完全不同的视觉风格。想从「科技故障风」换成「暖色胶片风」？在 Studio 里点一下就行，不用重新做。

还有一个命令行彩蛋：

node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3

这个命令用自然语言搜模板——你说意图，它匹配。21 套模板太多不知道哪个合适的时候很实用。

模板这件事，做得很讲究

html-video 的 21 套模板不是随意凑的。每个模板都带一份 template.html-video.yaml 清单，里面写了三样东西：

这个模板适合什么——分类、标签、最佳场景列表。Agent 靠这些信息判断「用户要的是这个模板」。

这个模板输出什么——分辨率、宽高比（横屏 16:9 / 竖屏 9:16 / 方形 1:1 / 小红书 4:5 全支持）、帧率、时长范围。

这个模板的版权是什么——每个模板都标注了 SPDX 开源协议、是否需要署名、是否允许商用。项目根目录的 NOTICE.md 记录了每一个模板的来源和协议，一个不落。

这意味着你可以放心把模板用在商业项目里，不用担心「这个素材能不能商用」的问题。许可证信息全透明。

覆盖的风格也很全：

• 数据可视化
• ：NYT 风格折线图、Swiss/Vignelli 网格
• 标题 & VFX
• ：故障风、动感文字、打字机光标
• Hero & 电影感
• ：液态渐变、漏光胶片、暖色颗粒
• 产品宣传
• ：15 秒 / 30 秒多场景模板
• 解说类
• ：决策树、内容卡片

吐槽和局限

吹了这么多，该聊几句实在的。

装起来有门槛。 pnpm + Node.js + 构建——对非开发者来说不友善。评论区已经有人喊「提议做成桌面 App」。好消息是，同团队的 Open Design 已经有 macOS 和 Windows 原生桌面客户端，html-video 的能力大致率会集成进去。

国内开发环境适配。 评论区有人提到：「国内可能有原生订阅、同时配了多个中转站 provider、需要 env 注入环境变量和代理」。这些场景目前还没有官方方案。

Quick Start 藏太深了。 这也是评论区的真实反馈——README 得往下翻好久才能找到怎么开始。好在这不是技术问题，改个文档顺序的事。

只支持 Hyperframes 引擎。 目前能用的渲染引擎就一个。Remotion、Motion Canvas 那些在路线图上但还没做。如果你已经深度绑定 Remotion 的工作流，得再等等。

但话说回来，3 天、3 万行代码、21 套模板、13 个 Agent 后端全接好、MP4 真实导出——这个交付速度本身就挺说明问题的。HTML→视频这条技术路线，可行性已经验证过了。

这意味着什么

过去一年，「AI 做视频」的叙事基本被 Sora、Veo 这些视频生成模型垄断了。所有人都在赌「让模型直接吐视频帧」。

html-video 代表的是一条完全不同的路线：让模型写代码，让浏览器渲染。 代码是可调试、可复用、可版本控制的。视频帧不是。

这条路不是什么新发明——Remotion 早就在做了——但 Remotion 要你写 React 组件，你还是在「做视频」。html-video 把这件事推到了一个新阶段：你不需要做视频，你只需要告知 Agent 你要什么。

对开发者来说，这是一个信号：agent 不只能写代码，还能出片。对内容创作者来说，这可能是视频制作成本真正归零的第一步。

不过说实话，目前这个阶段最适合的还是有命令行基础的开发者和 AI 从业者。普通用户提议等 Open Design 桌面版集成，或者找个程序员朋友帮你装一次——装好之后纯在浏览器里用，跟打开一个网页没什么区别。

参考链接：

html-video GitHub：https://github.com/nexu-io/html-video

Open Design GitHub：https://github.com/nexu-io/open-design

点赞、转发、小心心 ❤️ 欢迎在评论区留下你的想法！

— 完 —