寫HTML就能出專業視頻！HeyGen開源HyperFrames，AI視頻製作門檻又被降低

最近AI內容創作工具又迎來一個新利器：HeyGen官方把HyperFrames完全開源了！這個項目號稱“Write HTML. Render video. Built for agents.”，就是讓AI代理（如Claude Code、OpenClaw）直接通過寫HTML+幾個data屬性，就能生成專業的MP4視頻，支持GSAP動畫、Lottie、Three.js等瀏覽器渲染能力。項目在GitHub已有1.4k+的stars，Apache 2.0協議，完全免費開源。HeyGen自己就用它讓Claude生成了產品發佈視頻（下面的demo），現在工具已經開放給所有人了。

今天就來聊聊這個項目。

一、HyperFrames到底是什麼？

簡單說，它是一個開源的HTML原生視頻渲染框架，專為AI代理設計。

• • 核心理念：傳統視頻編輯靠拖拽時間線、加特效；HyperFrames讓你用純HTML描述視頻（場景、時長、動畫、音軌），然後一鍵渲染成MP4。
• • AI友好：AI代理本來就擅長寫HTML，現在只需要學會幾個data屬性（data-start、data-duration、data-track-index等），就能“像視頻剪輯師一樣思考”。
• • 確定性渲染：同樣的HTML輸入，輸出永遠一致，所以適合用來做自動化流水線。
• • 技術棧：基於Puppeteer+FFmpeg渲染，支持瀏覽器原生能力（GSAP時間線、WebGL shader轉場、數據可視化等）。

它不是取代CapCut或Premiere，而是讓AI成為你的視頻剪輯助手，特別適合批量生成講解視頻、產品演示、社交短視頻、數據報告動畫等工作。

二、安裝和使用方法（詳細上手指南）

HyperFrames提供兩種玩法：AI代理模式（推薦） 和 手動CLI模式。

1. AI代理模式（最推薦，零基礎也能玩）

1. 1. 在終端運行一行命令，就能“教”AI技能：

   npx skills add heygen-com/hyperframes
   

   這會自動安裝HyperFrames專屬Skills（支持Claude Code、OpenClaw、Cursor、Gemini CLI等）。

2. 2. 重啓你的AI會話，Skills會註冊成斜槓命令：
• ◦ /hyperframes：寫視頻組合（HTML結構、字幕、TTS、轉場）
• ◦ /hyperframes-cli：運行CLI命令
• ◦ /gsap：動畫幫助
3. 3. 直接用自然語言Prompt描述視頻，AI就會生成完整HTML文件。

冷啓動示例Prompt（直接複製給Claude Code等Agent工具）：

Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music. 16:9 aspect ratio, modern tech style.

暖啓動示例（給AI真實素材）：

Summarize the attached PDF into a 45-second pitch video using /hyperframes. Turn this CSV into an animated bar chart race using /hyperframes.

迭代修改（像跟剪輯師聊天一樣的用法）：

Make the title 2x bigger, swap to dark mode, and add a fade-out at the end.

AI生成HTML後，你可以繼續用CLI預覽和渲染：

npx hyperframes preview     # 瀏覽器實時預覽（熱重載）
npx hyperframes render      # 渲染成MP4

2. 手動CLI模式（適用於想自己掌控的場景）

npx hyperframes init my-video   # 創建項目
cd my-video
npx hyperframes preview
npx hyperframes render

環境要求：Node.js ≥22 + FFmpeg（官網一鍵安裝即可）。

3. 現成組件庫（50+塊，懶人福音）

想加轉場、社交浮層、數據圖表？直接命令安裝：

npx hyperframes add flash-through-white     # 炫酷shader轉場
npx hyperframes add data-chart              # 動畫柱狀圖
npx hyperframes add instagram-follow        # 社交關注浮層

官方目錄：https://hyperframes.heygen.com/catalog/blocks/data-chart

三、體驗分析：優點、侷限與理性評價

優點（真正牛的地方）：

• • 門檻低：開發者/AI愛好者零學習成本，AI幫你寫代碼。
• • 靈活性高：完全用Web技術，動畫效果可媲美專業工具，支持音頻響應、字幕高亮、marker手繪強調等效果。
• • 本地渲染：保障隱私安全，不用上傳雲端；生成確定性強，適合批量自動化。
• • 可擴展性：模塊化設計（CLI、Core、Engine、Shader等），未來可集成更多AI工具鏈。

侷限：

• • 不是完全零代碼：雖然AI能幫寫，但複雜視頻仍需要迭代Prompt，Prompt功力直接影響質量。
• • 渲染依賴：複雜場景（高分辨率+多圖層）渲染時間較長，本地機器配置要夠。
• • 素材準備：背景視頻、音樂、圖片仍需自己準備（或結合其他AI生成）。
• • 初始階段：剛開源不久，社區生態還在成長，文檔和組件還在快速迭代。

總體評價：它是AI+視頻工作流的一次基礎設施升級。對普通用戶，它能把“想做視頻”變成“跟AI聊天做視頻”；對開發者，它打開了自動化視頻生成的新大門。理性來看，短期內它最適合做中短視頻、內部培訓片、產品Demo；長期可能成為AI內容工廠的一個核心引擎。

四、使用建議

1. 1. 入門路線：
• ◦ 先裝Skills + 試幾個冷啓動Prompt，感受AI生成速度。
• ◦ 用 /hyperframes 命令生成第一個10秒視頻，渲染看看效果。
• ◦ 邊做邊學Prompting Guide（https://hyperframes.heygen.com/guides/prompting ），裏面有很多運動形容詞、字幕語氣、轉場能量表等實用詞彙表。
2. 2. 進階玩法：
• ◦ 結合AI agent的上下文能力：上傳PDF、CSV、GitHub連結等素材，讓AI直接轉視頻。
• ◦ 音頻響應動畫：讓logo隨音樂節拍跳動，增加專業感。
• ◦ 批量生產：寫個簡單腳本，循環渲染不同文案的視頻，實現流水線生產。
3. 3. 未來展望：建議關注HeyGen官方動態，也許會和他們的AI Avatar進一步打通，實現“文本→腳本→HTML→真人視頻”全鏈路。

最後

視頻創作的門檻正在從“會剪輯”降低到“會描述”。

GitHub倉庫： https://github.com/heygen-com/hyperframes
官方文檔： https://hyperframes.heygen.com/

（本文基於HyperFrames官方GitHub、文檔及最新開源信息整理）