网页转视频

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

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

html-video — HTML becomes video, on your laptop

HTML becomes video — on your laptop. 在你的笔记本上，让本地编码智能体（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 · 数据可视化编辑风格的 NYT 风格动画折线图——标题、带注释的数据点、来源行。适用于“数字上升了”这类故事。	frame-glitch-title · 标题卡带有扫描线的色差毛刺标题。适用于开场、掉落和“系统在线”的能量感。

frame-liquid-bg-hero · 主视觉带有居中标题的极光液态渐变主视觉。适用于产品发布和大胆的声明。	frame-light-leak-cinema · 电影感温暖的胶片颗粒 + 漏光电影感帧。适用于氛围、品牌影片和“安静的一年”叙事。

vfx-text-cursor · VFX 带有闪烁终端光标的打字机文本。适用于代码风格的展示和 CLI 演示。	frame-logo-outro · 结尾卡干净的动画 Logo 结尾卡。适用于任何视频的片尾和品牌印记。

……以及另外 15 个模板，包括多场景产品宣传、动态排版、Swiss-grid 和 Vignelli 数据卡片、决策树解释器、Takram 有机动效和温暖颗粒的编辑风格。在工作室画廊中浏览全部 21 个模板。

为什么存在

HTML→Video 到视频的类别——但每个引擎都有自己的观点，每个都要求你学习其自己的创作模型：

引擎	范式	权衡	在 html-video 中
Hyperframes	HTML + CSS + GSAP，智能体技能驱动	单一渲染范式	✅ 已集成——默认引擎；通过无头 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 块
        ▼
  ③ 内容图          多帧 IR — 节点（实体 / 数据 / 文本）+ 边（顺序 /
        │               依赖 / 对比）；拓扑排序为帧顺序与时长
        ▼
  ④ 每帧 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/…
代理: 好，我读完了《用嘴剪视频的时代来了？…》这篇文章 — 这就基于它生成。下一步选风格。
→      多帧解说视频，基于文章的实际观点构建

网页文章 → 抓取并扁平化为 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 <提示>`
Qwen Code	`qwen`	通过 stdin 提供提示
OpenCode	`opencode`	`opencode run`，通过 stdin 提供提示
GitHub Copilot CLI	`copilot`	`copilot --allow-all-tools`，通过 stdin 提供提示
Aider	`aider`	`aider --message <提示>`
Anthropic API	BYOK	直接使用 Messages API ——即使未安装 CLI 也能工作

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

配乐

为完成的视频添加语音。在 设置 → 音频 中添加 MiniMax API 密钥，然后在项目内的配乐面板中：

背景音乐 ——描述一种情绪（平静的电影环境音，缓慢推进）；MiniMax 生成一条纯音乐曲目。
旁白 ——输入脚本；MiniMax 朗读它（TTS）。

两者都通过 ffmpeg 混入导出的 MP4（语音下的音乐音量降低，可选的淡入/淡出）。没有配置密钥？工作室的其余部分保持不变。

模版库

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

用途 — category、tags 以及一个 best_for 列表（例如 “Corporate slide”、“Minimal report card”），search-templates 会根据您的意图进行匹配。
输出内容 — 支持的分辨率、宽高比、帧率、时长范围，以及是否包含 Alpha 通道或音频。
输入内容 — 一个 inputs JSON 模式，因此代理确切知道需要填充哪些文本/数据插槽。
许可来源 — 一个 SPDX ID，外加明确的 attribution_required / redistribution_allowed / commercial_use 标志，以及指向上游来源 URL 的 assets_attribution 块。

最后一点是经过深思熟虑的。每个模版都是构造上许可干净的：派生分支保留其原始许可，仓库根目录的 NOTICE.md 记录了每个来源和 SPDX，而没有明确宽松许可的内容不会发布。因此您可以在商业工作中使用其中任何一个，无需审计。模版涵盖数据可视化（NYT 风格图表、Swiss/Vignelli 网格）、标题和视觉效果（故障特效、动态文字、打字机光标）、英雄和电影感（液态渐变、漏光、暖色颗粒）、产品宣传片（15 秒/30 秒多场景）、以及解说框架（决策树）——格式是开放的，因此社区模版可以以相同方式加入。

架构

packages/
├── core/                  项目 / 资源 / 内容图类型、注册表、编排器、
│                          MiniMax 提供程序 + ffmpeg 音频混流
├── content-graph/         多帧故事板 IR（节点 + 边，拓扑排序）
│ 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（引擎适配器 / 模版元数据 / 代理技能 / 内容图）

路线图

参考资料与渊源

项目	在此的角色
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 · 数据可视化编辑风格的 NYT 风格动画折线图——标题、带注释的数据点、来源行。适用于“数字上升了”这类故事。	frame-glitch-title · 标题卡带有扫描线的色差毛刺标题。适用于开场、掉落和“系统在线”的能量感。

frame-liquid-bg-hero · 主视觉带有居中标题的极光液态渐变主视觉。适用于产品发布和大胆的声明。	frame-light-leak-cinema · 电影感温暖的胶片颗粒 + 漏光电影感帧。适用于氛围、品牌影片和“安静的一年”叙事。

vfx-text-cursor · VFX 带有闪烁终端光标的打字机文本。适用于代码风格的展示和 CLI 演示。	frame-logo-outro · 结尾卡干净的动画 Logo 结尾卡。适用于任何视频的片尾和品牌印记。