网页转视频

面向编程 Agent 的视频生成工具，本地把 HTML/CSS/数据渲染成真实 MP4，内置 21 套模板

类型 CLI 3,142 星标更新 2026-06-11 许可 Apache-2.0 原仓库主页

html-video — HTML becomes video, on your laptop

HTML 也能变成视频——就在你的笔记本上运行。 带上你本地的编码代理（Open Design · Windsurf CLI · Trae CLI · Claude Code · Cursor · Codex · Gemini · Grok · Qwen · OpenCode · Copilot · Aider · Hermes · 或 Anthropic API）。描述一段视频，或者粘贴文章链接 / GitHub 仓库，代理会将其转化为多帧、全动画视频——然后直接在本地渲染成真正的 MP4 文件。一次代理循环，可插拔的渲染引擎，精心设计的模板库，可选的 AI 配乐。Apache-2.0 许可，无按渲染次数收费，无供应商锁定。

Open Design 团队的官方项目 · open-design.ai

English · 简体中文

示例展示

以下每个模板都是真实的、带动画的单文件 HTML 视频——这些是实时渲染效果，并非模拟图。选一个模板，让代理用你的内容填充，然后导出为 MP4。


frame-data-chart-nyt · 数据可视化《纽约时报》风格的编辑式动画折线图——标题、标注数据点、来源行。适用于“数据上升了”这类故事。	frame-glitch-title · 标题卡带有扫描线的色差故障标题。适合开场、片段切换和“系统上线”的氛围。

frame-liquid-bg-hero · 英雄页面极光液态渐变英雄页面，中央标题。适合产品发布和大胆宣言。	frame-light-leak-cinema · 电影感画面暖色胶片颗粒 + 漏光电影感画面。适合氛围营造、品牌宣传片、“安静的一年”叙事。

vfx-text-cursor · 视觉效果打字机风格文本，带闪烁终端光标。适合代码风格展示和 CLI 演示。	frame-logo-outro · 结尾卡简洁的动画 Logo 结尾卡。适合视频末尾的署名和品牌印记。

……还有 15 个更多模板，包括多场景产品宣传片、动态文字排版、瑞士网格与 Vignelli 数据卡片、决策树讲解、Takram 有机动画、暖色胶片编辑风格。在工作室画廊中浏览全部 21 个实时模板。

为什么会有这个项目

HTML → 视频是一个真实存在的领域——但每个渲染引擎都有自己的偏好，而且每个都要求你学习它的创作模型：

引擎	范式	权衡	在 html-video 中的支持
Hyperframes	HTML + CSS + GSAP，基于 agent 技能驱动	单一渲染范式	✅ 已提供——默认引擎；通过无头 Chromium + ffmpeg 渲染真实 MP4
Remotion	React 组件	源码可用，超过 4 名开发者需付费	🗺️ 计划中
Motion Canvas · Revideo	基于 Canvas 的 TypeScript 生成器	最适合讲解类、代码优先的场景	🗺️ 计划中
Manim 等	数学/3D 优先	领域较窄	🗺️ 研究中

针对不同使用场景选择合适的引擎、学习每个模型、再将它们整合到一个工作流中，需要耗费大量的工程时间。大多数团队会选定一个引擎，并接受它的局限性。

html-video 是位于所有这些引擎之上的元层。 你只需与代理对话；代理会选择合适的引擎、选择合适的模板、填充你的内容并渲染视频。引擎只是一个实现细节，背后是统一的适配器接口——一个 render(input, ctx) 契约，任何后端都可以满足。添加一个新引擎后，每个模板、每个代理以及整个工作室工作流都能自动受益。无需学习新的 DSL，切换引擎时也无需重写。

同样的理念也驱动了设计领域的 Open Design——一个位于众多工具之上的代理元层。html-video 是由同一团队打造的动画版本。

状态： 可插拔引擎架构已就位，Hyperframes 引擎已完全接入并能够渲染真实 MP4——无头 Chromium 逐帧录制动画 HTML，然后由 ffmpeg 编码为 libx264。Remotion、Motion Canvas / Revideo 和 Manim 已在路线图中：适配器接口已为它们设计好，但适配器尚未构建。上表中“在 html-video 中的支持”一列是当前可运行情况的唯一真实来源。

概览


编码代理 (14 种)	Open Design (Vela) · Windsurf CLI · Trae CLI · Claude Code · Cursor Agent · Codex CLI · Gemini CLI · Grok Build · Qwen Code · OpenCode · GitHub Copilot CLI · Aider · Hermes · Anthropic Messages API — 自动检测 `PATH` 中的代理，可从顶部栏切换。
真实 MP4 渲染	Headless Chromium 录制动画 HTML，ffmpeg 编码（libx264）— 本地运行，无云端渲染，不按片段收费。
文章 / 仓库 → 视频	粘贴 URL 或 GitHub 仓库；studio 在服务端获取内容（支持微信公众号文章），基于真实内容构建视频。
21 种模板	精选、许可证干净的样式：数据可视化、产品推广、短视频、解说、动态文字、过渡效果 — 在图库中实时预览。
多帧故事板	内容图驱动多场景视频；内联编辑每帧文本、重新排序、重新渲染。
AI 配乐	通过 MiniMax 可选的背景音乐 + 旁白，在导出时混入 MP4。
Studio + CLI	一个本地浏览器 studio 和一个可脚本化的 `html-video` CLI。
许可证	Apache-2.0 — 无每次渲染费用、无座位上限、无贡献者协议。

