视频制作行业，正在经历一场静悄悄但实质性的变革。

抖音极速版赚钱快速提现方法☜☜☜☜☜点击保存

回想一下，以前要想拍出一支像样的产品宣传视频或者知识解说视频，得凑齐专业的剪辑师、动画师、配音员，搞不好还要花几万块找外包团队。就算是小团队自己上手，也得把AE、Pr这些复杂工具摸得门儿清，光学习成本就够让人头疼的。而这一切，还都建立在纯人工操作的基础上。

就在大家觉得这事儿也就这样了的时候，Open Design团队搞了个大动作。他们花了3天时间，写了3万行代码，一举改写了视频制作的玩法，而且——还是开源的。

现在，你只需要跟AI Agent聊两句，或者粘一个公众号文章链接过去，它就能直接给你生成一支动态的MP4视频。整个过程都在你自己的电脑上运行，没有云渲染费用，也不绑定任何厂商。

这个工具的名字叫html-video——一个真正把HTML变成视频的利器。

什么是html-video？

html-video是Open Design团队官方研发的开源项目，它的核心理念很直接：在你的电脑上，把HTML变成视频。

你不需要是专业的剪辑师，也不需要是动画专家。只需要三步：

1. 描述一个视频（或者直接粘贴一个文章链接/GitHub仓库）
2. 让AI Agent来接手处理
3. 导出真实的MP4视频

在这个过程中，Agent会自动帮你搞定：

• 选择合适的渲染引擎
• 挑选最匹配的视频模板
• 填入你的内容
• 渲染出高质量的视频

而且，这一切都在你的本地机器上完成，不用上传到任何云端，也没有单次渲染费用。

核心亮点：为什么html-video不一样？

1、基于Hyperframes框架

html-video不是从零开始的。它的默认渲染引擎是Hyperframes，这是一个成熟的HTML+CSS+GSAP框架，专门用于制作动态HTML动画。整个项目的架构思想，其实和Open Design在设计领域的产品是一脉相承的。

更关键的是，这个架构是可插拔的。现在默认用的是Hyperframes，未来Remotion、Motion Canvas、Manim这些引擎都会陆续接入。每增加一个新引擎，所有模板、所有Agent、整条工作流就都能同步用上，扩展性极强。

2、21套顶级HTML视频模板

html-video内置了21套经过精选、许可清晰的视频模板，每一套都经过了精心设计。

这些模板覆盖了多种常见的使用场景：

• 数据可视化：纽约时报风格的动态折线图、瑞士网格数据卡，适合“数据增长”类叙事
• 标题与特效：故障艺术标题、动感排版、打字机光标，很适合开场爆点
• 主视觉与电影感：极光液态渐变背景、漏光电影感画面、暖色颗粒杂志风
• 产品宣传：15秒/30秒的多场景产品宣传片
• 解说骨架：决策树解说、Takram有机动效

每个模板都有清晰的分类和标签，Agent可以根据你的意图自动匹配最合适的模板。而且，这些模板都可以在Open Design中找到，保证了设计系统的一致性。

3、分页预览、分页编辑、帧文字编辑

传统视频制作工具，你改一点东西就得重新渲染整个视频，等上半天才能看到效果。html-video彻底改变了这个工作流。它支持：

• 分页预览：每一帧都可以单独预览，不用等整个视频渲染完
• 分页编辑：每一帧都可以单独编辑，想改哪帧改哪帧
• 帧文字编辑：直接在界面上修改每帧的文案，所见即所得

同时支持多种视频尺寸：

• 横屏 16:9
• 竖屏 9:16
• 方形 1:1
• 小尺寸 4:5

你可以根据发布平台随时切换尺寸，完全不需要重新制作。

4、自动识别本地6种Code Agent

html-video最厉害的地方在于，它可以自动识别你电脑上已经安装的Coding Agent。目前支持14个主流的Agent：

• Open Design (Vela)
• Windsurf CLI
• Trae CLI
• Claude Code
• Cursor Agent
• Codex CLI
• Hermes
• Gemini CLI
• Grok Build
• Qwen Code
• OpenCode
• GitHub Copilot CLI
• Aider
• Anthropic Messages API

这些Agent会在系统的PATH上自动探测，你只需要在Studio的顶栏一键切换。即使没有本地Agent也没关系，你可以直接使用官方API接入，或者配置Anthropic API key，Studio直接走Messages API。

值得一提的是，Studio默认将Open Design (Vela)排在最前面——一次登录、多种模型、成本更低——然后回落到第一个可用的Agent，保证你永远有一个能用的后端。

5、已接入MiniMax

视频没有声音是不完整的。html-video已经接入了MiniMax，你可以一键给视频加上背景音乐和旁白。在Settings→Audio里填入MiniMax API key，然后在每个项目的Soundtrack面板：

• 背景音乐：描述一种情绪（比如“舒缓的电影感氛围，缓慢推进”），MiniMax会生成一段器乐
• 旁白：输入文案，MiniMax会朗读出来（TTS）

两者都会通过ffmpeg混进导出的MP4，音乐还会自动压低到人声之下，还支持可选的淡入淡出效果。

快速上手

在开始之前，你需要先安装几个依赖：

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

安装和运行都很简单：

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

然后在浏览器里打开http://127.0.0.1:3071，你就可以看到html-video的Studio界面了。

在Studio里，你可以：

1. 挑一个模板（或者直接描述视频/粘贴链接）
2. 跟Agent对话
3. 逐帧改文案
4. 加配乐
5. 导出MP4

就这么简单。

支持三种输入方式：

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

无论哪种来源，它都会成为视频真正依据的素材——不是套模板时的摆设。Agent会读取抓来的内容，自己决定需要几个场景，写出一份content-graph故事板：要点变成帧，要点之间的关系（这个承接那个、这个对比那个）变成边，再把所选模板的视觉风格逐帧应用上去。

CLI工具

除了图形化的Studio，html-video还提供了可脚本化的CLI工具：

node packages/cli/dist/bin.js doctor
# 探测已安装的Agent + 引擎

node packages/cli/dist/bin.js search-templates --intent "github stars race" --top 3

这对于想把html-video集成到自己CI/CD流程中的团队来说非常有用。你可以写个脚本，每天自动生成项目进度视频，或者自动把新发的博客文章转成视频。

写在最后

html-video给我们展示了一种全新的视频制作方式。它并不是要取代专业的剪辑师，而是要让每一个人都能轻松地制作出高质量的视频。而且，这一切的成本都极低——你只需要一台电脑，不需要任何专业设备，也不需要给任何云端服务付费。

Open Design团队用了3天时间写了3万行代码，带来了这样一个革命性的工具。这就是开源的力量——一群聪明人聚在一起，就能改变世界。

如果你对这个项目感兴趣，不妨去GitHub上看看，给它一个Star，或者直接上手试试。

GitHub地址：https://github.com/nexu-io/html-video