跳至主要内容

09｜寫 HTML 產影片（HyperFrames）

🎯 一句話：Write HTML. Render video. Built for agents.——HeyGen 開源的影片框架，附 19 個 Skill 教 Agent 走完「規劃 → 寫 HTML → 接動畫 → 加素材 → lint → 預覽 → render」這條產線。

heygen-com/hyperframes README

README 頂端就是完整的產品面貌：npm 版本、月下載量、Apache 2.0、Node 版本需求、Discord，以及那句標語。這是本站收藏裡少數由公司維護、Skill 只是其中一層的專案。

作者背景​

HeyGen 是做 AI 影片生成（數位分身、多語配音）的公司。HyperFrames 是他們開源出來的渲染核心：把 HTML、CSS、媒體與可 seek 的動畫轉成確定性（deterministic）的 MP4。

這個定位值得注意——它不是「AI 幫你生影片」，而是把影片變成前端工程問題。影片內容用 HTML/CSS 寫，因此可版控、可 diff、可讓 Agent 直接編輯；渲染則交給確定性的 pipeline，同樣的輸入永遠得到同樣的輸出。Skill 的角色是教 Agent 怎麼正確地寫這種 HTML。

19 個 Skill 的三層結構​

/hyperframes（router，先讀這個）
    ├── 創作流程 ×10  ← 依「你要做什麼片」分流
    └── 領域技能 ×8   ← 按需載入的原子能力

router 先行是這套設計的關鍵：/hyperframes 是能力地圖與意圖層，任何「幫我做一支⋯⋯」的請求都先進它，由它確認 brief 並按需安裝對應的創作流程，而不是一次把 19 個全灌進 context。

創作流程（10 個，依輸入類型分）​

Skill什麼時候用
/product-launch-video有網站的產品宣傳／發表／導覽（給 URL、brief 或腳本），約 3 分鐘內，甜蜜點 30–90 秒
/faceless-explainer從純文字解釋一個主題，沒有產品也沒有網站，所有視覺由 LLM 自行構思
/pr-to-video一個 GitHub PR（URL 或 owner/repo#N）→ changelog／功能揭露／修復說明，透過 gh CLI 讀取
/embedded-captions替既有的講話頭影片加字幕，不動原始畫面
/talking-head-recut替訪談／podcast 影片加設計過的圖層：下三分之一、數據標註、動態標題、引言卡、側欄、子母畫面
/motion-graphics10 秒內、無旁白的設計向動態圖：動態文字、數據命中、logo sting、動畫推文。可輸出透明疊層
/music-to-video一首音樂→ 跟拍點同步的影片（歌詞、幻燈、動態宣傳），節奏由音樂決定
/slideshow簡報／pitch deck：分頁、片段揭露、分支、熱點導覽、講者模式。輸出是可導覽的 deck，不是影片
/general-video其他一切：多場景、品牌 sizzle reel、標題卡、靜態循環。也是 companion mode 的所在
/remotion-to-hyperframes把既有 Remotion（React） 作品移植成 HyperFrames HTML，單向遷移

領域技能（8 個，按需載入）​

Skill內容
/hyperframes-core組合契約：data-* 時間屬性、class="clip"、track、子組合、變數、框架託管的媒體播放、確定性規則
/hyperframes-animation動畫知識總集：原子動效規則、場景藍圖、轉場、各 runtime 轉接（GSAP／Lottie／Three.js／Anime.js／CSS／WAAPI／TypeGPU）
/hyperframes-keyframesseek-safe 的關鍵影格撰寫：GSAP timeline、CSS keyframes、FLIP、路徑、遮罩、SVG morph／draw、3D 景深，附 hyperframes keyframes 診斷
/hyperframes-creative非動畫的創意方向：frame.md／design.md、色票、字體、旁白、節拍規劃、音訊反應視覺
/media-use媒體 OS：把任何素材需求（BGM、音效、圖、icon、logo、配音、調色 LUT）解析成凍結的本地檔＋帳本紀錄；素材庫沒有時用 TTS／音樂／影像模型生成，並可跨專案重用
/hyperframes-cliCLI 迴圈：init、lint、check、snapshot、preview、render、publish、doctor，以及雲端與 AWS Lambda 渲染
/hyperframes-registry用 hyperframes add 安裝與接線 registry 上的 block／component，也講怎麼寫新的貢獻回上游
/figma匯入 Figma 素材、token、component 與 storyboard——把 frame 讀成狀態而不是投影片，重建成動態

README 裡的創作流程對照表

這張表就是 router 的分流依據。注意它的分類軸不是「影片長度」或「風格」，而是你手上有什麼輸入：網站 URL、純文字、PR、既有影片、音樂檔、還是什麼都沒有。

frame.md：把 design system 翻譯給鏡頭​

這是 HyperFrames 提出的一個獨立概念，值得單獨看：

每個品牌都有 design.md，但沒有一份是為鏡頭寫的。frame.md 是缺少的翻譯層——同樣的 token、同樣的規則，但改寫成 Agent 能拿去組影片、不必猜尺度、也不會伸手去抓網頁專用元素的形式。

它的產物是 DESIGN.md 的超集，整條工具鏈都讀得懂。原則是「原子不可動，組合自由，數字來自腳本」。官方另外提供了一整排現成的 design template（Biennale Yellow、BlockFrame、Cartesian…）可以直接挑。

安裝的坑（README 花了不少篇幅講）​

npx skills add heygen-com/hyperframes --full-depth
  • 選單預設不勾任何項目，只裝 Core Skills 群組就夠——router 會在需要時自行安裝各創作流程
  • Agent 或非互動情境請改用 npx hyperframes skills update，它只裝核心集；非互動的 skills add 不帶 --skill 會把 19 個全裝
  • --full-depth 一定要加：不加的話抓的是 skills.sh registry 的快照，會落後 main 數小時，拿到舊版 skill

手動用 CLI 也行：npx hyperframes init my-video → preview（瀏覽器即時重載）→ render（出 MP4）。另有 bun run package:codex-plugin 打包成 Codex plugin 上傳用的 zip，超過 100 MB 會直接失敗。

值得學的三件事​

  1. router + 按需安裝。19 個 Skill 不是攤平給模型挑，而是一個能力地圖負責分流、用到才裝。這是 Skill 數量變多之後的必經解法——對照 Matt Pocock 的 ask-matt 與 Wondel.ai 的 12 條 journey，三者都在解同一個問題。
  2. 用既有的工程材料換掉專有格式。影片改用 HTML/CSS 表達，等於一次拿回版控、diff、code review 與 Agent 可編輯性——而不是發明一套只有自家工具讀得懂的檔案。
  3. 把「確定性」寫進契約。/hyperframes-core 明列 determinism rules、/hyperframes-keyframes 強調 seek-safe：影片要能任意跳轉到某一影格都畫得出來，這種約束若不寫進 Skill，模型寫出來的動畫十之八九只有從頭播才正確。