专栏 · Agent 工程手艺 › 第 104 期 · AGENT 工程 · 收录于 2026 年 8 月 16 日
HTML 就是 agent 需要的全部——James Russo(HeyGen) JR
James Russo · AI Engineer
1.1万 观看
302 赞
2.7% 点赞率
9 评论
62.7万 频道订阅
数据截至 8 月 27 日
▶ 双人对谈 · 本期速读电台 00:00 / 18:49
1× TL;DR · 三句话
一 HTML、CSS、JavaScript 是 LLM 的「母语」——它们的训练数据里绝大多数就是网页，所以与其教 agent 一门新的 DSL 或你自造的 JSON 结构，不如让它用母语说话，HeyGen 把整个视频生成栈押在了这一点上。→ 详细 二 最反直觉的工程结论是「最薄的封装赢了」：往 system prompt 里塞 context、加 skill、包各种 wrapper，全都输给了「纯 HTML + 几个 data 属性做元数据」。→ 详细 三 这不是 demo：开源框架 hyperframes 在过去 90 天被开源用户渲染出超过 130 万支视频，26.7 万创作者试过，GitHub 3.2 万 star，任何会写 HTML 的 coding agent 都能直接用。→ 详细 01
开场：做产品已经很容易，把它发出去依然很难
开场视频本身就是「证物」——完全由一个 agent 一次性（single shot，一轮 prompt 跑完不返工）生成，全程用 HTML。讲者 James Russo 是 HeyGen 的 hyperframes 项目共同创造者兼技术负责人。→ 详细
他现场举手调查：有多少人觉得，有了 coding agent 之后，写发布文案、做发布视频反而比把产品做出来还难？有一些手举了起来。coding agent 已把「建造」民主化，但「发布」还是硬骨头。→ 详细
HeyGen 的使命是「用视频解决沟通问题」，起点是做出市面上最好的 AI 数字人（avatar，替你出镜说话的虚拟人）。→ 详细
02
一支好视频是分层组合，不是只有一张会说话的脸
数字人只是 A-roll（主镜头素材，即旁白者、角色、片子主体）；好视频还得有 B-roll（穿插的图片等媒体素材）、动画、字幕、音乐。→ 详细
每一层都做到位，才算给 agent 一块合适的「画布」。问题于是变成：怎么让 agent 一口气生成并组合所有这些层次？赌注是 HTML。→ 详细
03
核心论点：别逼模型讲外语，HTML 就是它的母语
全场的地基句：「HTML、CSS 和 JavaScript 是 LLM 的母语。」道理很朴素——训练数据里绝大部分是被抓取的网页，而每个网页说到底底层就是这三样。你不是在教它新技能，只是在用它已经泡了几万亿 token 的语言跟它说话。→ 详细
反过来，当你想教模型一门新的 DSL（Domain-Specific Language，领域专用语言，为某个特定场景自造的一套小语法），甚至只是你自己定的一套 JSON 结构，你其实是在逼它讲外语。他的比喻是：「这就像让莎士比亚用日语或中文写诗。」——词能拼对，韵味全无。→ 详细
关键在于这个损耗不是靠给示例能补回来的 ：「哪怕你给它一堆示例、教它一大堆东西，你也拿不到它最好的输出，因为那不是它的母语。」few-shot 示例能提升格式合规率，但补不回创造力的天花板。→ 详细
观点并非孤例：过去几个月 Tarik 和 Andrej Karpathy 都在讲「HTML 是新的 markdown」——对 LLM 而言这是极好的输出格式，因为它天然自带可视化呈现。Russo 特意声明，他的演讲提案提交于这两条推文之前，「你要是好奇，我待会儿可以拿证据给你看」，几拨人独立收敛到了同一结论。→ 详细
04
一年多的选型弯路：把候选方案放在「质量 × agent 友好」两轴上
他们做了一年多、试过一大堆方案，评估框架就两个维度：产出质量，以及对 agent 是否友好。→ 详细
After Effects、Premiere Pro 是创意工作者的黄金标准，质量高但对 agent 完全不友好；即便接了连接器也只是「副驾驶」，帮你顺手做你本来就会的事，给不了创意产出。→ 详细
Lottie 和 Rive 本质是用 JSON 或自定义 XML 编码的动效格式，产出不错，但不是 agent 的母语，可编辑性和可控性也不够——「可控性这一层对我们来说是件大事」。→ 详细
Remotion（用代码写视频的框架）折腾得比较深，他认为它很好地展示了 LLM 用代码能做到什么程度；但代价是得教框架、教语言、给一堆写法示例，「这最终把创造力消磨掉了很多」。→ 详细
转折点在去年十一月：Gemini 3 等新模型带来阶跃式提升——只要把想要的效果做成示例给它看，模型自然就往 HTML、CSS、JavaScript 上靠。于是定调：「别跟模型对着干，而是想办法让它用母语来表达。」→ 详细
05
减法式上下文工程：最薄的那层封装赢了
他们的验证方法本身就很值得抄：先拿一个很小的模型 Gemini 3 Flash 当「设计伙伴」 。逻辑是「如果连小模型都能在一个框架里写出能跑的代码，那大模型和这些 coding agent 就百分之百也能做到」——用最弱的模型当压力测试，把格式设计的难度上限压出来。→ 详细
然后是全场最反直觉的一段：他们在 HTML/CSS/JS 外面套了各种不同的封装层去试，「往里塞大量 context，把 system prompt 越写越长，还加了 skill」。结果——「但让我们意外的是，最后胜出的是最薄的那层封装」，说到底就是纯 HTML，再加几个 data 属性当元数据（data 属性就是 HTML 标签上自定义的小标签，形如 data-start），用来让 agent 和自己都知道时间轴之类的信息。→ 详细
普适版本是：上下文工程不总是「加法」。当你在写越来越长的 system prompt 去教模型一套自造规范时，很可能是格式选错了——抽象层每厚一分，模型的先验知识就被挡掉一分。→ 详细
还有一层时间上的复利：「如果这个更小的模型都能搞定，那随着模型越来越强，效果只会继续变好」，而且随着新训练数据进来，模型对它的理解只会越来越自然。选一个顺着模型演进方向的格式，等于让未来每一代模型免费给你升级——就是在这一刻，他们确认格式选对了。→ 详细
06
hyperframes：HTML 进，视频出
一支 hyperframe 视频长这样：左边是带几个属性的 HTML，右边是渲染出的网页。预览和渲染全在浏览器里完成——「浏览器看到的是哪些像素，你的视频最终看到的就是哪些像素」，没有第二套渲染管线。→ 详细
由此得到 hyperframes：一个把 agent 写的 HTML 变成视频的开源框架。只要是你的 agent 会写的网页，现在都能写进视频里。→ 详细
07
真正的难题在渲染：把天生异步的浏览器「冻」成确定性 MP4
语言问题解决后，下一个坎是把网页变成确定性 （deterministic，同样输入必然产生同样输出）的 MP4。这难得多，因为「浏览器天生就是异步的」——它的需求跟视频渲染完全不同，得在各种网络环境和约束下都能工作。→ 详细
冲突具体长这样：浏览器接受字体异步加载，所以随页面加载，文字字体和样式会变；图片、视频等素材也一样，一开始看不见，过会儿才出现。这在网页上叫渐进增强，在视频里就叫穿帮。视频要的是「页面上的所有东西百分之百的时间都在那儿」。→ 详细 、→ 详细
解法是冻住时钟、逐帧跳转 ：视频本质就是一连串静态帧串起来形成动态；他们把这个洞察搬到浏览器上——冻住浏览器时钟，确定性地跳到每一帧，等页面全部加载完、确认就绪，截一张图，再跳下一帧，反复直到拿齐所有帧编码成视频。→ 详细 、→ 详细
收益是「在浏览器里预览的那份输入，和渲染进视频里的是同一份」，预览与成片不会各说各话，这正是 hyperframes 名字的由来。这套「把不确定的运行时冻成可枚举状态再逐个采样」的思路，可迁移到任何要把异步系统产出变成可复现产物的场景。→ 详细
08
浏览器能渲染的，视频里就都能有
这套架构的威力在于白嫖整个 Web 生态：three.js（浏览器 3D 库）、图表、SVG、shader（着色器，GPU 上跑的画面特效小程序）、WebGL、WebGPU、Lottie——凡是浏览器能渲染的，hyperframes 就都能渲染进视频。→ 详细
团队做视频的常规动作也因此变了：上网找灵感，把网页效果当例子改一改，直接塞进视频。→ 详细
09
Skill 只教品味，不教语法
框架和渲染之外，第二个决定输出质量的部件是配套 skill，而它有个明确的分工原则：只写审美和视频门道，不写语法 。原话是「因为 LLM 和 agent 本来就会写 HTML、CSS 和 JavaScript，我们不用教它们语言，只需要教它们怎么做出好视频」。→ 详细
他直接点出与同行的差别：「你去看某些框架的 skill，内容其实基本就是：在这个框架里东西该怎么写。」——那些 token 全花在补语法上。自检标准由此而来：如果你的 skill 大半篇幅在教语法，说明抽象层选错了，而不是 skill 写得不够。→ 详细
skill 是被持续维护的资产：「很重要的一环，是持续做 eval（评测，给一批标准任务打分看效果有没有变好），并且用 agent 来不断改进这些 skill」。目标是抬高下限 ——确保一次性 prompt 的基础产出就已经相当不错。不是追求上限惊艳，而是让最差情况可接受。→ 详细
现场演示的是 website-to-video skill 的一次性调用：只给一个网址，skill 告诉 agent 怎么访问网站、抓回需要的所有素材和信息，用 DesignMD（他们叫 FrameMD）还原设计、配色主题和品牌调性，再配上教给 LLM 的基础动效示例，就能跑出不错的成片。→ 详细 、→ 详细
10
人始终在环里：把「一次生成」拆回可控的工序
他坦白划了条线：「这跟 AI 写代码很像——你随手给一个 prompt，也能拿到还过得去的结果；但想从 agent 那里拿到出色的产出，就需要功力、需要品味，跟 AI 编程出现之前，任何一个软件工程师所需要的那套原则是一样的。」办法还是老话：把问题拆成小块，迭代着往前推。→ 详细 、→ 详细
他们对重度用户的承诺是「完全掌控」，标准是：「在有 Hyperframes 之前我们怎么做视频，用上 Hyperframes 之后还是怎么做。」——工具接管的是执行，不是流程本身。→ 详细
真实工序是五步：想清叙事、愿景和使命 → 逐帧做分镜、想清每帧承担什么 → 用 HTML/CSS/JS 逐帧加动效 → 合并成连贯的视频 → 在随框架发布的 studio 里做「最后一公里」精修。关键设计是 human in the loop（人在环里）：你平时在剪辑软件里的手动拖拽、微调，在这个开源编辑器里一样能做。→ 详细
演讲当天刚发布 keyframes（关键帧）：动效设计师能在 studio 里一个关键帧一个关键帧地编排所有动效，目标是让「专业动效设计师在 After Effects 里能做的事，在这里也都能做」。要害在于它把「agent 生成」和「人手精修」接在同一份 HTML 上，而不是让人在两套互不相通的工具间倒腾。→ 详细
11
规模数字：它已经在生产环境里跑了
「所以这不只是个 demo。」Hyperframes 几个月前发布，过去 90 天开源用户一共渲染了超过 130 万支视频 。→ 详细
其余数字：26.7 万名创作者 试过；每天约 1.5 万支视频 用这个开源框架渲染；GitHub 3.2 万 star 。开源、永久免费，任何人现在就能上手。→ 详细
兼容性上没有绑定：Claude Code、Codex、Cursor 以及屏幕上列的其他一堆，「甚至包括我自己都还不知道的那些」都能配合。判据只有一条：「只要你的 agent 会写 HTML、CSS 和 JavaScript，它就会做 Hyperframes 视频。」——这就是选母语格式带来的零集成成本。→ 详细
12
诚实的短板，以及一个 code-to-video benchmark
愿景一句话：「那个帮你做产品的 agent，同时也能帮你做产品的发布视频。」但他紧接着说了句实话：「模型在创意类的活儿上还是不够好」——他们花了大量时间做 eval，想在 skill 里把这块推得更远。→ 详细
他认为这需要更高一层的改变，所以团队开始做一个 code-to-video benchmark （代码转视频的公开评测基准），想拉上各家 LLM 实验室和所有做视频 agent 的创作者，一起把行业下限抬上去。感兴趣的可以会后找他，或找现场任何一位穿 Hyperframes T 恤的同事。→ 详细
13
闪电问答 / 收尾
彩蛋 ：AI Engineer World's Fair 的官方宣传展示视频，就是 HeyGen 与大会团队深度合作、用 Hyperframes 做出来的——留给现场观众的小惊喜，也是「它到底能做到什么程度」的实证。→ 详细 收尾三句 ：那支片子证明了用 HTML、CSS、JavaScript 能做出什么水准的动态图形；agent 已让「做产品」无比容易，但「把产品发出去」依然相当难；答案是——要做出好视频、把产品推向世界，你的 agent 需要的就只有 HTML。→ 详细
14
联系方式
开源仓库 ：Hyperframes 项目（演讲末页给出链接），欢迎去看、点 star、把 skills 下下来用。→ 详细 X ：@Reems_Juso —— James Russo 本人；他表示会后就在场外，想聊随时找他。→ 详细