html-video：用 HTML、CSS 和 Coding Agent 在本地生成真实 MP4

一句话定位

html-video 是一套面向 Coding Agent 的本地视频生成工具：给它一句描述、文章链接或 GitHub 仓库，它会生成多帧动画 HTML，并渲染成真实 MP4。

基础信息卡片

解决什么问题

程序化视频并不是新概念。Remotion、Motion Canvas、Manim 这类工具都能把代码变成视频，但它们通常都有各自的创作模型：有的偏 React，有的偏 Canvas，有的偏数学动画。

这会带来一个现实门槛：你不是只在“做视频”，还要先选择框架、学习语法、理解渲染方式，然后再把内容拆成镜头。

html-video 的目标是把这层复杂度往后藏起来。你面对的是本地 Studio 或 CLI，真正负责拆解内容、选择模板、生成画面的，是接入的 Coding Agent。

  flowchart LR
    A[一句描述 / 文章链接 / GitHub 仓库] --> B[抓取并整理素材]
    B --> C[Coding Agent 生成故事板]
    C --> D[每一帧生成动画 HTML]
    D --> E[Headless Chromium 录制]
    E --> F[ffmpeg 编码与合成]
    F --> G[输出 MP4]

这套流程最关键的地方在于：内容理解和画面渲染被拆开了。Agent 负责“讲什么、怎么分镜”，渲染引擎负责“怎么把画面变成视频”。

核心功能

1. 从链接或仓库生成视频

html-video 不只支持一句 Prompt。你也可以粘贴网页文章、微信公众号文章，或者 GitHub 仓库地址。Studio 会先把来源内容抓取并整理成 Markdown，再交给 Agent 生成视频内容。

这对技术内容尤其有用：比如给它一个开源项目仓库，它可以读取项目简介、README 和顶层结构，然后生成一段项目介绍视频。

2. 多帧故事板

项目内部使用 content-graph 来组织多场景视频。可以理解为：Agent 先把内容拆成多个节点，每个节点对应一个画面；节点之间的顺序、对比、依赖关系，决定视频的节奏。

单帧视频可以直接走快速路径；多场景视频则会逐帧生成 HTML，再统一合成为 MP4。

3. HTML/CSS 表达画面

相比直接写视频框架，HTML/CSS 的门槛更低，也更容易被 Coding Agent 生成和修改。标题、卡片、图表、渐变、动效、布局，都可以用 Web 技术来表达。

当前默认引擎是 Hyperframes：它会用无头 Chromium 加载这些动画 HTML，逐帧录制，再交给 ffmpeg 编码。

4. 内置模板库

html-video 自带 21 个模板，覆盖数据可视化、产品宣传、标题卡、片尾、动感排版、决策树、电影感画面等常见场景。

上面这种数据图表模板，适合把“一个指标如何变化”讲成短视频里的关键画面。Agent 不需要从零设计每一帧，而是基于模板填入标题、数据、标注和来源。

这类标题模板则更适合片头、主题揭示，或者技术类视频里常见的“系统上线”“趋势变化”一类表达。

5. 支持本地 Agent 工作流

项目支持多种 Coding Agent，包括 Open Design、Trae CLI、Claude Code、Cursor Agent、Codex CLI、Gemini CLI、Grok、Qwen Code、OpenCode、Copilot CLI、Aider、Hermes，以及 Anthropic API。

这意味着它不是绑定某一家模型或平台，而是更像一个本地视频生成工作台：你可以根据自己已经安装和使用的 Agent 来驱动视频生成。

6. 可选配乐和旁白

如果配置 MiniMax API Key，还可以生成背景音乐和 TTS 旁白。导出时，音频会通过 ffmpeg 混入最终 MP4。没有音频配置时，视频生成流程本身也可以正常使用。

适合谁

html-video 比较适合这几类人：

• 想把技术文章、开源项目、产品说明做成短视频的开发者；
• 想用 Agent 批量生成项目介绍视频的内容团队；
• 想做“Video as Code”工作流的工程师；
• 不想依赖云端渲染、不想按次付费的视频自动化用户；
• 已经在使用 Claude Code、Codex、Cursor、Hermes 等 Coding Agent 的用户。

它尤其适合“内容结构明确，但需要更快转成视频表达”的场景。例如开源项目介绍、产品更新、数据变化解读、技术教程片头、社媒短视频素材等。

快速上手

项目使用 pnpm 管理 monorepo，官方给出的启动方式是：

pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio

启动后打开本地 Studio：

http://127.0.0.1:3071

常用 CLI：

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 可以根据视频意图搜索合适模板。

结论

html-video 的价值不在于“HTML 截图转视频”这么简单，而在于它把内容输入、Agent 理解、故事板生成、HTML 动画、MP4 渲染串成了一条完整链路。

对开发者来说，它降低了程序化视频的上手成本：不用先押注某个视频框架，也不用从空白画布开始设计。你可以先用文章、仓库或 Prompt 提供内容，再让 Agent 基于模板生成视频。

目前真正可运行的核心是 Hyperframes 引擎，其他引擎还在规划中。但如果你关注 AI Agent、内容自动化、技术视频生成，html-video 是一个值得跟进的开源项目。