HeyGen HyperFrames 完整指南：用 HTML 寫影片，Agent 直接 render 成 MP4

影片是 AI agent 最後一個搞不定的媒體。Agent 會寫程式、會搜尋、會生成文字，但要它剪影片，你得教它 After Effects——那些工具根本不是為程式呼叫設計的。HeyGen 開源的 HyperFrames 把這個缺口補上：寫 HTML/CSS，agent 直接 render 成 MP4。

什麼是 HyperFrames

HyperFrames 是 HeyGen 開源的 agent-native 影片框架，一句話描述：你寫 HTML/CSS，它幫你輸出 MP4。GitHub repo 是 heygen-com/hyperframes，Apache 2.0 授權，發布初期就累積到 7.3K stars，倉庫裡附帶 50+ 現成元件，從社群平台覆蓋層、shader 轉場到資料視覺化都有，不必從零寫。

它的核心概念極度直觀：影片就是一組有時間軸的 HTML 文件。每一個畫面（frame）就是一份普通的 HTML，動畫是 CSS keyframes 或 GSAP timeline，排版是 HTML，時間軸是宣告式結構——最後交給框架的渲染引擎統一輸出成標準 MP4。沒有 timeline editor，沒有拖拉介面，沒有需要手動操作的 GUI。

最值得多想一秒的是：這個框架不是 demo，也不是概念驗證。HeyGen 自己的 launch video 就是用它搭配 Claude Code 做出來的。一家影片 AI 公司，在最需要精確控制和可重複性的場景，選擇用「寫程式碼」做影片，而不是用自家的影片生成 UI——這件事本身就是個立場，也代表這個框架在生產環境跑過了。

安裝只有一行指令：

npx skills add heygen-com/hyperframes

怎麼運作：HTML/CSS 寫，本地 render

HyperFrames 的邏輯是：Agent 已經很會寫 HTML，那就讓影片也用 HTML 來描述。HeyGen CEO Bin Liu 在 launch thread 講得很直接——「JSON 或 XML based 工具是為人類設計的，不是為 agent 設計的。」HTML 是 agent 的母語，CSS animation、GSAP timeline、Three.js 場景這些它都已經知道怎麼用，不需要再學一套新 DSL。

安裝完 skill 之後，告訴 agent 你要什麼影片，它就開始寫 composition，然後：

npx hyperframes preview   # 瀏覽器即時預覽，live reload
npx hyperframes render --output final_video.mp4   # 輸出 MP4/MOV/WebM

一個最小的 composition 長這樣——純 HTML 定義場景，CSS 控制動畫：

<!-- 定義一個場景：標題出現動畫 -->
<div class="frame" data-duration="2s">
  <h1 class="animate-in">HyperFrames</h1>
</div>

