html-video

在你的电脑上，把 HTML 变成视频。 接上你本地的 coding agent（Open Design · Windsurf CLI · Trae CLI · Claude Code · Cursor · Codex · Gemini · Grok · Qwen · OpenCode · Copilot · Aider · Hermes · 或 Anthropic API），描述一个视频，或者直接粘一个文章链接 / GitHub 仓库，agent 就把它变成一支多帧、带动画的视频 —— 然后就在你这台机器上渲染成真实 MP4。一个 agent 循环、可插拔渲染引擎、精选模板库、可选 AI 配乐。Apache-2.0，无单次渲染费用，不绑定厂商。

Open Design 团队官方出品 · open-design.ai

English · 简体中文

---

作品展示

下面每个模板都是一支真实、带动画的单文件 HTML 视频 —— 这些是实时渲染截图，不是效果图。挑一个，让 agent 填进你的内容，导出 MP4。

……还有 15 个，包括多场景产品宣传、动感排版、瑞士网格与 Vignelli 数据卡、决策树解说、Takram 有机动效、暖色颗粒杂志风。全部 21 个都可在 studio 模板库里实时浏览。

---

为什么做这个

HTML→Video 是个真实存在的品类 —— 但每个引擎都各有主张，且都要你学它自己的创作模型：

按场景挑引擎、学每一种创作模型、再把它们拼成一条工作流，都要耗真实的工程时间。多数团队挑一个、然后忍受它的局限。

html-video 是凌驾于它们之上的 meta-layer。 你跟 agent 对话，它挑引擎、挑模板、填进你的内容、渲染视频。引擎只是一个适配器接口背后的实现细节 —— 一份 render(input, ctx) 契约，任何后端满足它即可接入。加一个新引擎，所有模板、所有 agent、整条 studio 工作流就都自动用上了。不用学新的 DSL，换引擎也不用重写。

同一套思路也驱动着 Open Design 在设计领域的产品 —— 凌驾于众多工具之上的 agent meta-layer。html-video 是同一团队在动态视频这一面的对应物。

状态： 可插拔引擎架构已就位，Hyperframes 引擎已完整接通、能渲染出真实 MP4 —— 无头 Chromium 逐帧录制带动画的 HTML，再用 ffmpeg 编码（libx264）。Remotion、Motion Canvas / Revideo、Manim 在路线图上：适配器接口已为它们设计好，但适配器本身还没写。上表「在 html-video 中」这一列，是当下真正可运行内容的唯一权威来源。

---

速览

---

它如何工作

一句话（或一个链接）进去，一支真实 MP4 出来。不论你从一句 prompt、一篇文章还是一个仓库开始，管线都是同一条：

12345678910111213141516171819202122
  prompt / 链接 / 仓库        │        ▼  ① 来源抓取        studio 在服务端拉取 URL 或仓库，扁平成 Markdown        │        ▼  ② agent 循环      agent 读素材 + 所选模板的风格，产出一份        │           content-graph（故事板）+ 每帧一个 HTML 块        ▼  ③ content-graph   多帧中间表示 —— 节点（实体 / 数据 / 文本）+ 边（顺序 /        │           依赖 / 对比）；拓扑排序成帧序与时长        ▼  ④ 逐帧 HTML       每个节点变成一个自包含、带动画的 HTML 帧，落到磁盘        │        ▼  ⑤ Hyperframes 渲染 无头 Chromium 加载每一帧并录制（会自动延长时长        │            以覆盖该帧自身的动画）→ 每帧一个 webm        ▼  ⑥ ffmpeg          每个 webm → mp4（libx264），再 concat 成一支视频；        │            可选混入 MiniMax 的音乐 + 旁白        ▼      你的.mp4

第 ②–④ 步正是「meta-layer」所在：agent 决定故事板，引擎决定怎么画，两者互不渗透。第 ⑤ 步是引擎相关的 —— 以后换成 Remotion 或 Motion Canvas，只替换这一个环节，故事板和 agent 循环原封不动。全程在你本机运行；唯二的网络调用是可选的来源抓取和可选的配乐。

单帧视频走一条快速路径，跳过 content-graph —— 一个模板、一个 HTML，直接渲染。

---

把链接变成视频

这是大多数人最想要的用法：丢一个链接给 agent，拿回一支视频。agent 作为本地 CLI 运行、自身没有联网能力，所以 studio 在服务端抓取来源、把真实内容喂进生成 prompt —— 不用手动复制正文，像微信公众号这种无需登录的服务端渲染页面也直接能用。

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

• 网页文章 → 抓取并扁平成 Markdown。像微信公众号这种服务端渲染的页面开箱即用。
• GitHub 仓库 → 通过公开 API 拉取简介、顶层结构、README —— 很适合做「解读某开源项目」的视频。
• 只给一句话 → 描述主题，agent 从零写内容。

