寫HTML就能出專業視頻！HeyGen開源HyperFrames，AI視頻製作門檻又被降低
整理版優先睇
HeyGen開源HyperFrames，一個讓AI透過寫HTML直接生成專業MP4視頻嘅框架，大幅降低視頻創作門檻
呢篇文章係基於HeyGen官方GitHub同文檔整理，介紹HyperFrames呢個開源項目。作者想解決嘅問題係傳統視頻剪輯門檻高，而AI代理擅長寫HTML，所以HyperFrames讓AI透過HTML加data屬性直接生成視頻。整體結論係呢個框架係AI視頻工作流嘅基礎設施，令視頻創作從「會剪輯」變成「會描述」。
HyperFrames係一個開源HTML原生視頻渲染框架，專為AI代理設計。佢嘅核心理念係用HTML描述視頻嘅場景、時長、動畫同音軌，然後用Puppeteer加FFmpeg渲染成MP4。相比傳統剪輯軟件，佢門檻極低，靈活性高，支援GSAP、Lottie、Three.js等瀏覽器渲染能力，而且本地渲染保障私隱，適合批量自動化。
不過呢個工具唔係完全零代碼，複雜視頻仍然需要迭代Prompt；渲染時間取決於複雜度；素材需要自行準備；而且社區生態仲係初期。總體嚟講，HyperFrames最適合做中短視頻、產品Demo同內部培訓片，長遠有望成為AI內容工廠嘅核心引擎。
- HyperFrames係一個開源HTML原生視頻渲染框架，專為AI代理設計，核心係用HTML描述視頻場景、動畫同音軌，然後渲染成MP4。
- 提供AI代理模式（推薦）同手動CLI模式，AI代理模式只需要安裝Skills，然後用自然語言Prompt即可生成視頻HTML，再渲染。
- 相比傳統剪輯軟件，HyperFrames門檻極低，靈活性高（支援GSAP、Lottie、Three.js等），本地渲染保障私隱，適合批量自動化。
- 但唔係完全零代碼，複雜視頻仍需迭代Prompt；渲染時間取決於複雜度；素材需自行準備；社區生態仲係初期。
- 建議入門路線：先裝Skills試冷啓動Prompt，再逐步學習Prompting Guide；進階可以結合AI agent上下文進行批量生產，未來有望同AI Avatar打通。
GitHub倉庫
HyperFrames原始碼，Apache 2.0開源授權
官方文檔
包含安裝指南、API參考、組件庫等
Prompting Guide
提供運動形容詞、字幕語氣、轉場能量表等實用詞彙表
內容片段
npx hyperframes add flash-through-white # 炫酷shader轉場npx hyperframes add data-chart # 動畫柱狀圖npx hyperframes add instagram-follow # 社交關注浮層HyperFrames係咩？
HyperFrames係一個開源嘅HTML原生視頻渲染框架，專為AI代理設計。佢嘅核心理念係：傳統視頻編輯要靠拖拽時間線、加特效，而HyperFrames就俾你用純HTML描述視頻嘅場景、時長、動畫同音軌，然後一鍵渲染成MP4。
用純HTML描述視頻嘅場景、時長、動畫同音軌
佢嘅技術棧係基於Puppeteer加FFmpeg，支援瀏覽器原生能力，例如GSAP時間線、WebGL shader轉場、數據可視化等。
HyperFrames唔係要取代CapCut或者Premiere，而係想令AI成為你嘅視頻剪輯助手，特別適合批量生成講解視頻、產品演示、社交短視頻同數據報告動畫。
令AI成為你嘅視頻剪輯助手
快速上手：安裝同使用方法
HyperFrames提供兩種玩法：AI代理模式（推薦）同手動CLI模式。
AI代理模式最簡單，只需要喺終端運行一行命令：npx skills add heygen-com/hyperframes，就會自動安裝專屬Skills。
之後重啟AI會話，Skills會註冊成斜槓命令，包括 /hyperframes、/hyperframes-cli 同 /gsap。直接用自然語言Prompt描述視頻，AI就會生成完整HTML文件。
Skills會註冊成斜槓命令
- 1 冷啓動示例：直接俾Prompt「/hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music」，AI即刻生成HTML。
- 2 暖啓動示例：俾AI真實素材，例如「Summarize the attached PDF into a 45-second pitch video using /hyperframes」。
- 3 迭代修改：可以同AI傾偈咁講「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。環境要求Node.js ≥22同FFmpeg。
另外仲有現成組件庫，超過50塊組件，可以透過命令安裝，例如 npx hyperframes add flash-through-white 加shader轉場。
如果鍾意自己掌控，可以用手動CLI模式：npx hyperframes init my-video，然後編輯HTML再渲染。
手動CLI模式
優點、侷限同理性評價
HyperFrames有幾個真正令人驚喜嘅優點。
門檻極低：開發者同AI愛好者零學習成本，AI幫你寫代碼。
靈活性高：完全用Web技術，動畫效果可以媲美專業工具，支援音頻響應、字幕高亮、marker手繪強調等效果。本地渲染保障私隱安全，生成確定性強，適合批量自動化。
生成確定性強
可擴展性好：模塊化設計（CLI、Core、Engine、Shader等），未來可以集成更多AI工具鏈。
不過都要留意佢嘅侷限。
- 唔係完全零代碼：複雜視頻仍然需要迭代Prompt，Prompt功力直接影響質量。
- 渲染依賴本地機器：高分辨率加多圖層場景渲染時間較長，電腦配置要夠。
- 素材需要自己準備：背景視頻、音樂、圖片要另外揾（或者結合其他AI生成）。
- 初期階段：啱啱開源冇耐，社區生態仲喺成長中，文檔同組件仲喺快速迭代。
使用建議同未來展望
入門路線好簡單：先裝Skills，試幾個冷啓動Prompt，感受AI生成速度。然後用 /hyperframes 命令生成第一個10秒視頻，渲染睇嚇效果。邊做邊學Prompting Guide，裏面有好多運動形容詞、字幕語氣、轉場能量表等實用詞彙表。
邊做邊學Prompting Guide
進階玩法可以結合AI agent嘅上下文能力：上傳PDF、CSV、GitHub連結等素材，讓AI直接轉視頻。
進階玩法可以結合AI agent嘅上下文能力
仲可以做到音頻響應動畫，令logo隨音樂節拍跳動，增加專業感。如果想批量生產，寫個簡單腳本循環渲染唔同文案嘅視頻，實現流水線生產。
音樂節拍跳動
未來值得關注HeyGen官方動態，話唔埋會同佢哋嘅AI Avatar進一步打通，實現「文本→腳本→HTML→真人視頻」全鏈路。
同AI Avatar進一步打通
總括嚟講，視頻創作嘅門檻正從「會剪輯」降低到「會描述」，呢個轉變值得所有內容創作者留意。
從「會剪輯」降低到「會描述」
最近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. 喺終端運行一行命令，就可以“教”AI技能： npx skills add heygen-com/hyperframes咁樣會自動安裝HyperFrames專屬Skills（支援Claude Code、OpenClaw、Cursor、Gemini CLI等）。
2. 重啟你嘅AI會話，Skills會註冊成斜槓命令： ◦ /hyperframes：寫影片組合（HTML結構、字幕、TTS、轉場）◦ /hyperframes-cli：運行CLI命令◦ /gsap：動畫幫手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. 入門路線： ◦ 先裝Skills 加上試幾個冷啟動Prompt，感受嚇AI生成速度。 ◦ 用 /hyperframes命令生成第一個10秒影片，渲染睇嚇效果。◦ 邊做邊學Prompting Guide（https://hyperframes.heygen.com/guides/prompting ），裏面有好多運動形容詞、字幕語氣、轉場能量表等實用詞彙表。 2. 進階玩法： ◦ 結合AI agent嘅上下文能力：上傳PDF、CSV、GitHub連結等素材，等AI直接轉影片。 ◦ 音頻響應動畫：令logo跟住音樂節拍跳動，增加專業感。 ◦ 批量生產：寫個簡單腳本，循環渲染唔同文案嘅影片，實現流水線生產。 3. 未來展望：建議留意HeyGen官方動態，可能未來會同佢哋嘅AI Avatar進一步打通，實現“文字→劇本→HTML→真人影片”全鏈路。
最後
影片創作嘅門檻正在從“要識剪輯”降低到“要識描述”。
GitHub倉庫： https://github.com/heygen-com/hyperframes
官方文檔： https://hyperframes.heygen.com/
（本文係根據HyperFrames官方GitHub、文檔同最新開源資訊整理）
最近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. 在終端運行一行命令，就能“教”AI技能： npx skills add heygen-com/hyperframes這會自動安裝HyperFrames專屬Skills（支持Claude Code、OpenClaw、Cursor、Gemini CLI等）。
2. 重啓你的AI會話，Skills會註冊成斜槓命令： ◦ /hyperframes：寫視頻組合（HTML結構、字幕、TTS、轉場）◦ /hyperframes-cli：運行CLI命令◦ /gsap：動畫幫助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. 入門路線： ◦ 先裝Skills + 試幾個冷啓動Prompt，感受AI生成速度。 ◦ 用 /hyperframes命令生成第一個10秒視頻，渲染看看效果。◦ 邊做邊學Prompting Guide（https://hyperframes.heygen.com/guides/prompting ），裏面有很多運動形容詞、字幕語氣、轉場能量表等實用詞彙表。 2. 進階玩法： ◦ 結合AI agent的上下文能力：上傳PDF、CSV、GitHub連結等素材，讓AI直接轉視頻。 ◦ 音頻響應動畫：讓logo隨音樂節拍跳動，增加專業感。 ◦ 批量生產：寫個簡單腳本，循環渲染不同文案的視頻，實現流水線生產。 3. 未來展望：建議關注HeyGen官方動態，也許會和他們的AI Avatar進一步打通，實現“文本→腳本→HTML→真人視頻”全鏈路。
最後
視頻創作的門檻正在從“會剪輯”降低到“會描述”。
GitHub倉庫： https://github.com/heygen-com/hyperframes
官方文檔： https://hyperframes.heygen.com/
（本文基於HyperFrames官方GitHub、文檔及最新開源信息整理）