HeyGen于4月下旬开源的HyperFrames视频生成框架，三周内在GitHub收获约14.3k Star、1.3k fork。它的核心主张只有一句：HTML是视频的源代码。这个看似激进的命题背后，是一套关于Skill标准化、确定性渲染和Agent内容生产的完整工程答案，也是Anthropic推动Skill范式以来，第一份达到工业级别的样本。
（这个视频是我用HyperFrames生成的，原视频是没有音乐的，音乐是后期添加）
HTML胜出的真实原因是训练语料分布
HeyGen团队的公开论述给出了选择HTML的理由：LLM训练数据里HTML/CSS/JS的体量远超React+Remotion这类视频DSL，模型几乎不需要学习成本就能写。这不是关于HTML格式本身有多优秀的判断，而是关于"LLM、开发者、浏览器"三方最大公约数的工程取舍。
HTML有三项属性恰好契合Agent时代：DOM是天然可序列化的结构，可被Git追踪、可被diff、可被另一个Agent改一行重新渲染；浏览器是已经存在的最强通用渲染器，免费白嫖SVG、Canvas、WebGL、Lottie、字体、视频解码全套基础设施；HTML+CSS+JS是LLM最熟悉的语言，写错概率最低。这三条加起来，让HTML在"可被Agent操作的可视化源代码"这个新位置上几乎没有竞品。
SKILL.md的工程化方法论
HyperFrames Skill本身是Anthropic Skill范式落地以来最完整的工业级样本，拆开看有六层设计可独立复用。
第一层是触发器设计。 每个Skill顶部的YAML frontmatter只有name和description两个字段，但这两个字段决定Claude何时加载该Skill。HyperFrames的description不是写功能介绍，是堆触发关键词矩阵——captions、subtitles、TTS、voiceover、audio-reactive、scene transitions、marker sweeps、shader transitions全部塞进去，覆盖所有可能的用户表达。这一层的逻辑是召回率优先，不让任何相关请求漏过。 第二层是分层惰性加载。 主SKILL.md只有347行/19.8KB，放最高频的核心规则。十几个references/*.md子文档（captions、tts、audio-reactive、css-patterns、motion-principles、typography、transitions、dynamic-techniques等）作为按需加载的延伸文档，主文件末尾用一句话描述每个reference的触发条件，让Agent自己决定何时拉取。这是典型的context节流——不读则已，读则精准。
第三层是Skill矩阵拆分。 不是一个大Skill，是9个以上独立Skill按职能拆分：/hyperframes负责合成authoring、/hyperframes-cli管命令、/hyperframes-media管素材预处理、/gsap、/lottie、/three、/animejs、/css-animations、/waapi按运行时拆分、/tailwind按init选项拆、/website-to-hyperframes是端到端workflow。每个Skill独立slash command触发，token成本被精细管控。
第四层是Gate前置设计。 把LLM在视频生成时容易犯的错前置成必须通过的Gate。Visual Identity Gate要求Agent写任何HTML前必须先解决视觉规范，明确禁用#333、#3b82f6、Roboto这类LLM惯用的fallback；Layout Before Animation要求先用静态CSS搭出"hero frame"再反推动画起点，避免边写边猜布局；scene-content必须width:100%加padding撑满，禁用position:absolute加top:Npx的写法，因为绝对定位在内容超长时会溢出。
第五层是Never do硬清单。 11条具体陷阱写成不可协商的禁令：忘记注册window.__timelines、用video当audio、嵌套video到timed div、用data-layer而非data-track-index、动画video元素本身、调用play/pause/seek、用repeat:-1、async构建timeline、对后续scene元素用gsap.set、用br强制换行。每一条都对应一个会导致渲染崩溃或不一致的实战翻车点。
第六层是自校验工具链。 Skill不止给规则，给可执行的检测工具。hyperframes lint做结构合规性、hyperframes validate跑headless视频在5个时间点截图采样像素做WCAG对比度审计、hyperframes inspect检测文本溢出和元素出画、animation-map.mjs解析GSAP timeline输出ASCII甘特图、stagger间隔检测、dead zones、collision/offscreen/invisible/paced-fast/paced-slow flags。Agent写完后跑工具自我闭环，不依赖人工QA。
这六层设计的真正价值在于它给Skill工程化树了标杆。社区里大量Skill还停留在"写一段prompt加几条规则"的水平，HyperFrames一次性把Skill推到了下一档。很多人fork它不是要做视频，是要扒架构。
确定性渲染是HTML成为源代码的前提
底层渲染管线是headless Chrome+FFmpeg的组合。Agent产出HTML后，渲染器启动无头浏览器加载页面，按frame = floor(time × fps)逐帧seek到指定时间点截图，最后把PNG序列喂给FFmpeg编码成MP4。10秒30fps的视频会被精确截成300张图——这不是"播放视频然后录屏"，是"逐帧seek + 截图"，所以同一份HTML跑10次得到的MP4像素完全一致。
这套确定性是HTML作为源代码的命脉。Skill里那些看似严苛的约束——禁Math.random和Date.now、必须用seeded PRNG、禁repeat:-1无限循环、禁async构建timeline——全部为保住"同输入同输出"。一旦确定性被打破，HTML源代码这个范式就塌了。Frame Adapter模式则让任何seekable runtime（GSAP、Lottie、CSS、Three.js、WAAPI、Anime.js）通过全局适配器注册表接入同一套seek接口，这是HTML白嫖整个Web生态的具体技术实现。
实际接入路径：从安装到产出MP4
HyperFrames的上手成本被压得很低。环境前置只需Node.js 22+和FFmpeg，macOS用brew install ffmpeg一条命令搞定，Windows和Debian/Ubuntu各有对应安装方式。验证用npx hyperframes doctor。
Claude Code用户的标准流程是三条命令：npx skills add heygen-com/hyperframes一次性安装全套Skill；codex用户就简单的多，在插件市场搜索HyperFrames by HeyGen，在对话框中@就可以使用；npx hyperframes init my-video --non-interactive --example blank创建项目骨架，这一步会自动把Skill装进项目，Agent从此知道项目规范；npx hyperframes preview启动Hyperframes Studio在http://localhost:3002，浏览器里以frame-accurate精度scrub时间轴，改index.html自动热重载。 Agent协作有两条路。Claude Code里直接调用slash command，/hyperframes加自然语言描述就能生成完整composition，例如"Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"。slash command前缀的作用是显式加载Skill上下文，避免首轮输出结构出错。Claude Design走另一条路，下载docs/guides/claude-design-hyperframes.md附件到对话，产出有效初稿，再交给Claude Code做动画打磨、节奏微调和QA。 迭代阶段把Agent当视频剪辑师对话即可："Make the title 2x bigger, swap to dark mode, and add a fade-out at the end"或"Add a lower third at 0:03 with my name and title"。这种自然语言迭代能力是HTML作为源代码的直接红利——改文字不重新生成视频，改HTML属性重跑渲染。
产出阶段先跑npx hyperframes lint和npx hyperframes validate两道检查，前者验证结构合规、后者跑WCAG对比度审计。新建合成或大幅改动后建议跑node skills/hyperframes/scripts/animation-map.mjs生成动画图谱JSON，扫一遍collision、offscreen、paced-fast这些flag。全部通过后npx hyperframes render输出MP4。
几个常见踩坑：git clone或npx skills add报"git-lfs filter-process: command not found"是Git LFS未装，brew install git-lfs && git lfs install后重试；写动画时Math.random不能用，要用mulberry32这类seeded PRNG，否则不同次渲染像素不一致；多场景视频不要给元素加opacity:0出场动画，转场本身就处理了出场，多余exit会造成黑帧。
实操心智模型一句话总结：你不是在用Agent生成视频，你是在用Agent写一个网页，然后让浏览器把这个网页录制成MP4。源文件是index.html，MP4只是一次渲染产物。
与Remotion的路线分歧揭示真实定位
Remotion是这个赛道的先行者，基于React+Webpack，强项是从spreadsheet批量产视频，适合已投入React技术栈的团队。HyperFrames走HTML+GSAP+浏览器的另一条路，强项是Agent协作和单条高质量产出。两者不是互相替代，是赛道分化。
HTML路线在以下场景有明确优势：程序化短视频、动态海报、营销内容批量化、数据可视化卡片、教学动画。这些场景需要的是Agent可以理解并修改，不是开发者用熟悉的React技术栈。对已有内容生产流水线的团队，从SEO文章流水线扩展到视频流水线的边际成本被压到接近零。
HTML是当下最优解，但不是终局
要把"HTML是Agent可写的可视化源代码"和"HTML是可视化表达的最终答案"两件事分开讨论。前者在当下成立，后者不成立。
HTML现在赢的是LLM接口这一仗，不是可视化表达这一仗。它处在"人类、LLM、浏览器"三方的最大公约数上，这个最大公约数是历史路径的产物，不是物理定律。把范围从LLM写视频扩大到所有可视化内容，HTML的短板立刻暴露：复杂3D和电影级特效属于USD、Blender Python API、Houdini的节点图；学术级数据可视化属于matplotlib、ggplot、D3的命令式描述，因为这些场景需要的是数学正确性而不是DOM可访问性；印刷级排版至今打不过LaTeX三十年的积累；矢量插画的源代码是Figma和Illustrator的私有结构，不是HTML。每个领域都有自己的源代码格式，这些格式存在的理由是它们对该领域的结构表达力远超HTML。 把HyperFrames抽象一层就会发现HTML不是关键，关键是两件事：源代码是文本可序列化的结构（能diff、能git、能让LLM读写）；渲染器是确定性的（同输入同输出，可被工程化）。满足这两条的格式都能用同样的范式被Agent化。Mermaid和Graphviz是图表领域的HyperFrames、Manim是数学动画的HyperFrames、TikZ和LaTeX是学术绘图的HyperFrames、OpenSCAD和CadQuery是3D建模的HyperFrames、Blender Python API是电影级3D的HyperFrames、USD是Pixar推动的3D场景标准。HTML只是通用消费级视频和网页这个最大单一市场的赢家。
往前看5年有几条路径会侵蚀HTML的地位。一是意图层取代代码层：LLM强到一定程度后，源代码这层抽象可能消失，Agent不再写HTML而是直接维护高维视频意图描述，由模型直接生成像素或潜空间表示，Seedance、Veo这条路一旦在可控性上突破，HTML这层中介就没必要存在；二是神经渲染器成为新的确定性渲染器：如果出现一种神经渲染器输入是结构化场景描述输出像素稳定可控，那源代码会变成场景图加风格条件，NeRF、Gaussian Splatting、3D Diffusion在往这个方向走；三是领域特定DSL联邦：HTML不会被一个东西取代，会被一堆DSL分食，Agent在不同任务间切换DSL，HTML缩回到它最擅长的带文本和媒体的2D排版本职。 具体到不同时间尺度的判断：未来1-2年HTML会继续吃下程序化短视频、动态海报、营销内容、数据dashboard、教学动画这些场景，HyperFrames类项目会越来越多，这个窗口里全力押HTML是对的；未来3-5年领域特定DSL会开始分化，3D、数学、印刷、电影各自有自己的Agent友好源代码格式，HTML退守2D通用领域；未来5-10年意图层或神经渲染器可能让源代码这个概念本身松动，届时讨论"什么是可视化的源代码"可能像今天讨论"什么是音乐的乐谱"——只对一部分场景有意义。
对内容团队的实操结论：当下全力押HTML范式没问题，HyperFrames、动态海报、数据可视化卡片、教学动画都用HTML出，因为这是ROI最高的窗口；但不要把心智锁死在"HTML等于可视化终点"上，要保留对其他DSL的关注，因为下一波红利不会再在HTML里。HyperFrames的Skill工程化方法论——分层reference加载、Gate前置、Never清单、自校验工具链——可独立复用到任何领域的Skill设计中，这部分参考价值高于HTML本身。
AI 速览