无论哪种来源，它都会成为视频真正依据的素材 —— 不是套模板时的摆设。agent 读取抓来的内容，自己决定需要几个场景，写出一份 content-graph 故事板：要点变成帧，要点之间的关系（这个承接那个、这个对比那个）变成边，再把所选模板的视觉风格逐帧应用上去。于是一篇 1500 字的文章变成一支有节奏的多场景解说，每一句都能追溯回原文的某处；一个仓库变成一段「这个项目到底是什么」的结构化讲解。

---

快速开始

前置依赖

默认渲染引擎用无头 Chromium 录制带动画的 HTML，再用 ffmpeg（libx264）编码为 MP4。如果没有系统安装的 Chromium，装 Playwright 内置的：

bash
1
npx playwright install chromium

安装 & 运行

bash
123
pnpm installpnpm -r buildnode packages/cli/dist/bin.js studio    # 在 http://127.0.0.1:3071 打开 studio

在 studio 里：挑一个模板（或直接描述视频 / 粘链接），跟 agent 对话，逐帧改文案，加配乐，导出 MP4。

CLI 工具：

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

---

支持的 Agent

在 PATH 上自动探测；在 studio 顶栏切换当前 agent。studio 默认把 Open Design (Vela) 排在最前 —— 一次登录、多种模型、成本更低 —— 然后回落到第一个可用的 agent，保证新项目永远有一个能用的后端。

什么都没装？配一个 Anthropic key，studio 直接走 Messages API。

---

配乐

给成片加上声音。在 Settings → Audio 填入 MiniMax API key，然后在每个项目的 Soundtrack 面板：

• 背景音乐 —— 描述一种情绪（舒缓的电影感氛围，缓慢推进），MiniMax 生成一段器乐。
• 旁白 —— 输入文案，MiniMax 朗读（TTS）。

两者都会通过 ffmpeg 混进导出的 MP4（音乐压低到人声之下，可选淡入淡出）。没配 key？studio 其余部分照常工作。

---

模板库

这 21 个模板不是随手凑的一堆 —— 每一个都是自包含、agent 可读的单元，由一份 template.html-video.yaml 清单描述，studio 启动时扫描加载。一份清单带齐了 agent 挑选和驱动这个模板所需的一切，根本不用打开 HTML：

• 它用来做什么 —— category、tags，外加一个 best_for 清单（如*「企业幻灯片」、「极简报告卡」*），search-templates 拿你的意图去匹配它。
• 它输出什么 —— 支持的分辨率、画幅比、fps、时长上下限、是否有 alpha 通道或音频。
• 要喂什么进去 —— 一份 inputs JSON schema，让 agent 精确知道要填哪些文本 / 数据槽位。
• 许可来源 —— 一个 SPDX 标识，外加明确的 attribution_required / redistribution_allowed / commercial_use 标志，以及一个指向上游来源 URL 的 assets_attribution 块。

最后这一点是刻意为之。每个模板都从构造上就许可清晰：fork 来的保留其原始许可，仓库根的 NOTICE.md 记下每个来源与 SPDX，没有清晰宽松许可的一律不收。所以你可以把其中任何一个放进商业作品里，无需再做审查。模板覆盖数据可视化（NYT 风格图表、Swiss / Vignelli 网格）、标题与特效（故障、动感排版、打字机光标）、主视觉与电影感（液态渐变、漏光、暖色颗粒）、产品宣传（15 秒 / 30 秒多场景）、解说骨架（决策树）—— 而且格式是开放的，社区模板用同样的方式接入。

---

架构

1234567891011
packages/├── core/                  Project / Asset / ContentGraph 类型、registry、orchestrator、│                          MiniMax provider + ffmpeg 音轨混合├── content-graph/         多帧故事板中间表示（节点 + 边，拓扑排序）│ runtime/               Agent 运行时 —— 探测 / spawn / 流式│                          （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` 命令 + studio HTTP server + 来源抓取└── project-studio/        浏览器 studio UI（对话、模板库、帧、配乐、导出）templates/                 21 个精选、许可清晰的视频模板research/                  RFC（引擎适配器 / 模板元数据 / agent skill / content-graph）

---

路线图

• 引擎适配器规范 —— 一个接口，N 个后端
• 模板元数据格式 —— 许可优先、agent 可读
• 多帧故事板工作流（content-graph）
• Studio：实时模板库、agent 切换器、逐帧改文案
• 来源素材：文章 / GitHub 仓库 → 视频
• AI 配乐（MiniMax 音乐 + 旁白），导出时混合
• 真实 MP4 渲染 —— Hyperframes 引擎经无头 Chromium + ffmpeg
• Agent 模型选择 —— Open Design (Vela) 后端，实时模型目录
• Remotion / Motion Canvas / Revideo 适配器
• Agent skill 包 + 模板市场

---

参考与渊源

许可

Apache-2.0

出品

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