工作原理

输入一句话（或一个链接），输出一个真实的 MP4。无论是从提示词、文章还是仓库开始，都经过相同的流水线：

  prompt / link / repo
        │
        ▼
  ① 获取来源          studio 在服务端拉取 URL 或仓库，将其扁平化为 Markdown
        │
        ▼
  ② 代理循环          你的代理阅读素材 + 所选模板的风格，输出
        │              内容图（故事板）+ 每帧一个 HTML 块
        ▼
  ③ 内容图            多帧中间表示 — 节点（实体/数据/文本）+ 边（顺序/
        │              依赖/对比）；拓扑排序为帧顺序和时间
        ▼
  ④ 每帧 HTML         每个节点变为磁盘上一个独立的动画 HTML 帧
        │
        ▼
  ⑤ Hyperframes 渲染  headless Chromium 加载每帧并录制（自动延长以覆盖
        │              该帧自身的动画）→ 每帧一个 webm
        ▼
  ⑥ ffmpeg            每个 webm → mp4（libx264），然后拼接成一个视频；
        │              可选 MiniMax 音乐 + 旁白混入
        ▼
      your.mp4

步骤 ②–④ 是“元层”所在：代理决定故事板，引擎决定如何绘制它，两者互不干扰。步骤 ⑤ 是引擎特定的 — 后面换成 Remotion 或 Motion Canvas 只替换那个盒子，不触动故事板和代理循环。所有操作在你的机器上运行；唯一的网络调用是可选的获取来源和可选的配乐。

单帧视频走快速路径，跳过内容图 — 一个模板、一个 HTML，直接渲染。

将链接变成视频

这是大多数人会用的方式：把你的链接交给代理，拿回一个视频。代理作为本地 CLI 运行，本身没有网络访问能力，所以 studio 在服务端获取来源，并将真实内容送入生成提示 — 无需复制粘贴文章正文，页面在服务器端渲染（如微信公众号）也同样工作。

你:   做一个解读视频  https://mp.weixin.qq.com/s/…
代理: 好，我读完了《用嘴剪视频的时代来了？…》这篇文章 — 这就基于它生成。下一步选风格。
→      多帧解说视频，根据文章的实际观点构建

Web 文章 → 获取并扁平化为 Markdown。服务端渲染的页面，如微信公众号文章，开箱即用。
GitHub 仓库 → 通过公开 API 拉取描述、顶层结构和 README — 非常适合制作“解释这个开源项目”的视频。
仅提示词 → 描述主题，代理从头编写内容。

无论来源是什么，它都成为视频实际构建的材料 — 而不是围绕固定模板的装饰。代理读取获取的内容，决定需要多少场景，并编写一个内容图故事板：关键点变成帧，它们之间的关系（这个跟随那个，这个对比那个）变成边，所选模板的视觉风格应用于每帧。因此，一篇1500字的文章变成一个节奏得当的多场景解说视频，每一行都追溯到原文；一个仓库变成一个结构化导览，展示项目的实际情况。

快速开始

前置要求

要求	最低版本	检查命令
Node.js	20+	`node --version`
pnpm	9+	`pnpm --version`
ffmpeg	任意较新版本	`ffmpeg -version`
Chromium（或 Playwright 浏览器）	—	`npx playwright install chromium`

默认渲染引擎在 headless Chromium 浏览器中录制动画 HTML，然后使用 ffmpeg（libx264）编码 MP4。如果你没有系统安装的 Chromium，请安装 Playwright 的 Chromium：

npx playwright install chromium

安装与运行

pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio    # 在 http://127.0.0.1:3071 打开 studio

在 studio 中：选择一个模板（或直接描述视频/粘贴链接），与你的代理聊天，内联编辑每帧文本，添加配乐，然后导出 MP4。

CLI 工具：

node packages/cli/dist/bin.js doctor                 # 检测已安装的代理 + 引擎
node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3

支持的代理

自动检测 PATH 中的代理；从 studio 顶部栏切换当前使用的代理。Studio 默认使用 Open Design (Vela) — 一次登录，多种模型，成本更低 — 然后回退到第一个可用的代理，以便新项目总有可用的后端。

