别等视频生成模型了：Agent 写 HTML 就能出片——HyperFrames / paint-mv / OpenFilm 怎么玩

情报来源：逛逛GitHub 9 月盘点 + AI小展厅《一首歌自动变成手绘 MV》（2026-10-11）· 项目地址 HyperFrames / paint-mv-skills / OpenFilm · 用法对照各仓库 README 核对

一文看懂

先看痛点。 想让 Agent 帮你做视频，主流思路是“视频生成模型”——排队、烧额度、提示词一长串，结果还不可控：上一帧下一帧衔接全靠运气，字幕错一个字就要整段重跑。代码渲染视频是另一条路：让 Agent 写 HTML/JS 动画代码，浏览器（或引擎）渲染每一帧，ffmpeg 合成成片。画面是代码算出来的，确定、可改、几乎零成本——模型只负责写代码，不负责猜画面。

这条路最近集中出货了三套框架：HeyGen 的 HyperFrames（最成熟，21 个技能）、专攻手绘 MV 的 paint-mv-skills、以及“一个文件一个函数”的 OpenFilm。逐个说怎么玩。

HyperFrames：HeyGen 出品，产品介绍片一条龙

HyperFrames（heygen-com/hyperframes，Apache-2.0，Node 22+）是 HeyGen 开源的“HTML → 确定性 MP4”框架，定位最全：产品发布视频、幻灯片、动效图、构图移植都能做，还出了原生 Mac/Linux 桌面应用。

玩法核心是一个生产循环：计划视频 → 写有效 HTML → 接“可寻址动画”（seekable animations，任意时间点可定位）→ 加媒体 → lint 检查 → 预览 → 渲染。这些全部封装成 21 个 Agent 技能，/hyperframes 是路由器兼能力地图——你跟 Agent 说“做个 XX 视频”，它自动选工作流。

安装（Claude Code 插件）：

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

其他 Agent（Codex / Cursor / Gemini CLI / OpenCode）用 npx skills add heygen-com/hyperframes。然后直接提需求，比如：

用 /hyperframes 做一个 10 秒产品介绍：淡入标题、背景视频、轻背景音乐。

技能会教 Agent 完整走一遍生产循环，支持从网站 URL、brief 或脚本生成产品宣传片（30~90 秒是甜区）。

paint-mv-skills：一首歌，一支手绘水彩 MV

paint-mv-skills（lintsinghua/paint-mv-skills，MIT）输入输出最明确：一首歌的音频 + 歌词 → 一支手绘水彩风格动画 MV（MP4）。流程照搬 Claude 给《I'm Upping My P(doom)》画 MV 的 PDoomVideo 工程：每一帧都是“歌曲时间的纯函数”，由 p5.js + p5.brush 在 headless Chrome 里画出水彩与墨线，导演写分镜、并行子代理一章一章作画、联系表检查，最后 ffmpeg 和歌曲合成。画风固定，内容跟着歌词走——角色、场景、道具每首歌都从歌词重新设计。

四个技能分工：paint-mv（总控：建项目、测节拍、歌词转时间轴、派活、统稿、出片）、paint-mv-storyboard（从歌词写分镜，要求每句歌词一个镜头）、paint-mv-animate（画师规范：笔刷 API、角色设计、技法）、paint-mv-render（联系表检查、并行渲染、断点续渲、局部重渲、编码验收）。

安装：需要 Node ≥18、ffmpeg、Chrome、git、patch：

git clone https://github.com/lintsinghua/paint-mv-skills.git && cd paint-mv-skills
node skills/paint-mv/scripts/fetch_upstream.mjs   # 拉取原作源码

把 skills/ 四个目录放进 Agent 的技能目录（Cursor 用 .cursor/skills/，Claude Code 用 .claude/skills/），然后说：“用这首歌和歌词做一支 MV：song.mp3、lyrics.lrc”。

演示数据：仓库自带 86 秒中文说唱《凌晨录音室》完整案例（歌用 YuE2 生成），2079 帧、M 系 Mac 6 个 Worker 约 15 分钟渲染完，分镜、角色、章节源码全公开。注意许可边界：paint-mv 本身 MIT，但上游 PDoomVideo 没声明许可证——个人研究没问题，商用要分别确认授权。

OpenFilm：一个 HTML 文件、一个函数、一个编辑器

OpenFilm（openfilm/openfilm，MIT）最“极简哲学”：一个 HTML 文件（film.html）+ 一个时间函数 frame(t) + 一个本地浏览器编辑器（Studio）。核心契约是每帧用 frame(t) 画出任意时刻的画面——同一个 t 永远画同一张图（纯函数），所以可以乱序、并行、做运动模糊渲染。浏览器能画的它都能用：three.js、WebGL、canvas、SVG、CSS、GSAP，甚至视频素材。

命令只有 5 个：open（在 Studio 打开/预览）、look（自检——把每帧画两遍打乱顺序查不一致，还会报页面错误、字体失败、缺声音）、render（出 MP4，支持 --4k、运动模糊、透明通道）、get（接 ElevenLabs/OpenAI/fal 生成配音、音乐、图片）。纯画面零成本，只有配音/音乐才需要你自己的 key。

安装：npx skills add openfilm/openfilm，然后直接让 Agent“做一支 20 秒的 CLI 产品发布视频，带音乐”。Studio 编辑器里还能手动改任何元素（文字、位置、剪辑、字幕），改完 Agent 看得到、保留得住。要求 Node 22.2+、ffmpeg。

三条路怎么选

	HyperFrames	paint-mv-skills	OpenFilm
擅长	产品片/幻灯片/动效	歌曲手绘 MV	任意短片，最灵活
上手	插件/技能一键装	clone + 拉上游	npx 一键
特色	21 技能 + 原生 App	歌词驱动角色故事	时间函数 + Studio 编辑器
成本	本地渲染	本地渲染	本地渲染

信号强度

视频生成模型和代码渲染不是对手，是分层：模型负责“生成素材”（图片、视频片段、配音），代码负责“把素材编排成片”——后者确定性高、可反复改、不烧生成额度。对个人创作者，这条路的入场成本已经低到“一句话”：给 Agent 一个目标，它写代码、渲染、出片，你只负责审美。建议从 OpenFilm 试起（最轻），要产品宣传片直接上 HyperFrames，手绘 MV 就 paint-mv——三套都是本地渲染，唯一花你钱的只有 Agent 写代码的那点 token。

SIGNAL FILE · 情报档案

逛逛GitHub《盘点 20 个 9 月份 GitHub 上顶顶顶的开源项目》（2026-10-11）+ AI小展厅 paint-mv 介绍 + 三仓库 README 核对

本文基于 AI 情报库收录的条目展开深析；事实性信息以原始报道为准，分析与展望为编辑观点。

原始报道：https://github.com/heygen-com/hyperframes（GitHub）

查看原始报道 ↗返回首页