.animate-in {
  animation: fadeSlideUp 0.8s ease-out forwards;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

技術上，framework 用 Chrome 的 beginFrame API（搭配 Puppeteer）逐格截圖，再用 FFmpeg 編碼成影片。deterministic rendering 是關鍵特性：相同的 HTML input 永遠產出相同的影片，對自動化 pipeline 很重要——你不會 render 兩次得到不同結果。整條流程的結構如下：

架構上它不綁定單一動畫引擎，而是用 Frame Adapter 模式讓你帶入自己喜歡的 runtime：GSAP（精確到幀的時間軸）、Lottie（After Effects 匯出的 JSON 直接用）、CSS animations（最輕量、agent 最熟）、Three.js（3D 場景、shader 效果）。

整個流程完全在本地完成，不需要外部服務，不需要上傳素材。硬性需求是 Node.js ≥ 22 和 FFmpeg——兩者都得手動安裝設定環境。換句話說，這是開發者工具鏈的一個元件，而 Chrome headless 逐格截圖加 FFmpeg 編碼的工作量也意味著它吃本地機器的 CPU 和記憶體。如果你打算把 HTML→MP4 跑成日常 pipeline，一套穩定的桌面環境會省下不少等待時間；剛開始整理開發桌面的人可以參考蝦皮編輯選物的機械鍵盤、USB-C Hub 這類基本盤組合。

website-to-hyperframes：把任何網站變成 launch video

做 launch video 最耗時的不是剪接，是把設計稿裡的品牌語言搬進影片——顏色、字型、視覺風格要一致，還要配合腳本和時間點。HyperFrames 裡藏了一個 HeyGen 稱為「easter egg」的內建 skill 把這件事變成一個指令，不需要額外安裝，npx skills add heygen-com/hyperframes 裝好之後就有了。

使用方式很直接，Agent 看到 URL 加影片需求時也會自動觸發，不一定要手動打 slash command：

/website-to-hyperframes 幫我從 https://your-product.com 做一支 25 秒的 launch video，深色主題，電影感。

它背後是一條 7 步驟 pipeline，每一步的輸出會成為下一步的輸入：

Step 1 — Capture：用 Playwright 截圖網站各個 scroll 深度，同時提取所有設計 token——dominant colors（用 oklch/lab 轉換）、CSS font families、woff2 字型檔、SVG 圖示、Lottie 動畫、Web Animations API 資料，全部存進 captures/<name>/。

Step 2 — DESIGN.md：根據擷取的設計資料生成品牌參考文件，內含色彩系統、字型規範、視覺 do's and don'ts。後續所有步驟以這份文件為基準，確保影片風格跟網站一致——品牌視覺一致性的問題在這步就解決了。

Step 3 — SCRIPT.md：生成旁白腳本，結構固定為 hook → story → proof → call-to-action。

Step 4 — STORYBOARD.md：把腳本拆成 per-beat 的創意方向，每個 beat 包含情緒、使用素材、動畫類型、轉場方式。

Step 5 — VO + Timing：生成 narration.wav 和 transcript.json（含 word-level timestamp），把旁白時間點對應到每個 beat。

Step 6 — Build：根據 storyboard 生成 compositions/*.html，每個 beat 一個 HTML 檔，包含完整的 GSAP 動畫和 CSS。

Step 7 — Validate：截圖每個 composition 生成 snapshot PNG，供視覺驗證。

它的輸出（compositions/*.html）就是標準 HyperFrames composition，可以直接用 npx hyperframes preview 預覽、npx hyperframes render 輸出 MP4。做完之後要局部修改不需要重跑整個 pipeline，直接改 STORYBOARD.md 或對應 HTML，讓 agent rebuild 那個 beat 就好。

限制也要知道：Framer / Webflow 這類網站靠近底部的圖片可能因 lazy-load 被漏掉；有 Cloudflare WAF 或重度 client-side rendering 的網站，capture 步驟可能 timeout（預設 120000ms）需手動調高；超長頁面底部素材可能捕捉不全。這三個共同點都是 Playwright 瀏覽器自動化的邊界，跟 HyperFrames 本身無關。需要更精準的 asset 描述時，在 .env 加 Gemini API key 可以在 capture 那步多一層 AI 視覺分析。

進駐 Codex：一行指令安裝

2026 年 4 月底，HeyGen 宣布 HyperFrames 成為 OpenAI Codex 的官方外掛（plugin）。這代表 Codex 這個 AI 程式碼代理現在可以一鍵安裝影片渲染能力，在 coding 流程裡直接輸出 MP4。

Codex 外掛的安裝方式：

codex plugin marketplace add heygen-com/hyperframes \
  --sparse .codex-plugin \
  --sparse skills \
  --sparse assets

習慣用 Claude Code 的開發者仍然用同一行 skill 指令：

npx skills add heygen-com/hyperframes

這個指令會在 Claude Code 環境裡註冊三個 slash commands：/hyperframes、/hyperframes-cli、/gsap。安裝完成後，agent 就具備描述影片、生成 HTML 構圖、呼叫渲染引擎的完整能力鏈。

為什麼一個 AI coding agent 需要影片製作能力？答案和 Codex 的定位有關。HeyGen 用「end-to-end video workspace」描述這次整合——Code it, edit it, render it, ship it。從需求分析、腳本、HTML 構圖、動畫設定到最終渲染，Codex 可以在不切換工具、不離開 agent 環境的前提下全程完成。

但要說清楚：這次整合方向正確，「一鍵完成影片」距離現實還有一段距離。GSAP 動畫語法、Chrome headless 渲染的環境設定、FFmpeg 的版本相容性，每個環節都可能出問題。把它當成 early-stage 工具鏈的元件來評估，會比當成成熟產品更準確。

codex plugin marketplace add 和 Claude Code 的 npx skills add 是同一個邏輯的不同實作——工具的發布方式出現了新形態，不只是發布 npm 套件或提供 REST API，而是打包成 agent 可以一鍵安裝、直接呼叫的 plugin / skill。agent 工具生態系的組裝方式，正在這些指令裡被定義。

對 indie dev 的意義

影片是目前 indie dev 最難自動化的內容形式。寫文章、做圖、寫程式碼都已經有成熟的 AI 工作流，但影片一直需要人工介入：打開軟體、調時間軸、手動輸出。HyperFrames 把影片製作帶進了程式碼的世界，這意味著三件具體的事：

AI agent 可以從頭到尾獨立做一支影片。 你說「幫我做一支介紹新功能的 30 秒影片」，它規劃場景、寫 HTML、設計 CSS 動畫、執行渲染，交給你一個 MP4，全程不用打開任何影片軟體。

影片內容可以被版本控制。 HTML 和 CSS 是純文字，可以進 git、可以 code review、可以 diff。影片製作第一次變成可以用工程流程管理的工作。

可以用 data 驅動影片生成。 agent 把 API 資料、產品截圖、動態文字注入 HTML 模板，生成個人化或大量相似結構的影片——行銷素材、資料視覺化、自動化報告、產品示範，這類「結構固定、內容動態」的影片正是這個技術棧最先落地的地方。

至於跟 Remotion 的差異：Remotion 是 React-based，面向已熟悉 React 生態的前端工程師，社群很深，但商業授權要付費。HyperFrames 用 HTML 而非 React，HeyGen 自己的文件說得很白——「Remotion owns the human-developer space right now. But if you are building an AI-first product, HyperFrames is offering a shortcut that is getting very hard to ignore.」HTML 更接近 LLM 的訓練資料，agent 生成 HTML 比生成 React JSX 更穩定、錯誤更少。兩者目標使用者不同：Remotion 面向寫程式的人，HyperFrames 面向代替人寫程式的 agent。同期還有 Rendervid、Revideo 在做類似的事，這個空間在 2026 年明顯熱起來。

它的成熟度還不完整，HTML→MP4 的畫質和 After Effects 之間有距離，生成品質上限也取決於 agent 對 web 動畫的掌握程度。但重點不是畫質比拼，而是這條 pipeline 打通了一個之前完全封閉的自動化路徑。對習慣 Claude Code 或 Codex 的 indie dev 來說，值得花三十分鐘把它加進 agent 工作流，看看能替你做到哪一步。

利益揭露：本文部分連結為聯盟連結，點擊購買我會獲得回饋，不影響你的價格。

設計、文件、簡報都先後被程式碼接管了，影片是最後一個。當 agent 能寫 HTML 並直接 render 成 MP4，影片製作的門檻就從「會用剪輯軟體」變成「能描述你要的影片」——HyperFrames 是這條路上目前最直接的入口。

參考來源

• HeyGen HyperFrames 發布推文
• website-to-hyperframes 發布推文
• HyperFrames 進駐 Codex 發布推文
• heygen-com/hyperframes GitHub repo
• HyperFrames 官方 Prompting Guide