html-video

视频生产的新范式：给 AI 编程工具装备视频生成能力

一个 AI 编程助手能帮你写代码、读文档、跑测试——但如果你的老板让你把这份数据报告做成视频呢？大多数 Agent 只能干瞪眼：没有 FFmpeg 集成、没有动画模板、没有多帧编排能力。html-video 正是为解决这个痛点而生——它让任何本地运行的 AI 编程工具（Claude Code、Cursor、Codex、Copilot 等 14 种后端）只需一个指令，就能把 HTML + CSS + 数据自动渲染成真实 MP4 文件，整个过程在你自己电脑上完成，无需云服务，无需付费。

图1：html-video 将 HTML/CSS/数据转化为真实 MP4 的核心工作流

背景故事：从做工具到做视频工具

这个项目诞生于 Open Design 团队（nexu-io）的内部需求。团队在用 AI 编程工具处理大量设计文档和数据报告时发现：许多任务最终需要可视化输出——一份市场分析需要配上图表动画，一篇技术文章需要一个品牌开场。这些工作在 Figma/After Effects 里做很费时，但传统编程工具完全帮不上忙。

团队创始人 Joey 在 2026 年 5 月调研时发现，Hyperframes（当时已有 21K★）已经开源了 HTML 到视频的核心能力，但它是单一引擎、单一范式。Joey 敏锐地捕捉到一个差异化机会：不是做一个 Hyperframes 的替代品，而是做一个多引擎元编排层——让 AI Agent 可以在 Hyperframes、Remotion、Motion Canvas、Revideo 等多个渲染引擎之间智能选择，用户只需描述需求，工具自动选引擎、出模板、合片输出。

这个定位在 2026 年 5 月 26 日正式拍板，html-video 项目由此启动。

核心功能：AI Agent 的视频工作站

多引擎 Pluggable 架构

html-video 不是一个视频渲染器，而是一个元编排层（Meta-aggregator）。项目设计了标准化的 Adapter 接口，理论上可以接入任意视频渲染引擎。Hyperframes 是基座引擎，Remotion 被定位为主动按帧挂的动效增强插件——用户可以指定某一帧用 Remotion 数据动画来增强，而不是全程跑 Remotion。这种分层设计让 AI Agent 能够精细控制每一帧的渲染方式。

支持的渲染引擎包括：Hyperframes（HTML + GSAP + Puppeteer，基座引擎生态成熟）、Remotion（React TSX 数据动画，支持 spring 动画和数字滚动）、Motion Canvas（TypeScript 生成器，代码驱动动画）、Revideo（全栈视频编辑，功能最全）。

21 个精选模板：拿来即用

项目内置了 21 个经过策划的模板，覆盖数据可视化图表、标题开场、Logo 结尾、背景动效、VFX 特效等多种场景。模板以单个 HTML 文件存在（Hyperframes 模式下）或 TypeScript React 组件（Remotion 模式下），AI Agent 可以直接读取模板源码，理解动画结构，然后通过自然语言指令让 AI 填入真实内容。

图2：frame-data-chart-nyt 模板——纽约时报风格的数据图表动画，AI 自动填入数据

图3：frame-glitch-title 模板——故障艺术风格的开场标题

多帧 Content Graph：复杂视频的编排系统

对于超过一个镜头的视频，html-video 提供了 ContentGraph 图编排系统。每个视频由多个 Frame（帧/镜头）组成，Frame 之间可以声明依赖关系（dependency）、顺序关系（sequence）或对比关系（contrast）。系统自动做拓扑排序，确保渲染顺序正确，最终用 FFmpeg concat 合成一条完整 MP4。

关键发现：在混流场景下（不同引擎的片段拼接），必须使用 concat FILTER（而非 concat demuxer），因为不同引擎输出的 timebase/PTS 不兼容，concat demuxer 会错误累加时间戳导致片长失控。正解是每段独立 -i 输入，然后用 -filter_complex 重建时间轴。

AI 音乐与配音

项目支持在视频生成时自动添加 AI 音乐（通过 Suno 等平台）和自动配音 narration，标签化配置，无需手动干预。

技术架构：Monorepo 插件化设计

项目采用 pnpm workspaces 的 Monorepo 结构，代码组织清晰：packages/ 下包含 adapter-hyperframes（Hyperframes 引擎适配器）、adapter-remotion（Remotion 引擎适配器）、cli（命令行工具）、content-graph（ContentGraph 数据结构和拓扑排序）、core（核心编排逻辑，orchestrator、exportMp4）、project-studio（Studio Web UI 后端）、runtime（运行时环境）、studio-next（Next.js Web UI 前端），templates/ 下包含 21 个 HTML/Remotion 模板，每个模板配有 AI Agent 使用的 SKILL.md 文档。

核心技术栈：TypeScript（主语言）、Node.js >= 20、pnpm 9.x 包管理、Remotion v4（React 18 + Webpack bundler）、Puppeteer（Hyperframes 模式）、Next.js（Studio Web UI）。

上手体验：两种使用模式

CLI 快速上手（推荐）

安装只需 pnpm install，然后 pnpm --filter @html-video/cli smoke 做本地渲染测试，pnpm --filter @html-video/cli export --help 查看导出 MP4 的命令。CLI 模式适合 AI Agent 直接调用——Agent 读取模板、理解结构、注入内容、调用 CLI 导出，全程无需人工干预。文档明确列出了支持的 14 种 AI 后端，包括 Claude Code、Cursor、Codex、Gemini、Grok、Qwen 等主流工具。

Studio Web UI（图形化）

启动 pnpm --filter @html-video/studio-next dev，可打开本地 Web UI，支持上传文章链接或 GitHub 仓库 URL、可视化切分镜头（frames-strip）、查看 ContentGraph 拓扑结构、预览每帧渲染效果。

注意：FFmpeg 是必需依赖，缺少时 CLI 会报友好错误提示；项目无 Docker 支持，但 pnpm + TypeScript 的标准 Node.js 工作流对开发者非常友好。

局限性：不回避的问题

1. 无 Docker 一键部署：项目依赖本机 FFmpeg + Node.js 环境，多机器协作场景下需要手动配置环境。
2. Hyperframes Adapter 仍为 Stub：虽然定位为基座引擎，但 adapter-hyperframes 仍处于 stub 阶段，真实 render 尚未完全打通。
3. Remotion 模板 bundle 依赖本机环境：原生 Remotion 模板的 webpack bundling 依赖本机 node_modules，templates 目录下无法独立运行，需要在 workspace 根执行。
4. 模板生态尚在起步：21 个模板数量有限，高质量模板的持续产出依赖社区贡献。

行业意义：AI 编程工具的最后一块拼图

html-video 的出现填补了 AI 编程工具在内容可视化输出上的空白。在它之前，AI Agent 能生成文本、代码、图片，但在生成视频这个维度完全无力。html-video 通过多引擎抽象层避免了绑定单一渲染技术栈、通过模板生态系统降低了 AI 生成视频的门槛（不需要懂动画）、通过 Monorepo 插件架构让新的渲染引擎和模板可以低成本接入。

这三个设计选择，使得它不仅仅是一个工具，而是 AI 视频生成领域的一个基础设施项目。随着 AI Agent 在编程领域的渗透率越来越高，让 AI 也能做视频的需求会持续增长，html-video 的多引擎抽象在这个趋势中占据了有利位置。

项目由 Open Design 团队（nexu-io）开发维护，采用 Apache-2.0 开源许可证，无商业限制，无按次收费。