代理	检测方式	调用方式
Open Design (Vela)	`vela` / 随 Open Design 应用捆绑	通过 stdio 的 ACP — 在 Open Design 中登录一次，选择任意模型
Windsurf CLI	`windsurf`	`windsurf --yolo`，通过 stdio 的 ACP
Trae CLI	`traecli`	`traecli acp serve --yolo`，通过 stdio 的 ACP
Claude Code	`claude`	`claude --print`，通过 stdin 提示
Cursor Agent	`cursor-agent`	`cursor-agent --print`
Codex CLI	`codex`	`codex exec`，通过 stdin 提示
Hermes	`hermes`	Hermes ACP CLI
Gemini CLI	`gemini`	通过 stdin 提示
Grok Build	`grok`	`grok -p <prompt>`
Qwen Code	`qwen`	通过 stdin 提示
OpenCode	`opencode`	`opencode run`，通过 stdin 提示
GitHub Copilot CLI	`copilot`	`copilot --allow-all-tools`，通过 stdin 提示
Aider	`aider`	`aider --message <prompt>`
Anthropic API	BYOK	直接 Messages API — 无需安装 CLI 即可工作

什么都没安装？设置一个 Anthropic 密钥，studio 直接与 Messages API 通信。

配乐

给你的完成视频配上声音。在 设置 → 音频 中添加 MiniMax API 密钥，然后在每个项目的配乐面板中：

背景音乐 — 描述情绪（calm cinematic ambient, slow build）；MiniMax 生成一段器乐音轨。
旁白 — 输入脚本；MiniMax 朗读它（TTS），混入最终音轨。

两者都混入导出的 MP4 中（音乐在人声下自动降低音量，可选淡入/淡出），通过 ffmpeg 实现。没有配置密钥？其余演播室功能保持不变。

模板画廊

这 21 个模板并非随意拼凑——每个都是独立的、代理可读的单元，由演播室启动时扫描的 template.html-video.yaml 清单描述。清单包含了代理无需打开 HTML 就能选取和驱动模板所需的一切：

用途 —— category、tags 以及 best_for 列表（例如 “企业幻灯片”、“最小化报告卡”），search-templates 会根据你的意图匹配这些内容。
输出内容 —— 支持的分辨率、宽高比、帧率、时长范围，是否包含 Alpha 通道或音频。
输入内容 —— 一个 inputs JSON 模式，使代理能准确知道哪些文本/数据槽需要填充。
许可来源 —— SPDX 标识符，加上显式的 attribution_required / redistribution_allowed / commercial_use 标记，以及指向上游来源 URL 的 assets_attribution 块。

最后一点是有意为之。每个模板从构建之初就保证了许可的干净：分支携带原始许可证，仓库根目录下的 NOTICE.md 记录了每个来源和 SPDX，没有明确宽松许可证的内容不会发布。因此你可以在商业作品中使用任意模板而无需审计。模板涵盖数据可视化（NYT 风格图表、瑞士/Vignelli 网格）、标题与特效（故障、动态排版、打字机光标）、主视觉与电影感（液态渐变、漏光、温暖颗粒）、产品推广（15秒/30秒多场景）以及解释性框架（决策树）——格式是开放的，社区模板也可以以相同方式加入。

架构

packages/
├── core/                  项目 / 资源 / ContentGraph 类型、注册表、编排器、
│                          MiniMax 提供器 + ffmpeg 音频混流
├── content-graph/         多帧故事板中间表示（节点 + 边，拓扑排序）
│ runtime/                代理运行时 —— 检测 / 生成 / 流式传输
│                          (Open Design/Vela · Windsurf CLI · Trae CLI · Claude · Cursor · Codex · Gemini · Grok · Qwen · OpenCode · Copilot · Aider · Hermes · Anthropic API)
├── adapter-hyperframes/   Hyperframes 引擎适配器 —— 通过 Chromium + ffmpeg 实现真实渲染
├── cli/                   `html-video` 命令 + 演播室 HTTP 服务器 + 源文件获取
└── project-studio/        浏览器演播室 UI（聊天、模板画廊、帧、配乐、导出）
templates/                 21 个精心策划、许可干净的视频模板
research/                  RFC（引擎适配器 / 模板元数据 / 代理技能 / content-graph）

路线图

参考资料与传承

项目	在本项目中的角色
Open Design	姊妹项目 —— 设计代理元层；同一团队，共享理念
HTML Anything	姊妹项目 —— 面向静态交付物的 HTML；html-video 是动态方面
Hyperframes	已发布的引擎适配器；HTML+CSS+GSAP 渲染范式，以及数个 Apache-2.0 模板的来源

许可证

Apache-2.0

由以下团队构建

nexu-io —— 打造 Open Design 的团队。加入 Discord · 关注 @nexudotio。

在 GitHub 查看完整项目


frame-data-chart-nyt · 数据可视化《纽约时报》风格的编辑式动画折线图——标题、标注数据点、来源行。适用于“数据上升了”这类故事。	frame-glitch-title · 标题卡带有扫描线的色差故障标题。适合开场、片段切换和“系统上线”的氛围。

frame-liquid-bg-hero · 英雄页面极光液态渐变英雄页面，中央标题。适合产品发布和大胆宣言。	frame-light-leak-cinema · 电影感画面暖色胶片颗粒 + 漏光电影感画面。适合氛围营造、品牌宣传片、“安静的一年”叙事。

vfx-text-cursor · 视觉效果打字机风格文本，带闪烁终端光标。适合代码风格展示和 CLI 演示。	frame-logo-outro · 结尾卡简洁的动画 Logo 结尾卡。适合视频末尾的署名和品牌印记。