讓 agent 用 HTML 直接做影片

030James Russo（HeyGen）15:132026-07-21 上架

HTML Is All Agents Need — James Russo, HeyGen

HeyGen 的 James Russo 說明為什麼賭 HTML 當影片的原生語言，怎麼用凍結時鐘逐格截圖做出 Hyperframes，以及上線後的使用數字。

這場講了什麼

• 做出來容易，推出去難：James Russo 認為 coding agent 讓任何人都做得出腦中想到的東西，但把產品或功能推到世人面前仍然很難，HeyGen 想補的就是這個缺口。
• 賭 HTML 是因為那是 LLM 的母語：HTML、CSS、JavaScript 占了模型訓練資料的大宗，硬要模型學自訂的 DSL 或 JSON 格式，得不到最好的輸出。
• 最薄的包裝贏了：團隊用 Gemini 3 Flash 當設計夥伴，試過加 context、加大 system prompt、加 skills，最後勝出的只是 HTML 加幾個放時間資訊的 data attribute。
• 渲染靠凍結時鐘：瀏覽器本來就是非同步載入，影片卻要每一格都完整，Hyperframes 凍結瀏覽器時鐘、逐格定位、等資源載入完再截圖，最後編碼成 MP4。
• skills 教品味，不教語法：模型已經會寫 HTML，skills 只負責教怎樣算好影片，讓單次 prompt 的底線拉高；要做到好還是得分鏡、逐格加動態，再用 studio 手動微調。
• 已有規模，但創意仍是弱項：開源使用者 90 天內渲染了超過 130 萬支影片。Russo 也坦言模型在創意工作上還不夠好，光改 skills 不夠，所以開始做 code to video 的 benchmark。

影片從哪一段開始看14 段

1. 00:36開場與自我介紹開場影片是 agent 用 HTML 一次做出來的，James Russo 自稱是 HeyGen Hyperframes 的共同創作者與 tech lead。
2. 00:51發表影片比開發還難現場舉手問誰覺得做發表影片比開發難；Russo 說開發已被民主化，上架仍然難，HeyGen 想補這個缺口。
3. 01:37好影片不只有 avatarHeyGen 從 AI avatar（A-roll）起家，但好影片還需要 B-roll、動畫、字幕與音樂，每一層都要做好。
4. 02:13賭 HTML 的理由HTML、CSS、JavaScript 是 LLM 的原生語言；逼模型講自訂 DSL，像要 Shakespeare 用日文或中文寫詩。
5. 03:00不是只有我們這樣想Russo 提到 Andrej Karpathy 等人近幾個月都在談 HTML 是新的 markdown，並說自己投這場演講早於那兩則推文；大家得到同一個結論：讓 LLM 講母語。
6. 03:45工具比較：品質與 agent 友善度After Effects、Premiere Pro 品質高但不 agent 友善；Lottie、Rive 用 JSON 或 XML 格式，不是模型母語，也較難控制；還有一套得先教模型語法的框架，壓低了創意。
7. 04:54轉折與最薄包裝去年 11 月 Gemini 3 等新模型出來後，模型自然往 HTML 靠；團隊用 Gemini 3 Flash 試了各種包裝，最後勝出的是只加幾個 data attribute 的 HTML。
8. 06:18Hyperframes 長什麼樣左邊是帶少量屬性的 HTML，右邊是渲染出的網頁；預覽與渲染都在瀏覽器完成，瀏覽器看到什麼，影片就是什麼。
9. 07:10確定性的 MP4 渲染瀏覽器為了網路條件刻意非同步，字型與素材會陸續出現；影片要每格都完整，所以凍結時鐘、逐格定位、等載入後截圖，也因此 WebGL、WebGPU、Lottie 都能進影片。
10. 09:33skills 教品味模型已經會 HTML，skills 不教語法，只教怎樣做出好影片；website to video skill 只要給網站，就能抓素材與品牌並產出影片。
11. 10:45好成品要靠手藝單次 prompt 做得出堪用的結果，要更好就得像做軟體：想敘事、逐格分鏡、逐格加動態，最後在 studio 手動拖拉微調，當天剛發表 keyframes 功能。
12. 12:37上線規模與開源90 天內開源使用者渲染超過 130 萬支影片，267,000 位創作者試用，每天約 15,000 支，32,000 GitHub stars；開源且永久免費，只要 agent 會寫 HTML 就能用。
13. 13:28創意仍是缺口與 benchmark模型在創意工作上還不夠好，HeyGen 花很多時間做評估，並開始做 code to video 的 benchmark，邀請 LLM 實驗室與做影片 agent 的人合作。
14. 14:16大會宣傳影片與結論大會的宣傳影片是與大會團隊合作、用 Hyperframes 做的；Russo 收尾說 agent 讓開發變容易，上架仍然難，HTML 就是 agent 做影片所需要的。

值得記的話5 句

• HTML, CSS, and JavaScript are the native languages of LLMs.HTML、CSS 和 JavaScript 是 LLM 的母語02:13

• But to our surprise, the thinnest wrapper ultimately won但出乎我們意料，最後勝出的是最薄的那層包裝05:44

• We freeze the clock in the browser and then we seek deterministically to every single moment in time or every single frame我們凍結瀏覽器的時鐘，再確定性地定位到每一個時間點、每一格畫面08:20

• Because the LLMs and agents already know how to write HTML and CSS and JavaScript, we don't have to teach them the language.LLM 和 agent 本來就會寫 HTML、CSS、JavaScript，所以我們不用教它們語言09:33

• honest thing that we're going to say here is that the models still aren't good at creative work我們要老實說，模型在創意工作上還不夠好13:28

名詞與人物8 個

Hyperframes

HeyGen 的開源框架，把 agent 寫的 HTML 轉成影片，名字來自逐格（frame）渲染

HeyGen

Russo 任職的公司，使命是用影片解決溝通，從 AI avatar 起家

A-roll / B-roll

A-roll 是影片主體，例如 avatar 旁白；B-roll 是圖片等輔助素材

Gemini 3 Flash

團隊拿來當設計夥伴的小模型，用來驗證小模型能不能寫出框架可用的程式

data attribute

加在 HTML 上、放時間等資訊的少量屬性，這套框架基本上只多了這個

website to video skill

Hyperframes 的 skill，給一個網站就抓素材與品牌，產出影片

DesignMD / FrameMD

該 skill 用來記錄設計、主題與品牌的格式，Russo 說他們用的是 FrameMD

studio

隨 Hyperframes 釋出的編輯器，用來手動拖拉微調，並支援 keyframes

提到但沒有展開

• 團隊做影片的一大來源，是在網路上找靈感、拿來當範例，改成自己要的樣子再放進影片；瀏覽器渲染得出來的東西都能這樣用。
• After Effects 就算接上了新的 connector，Russo 認為也比較像 copilot，幫你做本來就會做的事，給不出創意。

Agent開發工具開源

在 YouTube 看原片 ↗