HeyGen HyperFrames 是什麼？Day 1～12 教學與 AI 影片工作流
整理 HeyGen「30 Days of HyperFrames」Day 1～12，從安裝、Figma、Prompt 到動態字幕，帶你看懂這套 AI 影片工作流。
HeyGen HyperFrames 是什麼？簡單來說，它是一套讓 Claude Code、Cursor、Codex 等 AI coding agent 使用 HTML 製作影片的開源框架。
HeyGen 最近也在 X 上展開「30 Days of HyperFrames」系列，每天用一篇短教學，示範如何把品牌設計、音樂、Avatar、Figma 與字幕放進同一套 AI 影片工作流。
這系列表面上在教 12 種影片技巧，真正想推廣的卻是另一種工作方式：影片不再只存在剪輯軟體的時間軸裡，而是被拆成 HTML、動畫、字幕、音效與品牌元件，交給 AI agent 修改、檢查和重複使用。
我的判斷是，HyperFrames 值得內容團隊持續關注，但它目前最適合「會重複製作同類影片，而且願意使用 coding agent」的使用者。如果只是偶爾做一支影片，或希望全程用滑鼠拖拉，傳統剪輯工具仍然比較直接。
本文整理 Day 1～Day 12 的內容，並分析這 12 天究竟在建立什麼樣的 AI 影片工作流。
HeyGen HyperFrames 是什麼？為什麼要做 30 天教學？
HyperFrames 是 HeyGen 團隊開源的影片製作框架。它讓 AI agent 使用 HTML、CSS 與 JavaScript 描述畫面、動畫和時間，再輸出成 MP4。簡單來說，就是把一支影片變成可以被 AI 讀取與修改的程式專案。
AI coding agent 是能讀取檔案、修改專案和執行指令的 AI 工具，例如 Claude Code、Cursor 與 Codex。一般聊天機器人只能告訴你「影片可以怎麼剪」，coding agent 則能實際修改影片專案、執行檢查，再產生成品。
根據 HyperFrames 官方文件，基本流程包含建立專案、在瀏覽器預覽、執行結構檢查，以及輸出 MP4。影片的原始內容仍保留在專案裡，所以同一個片頭、字幕或品牌動畫，不必每次重新做。
這也是 30 天系列的核心。HeyGen 不是一次丟出一份很長的技術文件，而是把學習路線拆成每天一個任務：先安裝，再建立品牌規則，接著逐步處理腳本、音樂、Avatar、Figma、Prompt 與字幕。
延伸閱讀：Claude 生態系解密：4 種應用一次看懂，從聊天介面到自動化工作流
30 Days of HyperFrames Day 1～12 教學重點
截至台灣時間 2026 年 7 月 18 日，HeyGen 已發布 Day 1～Day 12。前 12 天大致可分成三個階段：建立基礎、完成不同影片任務，以及提高控制與重用能力。
| 天數 | 主題 | 這一天真正要學的事 |
|---|---|---|
| Day 1 | 安裝 HyperFrames | 讓 coding agent 取得正確的影片製作流程 |
| Day 2 | 品牌 Motion Language | 把顏色、字型與動態規則存成可重用文件 |
| Day 3 | PR-to-Video | 把 GitHub 程式變更轉成視覺解說 |
| Day 4 | Music-to-Video | 讓剪接、動畫與音效跟著音樂節點走 |
| Day 5 | Faceless Explainer | 從題目、文章或筆記產生無真人解說影片 |
| Day 6 | Talking Head Recut | 產生 Avatar，並將圖卡同步到說話內容 |
| Day 7 | Motion Graphics | 把資料、Logo、數字與清單變成短動畫 |
| Day 8 | HeyGen CLI 音樂與音效 | 從終端機搜尋並加入音樂、SFX 素材 |
| Day 9 | Figma → HyperFrames | 把設計稿、品牌 token 和動畫匯入影片專案 |
| Day 10 | Prompt 結構 | 用六項資訊降低 agent 猜錯畫面的機率 |
| Day 11 | 重用舊影片場景 | 把以前做好的 composition 當成影片零件 |
| Day 12 | 動態字幕 | 使用現成字幕元件，或建立自己的品牌樣式 |
接下來逐一看每一天如何把這套工作流拼起來。
Day 1～2：先安裝工具，再讓 AI 理解品牌怎麼動
Day 1：把 HyperFrames 安裝到 coding agent
Day 1 的任務很單純：將 HyperFrames Skills 安裝到 Claude Code、Cursor、Codex 等工具。
Skill 可以理解成給 AI agent 的工作說明書。它不是替使用者生成一個按鈕，而是告訴 agent：影片專案要用什麼格式、時間軸如何表示、完成後要跑哪些檢查，以及如何輸出 MP4。
這一步看起來不像影片製作，卻決定後面能不能穩定重複。沒有規則時，AI 每次都可能用不同方式產生動畫；有了 Skill，才比較像沿用一套既定製作流程。
Day 2：用 DESIGN.md 和 FRAME.md 建立品牌動態
Day 2 開始處理 AI 影片最常見的問題：畫面看起來完整，卻沒有品牌辨識度。
HeyGen 的做法是準備兩份文件：
DESIGN.md：記錄顏色、字型、語氣等品牌設計規則。FRAME.md：在設計規則上加入影片節奏、進場方式、轉場與動態風格。
Motion Language 可以翻成「動態語言」，意思是品牌元素應該怎麼移動。技術品牌可能適合俐落切換，生活風格品牌則可能需要較柔和的節奏。把這些規則寫入 FRAME.md，後面的影片才能沿用，而不是每次靠 Prompt 重新形容。
真正值得注意的不是多了兩個 Markdown 檔案，而是品牌規範開始能被 AI 直接執行。對需要固定產出產品更新、短影音或社群影片的團隊，這比單次做出一支漂亮影片更有價值。
Day 3～5：把程式、音樂和一個題目變成影片
Day 3：將 GitHub Pull Request 變成解說影片
Day 3 示範 PR-to-Video。Pull Request，簡稱 PR，是開發者提交程式變更並請團隊審查的流程。
Agent 會讀取 PR 的標題、說明、程式差異、commit 與 reviewer，再決定影片長度和敘事方式。畫面不是把 GitHub 網頁錄下來，而是用真正的程式碼內容製作刪除、加入與重點標示動畫。
這個案例未必適合一般創作者，卻很能說明 HyperFrames 的定位：輸入不一定要是影片素材，也可以是一組結構化資料。當資料有明確來源和格式，agent 就能把它轉成固定版型的視覺內容。
Day 4：讓音樂成為影片時間軸
Day 4 的 Music-to-Video 會先分析 BPM、重拍、段落、能量變化與停止點，再讓畫面切換和音效落在音樂節點上。
BPM 是 Beats Per Minute，也就是每分鐘拍數，用來描述音樂速度。分析完成後，影片的切點不再只靠 agent 猜測，而是共用同一份 timing map，也就是時間節點資料。
對短影音來說，這比自動挑一首背景音樂更重要。音樂不只是墊在畫面底下，而是直接決定卡片何時出現、文字何時放大，以及結尾要停在哪一拍。
Day 5：沒有真人和素材，也能做 Faceless Explainer
Day 5 示範 Faceless Explainer。這是一種不出現真人，主要依靠旁白、文字動畫、圖表和示意圖解釋內容的影片。
使用者可以提供一個題目、文章或筆記，讓 agent 整理資料、寫腳本、產生旁白，再用 FRAME.md 製作圖卡、字幕和動畫。官方案例只額外提供品牌文件與音樂，其他敘事和畫面由 agent 完成。
這類工作流最適合結構穩定的知識內容，例如產品功能說明、每週產業整理或教學短片。但研究資料是否正確、腳本有沒有誤導，仍需要人工審核。影片製作可以自動化，不代表內容責任也能一起交出去。
Day 6～8：加入 Avatar、Motion Graphics、音樂與 SFX
Day 6：先生成 Avatar，再替說話內容加上圖卡
Day 6 把 HeyGen CLI 與 Talking-Head-Recut 串在一起。CLI 是 Command Line Interface，指的是透過終端機文字指令操作工具。
Agent 先從 HeyGen Avatar library 選擇主持人，產生 lip-sync 影片，再轉錄自己的成品，取得每個字的時間。當主持人說出模型名稱、數字或產品時，對應的圖卡就能在正確時間出現。
這一天的重點不是「AI 主持人」本身，而是 Avatar、腳本、逐字稿和 Motion Graphics 能接成同一個流程。對固定製作企業新聞、產品更新或內部簡報的團隊，這種串接可以減少來回搬運素材的時間。
不過，官方用來展示的新聞與數字只是案例內容，不代表使用者可以省略查證。若使用第三方人物、品牌、聲音或資料，也要另外確認授權與正確性。
Day 7：Motion Graphics 不一定要從特效名稱開始
Day 7 示範五種 Motion Graphics：趨勢圖、Logo 動畫、數字卡、資訊卡與系列片頭。
Motion Graphics 是以文字、圖形、數字與品牌元素為主的動態視覺。HeyGen 強調，使用者不一定要先知道 easing、mask 或 transition 等動畫術語，只要說清楚「想傳達什麼」，agent 就能選擇合適的呈現方式。
這個方向對非設計背景使用者比較友善，但不代表 Prompt 越短越好。資料來源、畫面比例、品牌限制與希望觀眾先看到的資訊，仍然要交代清楚。否則 agent 只是替你做出一個合理猜測，不一定是你要的結果。
Day 8：用 HeyGen CLI 搜尋音樂與音效
Day 8 介紹如何從終端機搜尋 HeyGen 的音樂與 SFX catalog。SFX 是 Sound Effects，也就是滑鼠點擊、鍵盤聲、whoosh 與 riser 等效果音。
根據 HeyGen CLI 官方 GitHub，這套工具可以讓 coding agent 或自動化流程透過文字指令操作 HeyGen。系列案例則進一步把找到的音效放進影片，在轉場、按鈕與畫面落點出現時同步播放。
這裡建立的是素材取得與剪輯之間的連接。Agent 不只告訴你「這裡適合加一個 click sound」，還能搜尋素材、下載、放入時間軸，再重新輸出版本。
Day 9～12：把設計、Prompt、舊場景和字幕變成可重用資產
Day 9：Figma 不再只是交付一張靜態設計圖
Day 9 將 Figma 與 HyperFrames 串接。依照 Figma Import 官方文件，HyperFrames 可以匯入 Figma 圖層、圖片、SVG、品牌變數與 storyboard，再保存到本機專案。
Storyboard 是用一組畫面描述影片順序的分鏡。Agent 不是把八張分鏡當成投影片輪播，而是判斷相同元素在不同畫面中的狀態，再重建點擊、移動、輸入和轉場。
這對設計團隊很關鍵。設計師原本放在 Figma 裡的顏色、字型、元件與動畫，不必在影片端全部重做。匯入後的素材也會保存在專案中，輸出影片時不需要持續連線到 Figma。
延伸閱讀：設計師的 AI 秘笈：Figma 結合 Claude Code 的雙向工作流
Day 10：一個影片 Prompt，其實包含六個決定
Day 10 將影片 Prompt 拆成六個部分：
- Route：要使用哪一種影片工作流。
- Spec：影片長度、尺寸與發布平台。
- Beats：每個時間段要發生什麼事。
- Copy：畫面必須出現的精確文字。
- Technique：希望使用的動態或視覺手法。
- Negatives：哪些內容不能出現。
這六項不是要使用者填一張複雜表單，而是提醒你把決策講完整。舉例來說，「做一個資料夾打開的動畫」只說了物件；如果補上六秒、正方形、游標從右下移入、第二秒按兩下、標籤固定顯示 Projects，而且不要旁白，agent 才知道要怎麼安排時間軸。
我認為 Day 10 是前 12 天最值得一般使用者先讀的一篇。工具會改版，安裝指令也可能變，但把需求拆成尺寸、節點、文案、技法與禁止事項，對任何 AI 影片工具都適用。HyperFrames Prompt Guide 也採用類似的逐步迭代方式，而不是要求第一次就把整支影片做完。
Day 11：舊影片不是成品，而是一座零件庫
Day 11 示範如何從以前的影片抽出一個場景，再換上新的品牌、文字與素材。
HeyGen 將部分產品發布影片的原始 HyperFrames 專案放在 hyperframes-launches GitHub。案例從 HeyGen × Stripe 影片取出文字輪播結構，再改成 Tesla 品牌與車款內容。
傳統剪輯常把輸出的 MP4 當成終點；HyperFrames 則把每個 composition 保留下來。Composition 可以理解成一個可獨立使用的影片場景，例如片頭、數字卡或產品輪播。下次需要類似畫面時，agent 可以讀取原始結構、替換品牌和資料，而不是從零開始。
這是整個系列最有商業價值的部分。真正降低成本的不是第一支影片少剪幾分鐘，而是第十支影片可以沿用前九支累積的元件。
Day 12：字幕也能成為品牌元件
Day 12 處理動態字幕。Agent 先取得逐字時間，再套用現成 caption component，讓文字依照說話時間逐字顯示、擦入或改變顏色。
Component 是可重複使用的畫面元件。HyperFrames 的字幕元件本質上仍是專案中的 HTML，因此使用者可以從 官方 Catalog 選擇現成樣式，也能用一句需求建立自己的字型、顏色、陰影與關鍵字規則。
當字幕被存成元件，下一支影片就不必重新調整每個字的樣式。對需要大量製作 Reels、Shorts 或產品影片的品牌，這比單次套用一個熱門字幕模板更容易維持一致。
這 12 天真正研究的是「可重用的影片工程」
把前 12 天放在一起看，HeyGen 並不是單純展示 12 種生成效果，而是在建立四層可重用能力：
| 層級 | 對應內容 | 可以重用什麼 |
|---|---|---|
| 製作規則 | Skills、Prompt 結構 | Agent 的工作流程與檢查方法 |
| 品牌規則 | DESIGN.md、FRAME.md | 顏色、字型、語氣與動態語言 |
| 影片元件 | Motion Graphics、字幕、舊場景 | 片頭、資訊卡、字幕與轉場 |
| 素材與資料 | Figma、PR、音樂、SFX、逐字稿 | 設計稿、程式變更、音訊與時間資訊 |
這套方法的價值會隨產量增加。只做一支影片時，建立文件、安裝工具和整理元件可能比較慢；但當團隊每週都要做同一類影片，前面的規則就能逐步攤薄成本。
反過來說，HyperFrames 並沒有消除所有人工工作。研究正確性、品牌取捨、人物肖像、素材授權、節奏判斷與成品 QA，仍然需要人負責。AI agent 可以執行清楚的規則，卻不應替團隊決定什麼內容值得發布。
HyperFrames 適合哪些人？
我會把適合對象分成三類：
適合：固定製作產品更新與社群影片的團隊
如果每週都要做功能發布、數據更新、教學短片或企業新聞，品牌文件、字幕元件和舊場景都能重複使用。影片越多，這套方法越容易看出維護價值。
適合：已經在用 Claude Code、Cursor 或 Codex 的創作者
熟悉 coding agent 的人，不必重新學一套完全陌生的 AI 工具。可以在原本的對話環境中管理素材、修改檔案和輸出不同版本。
暫時不適合：只想偶爾快速做一支影片的新手
HyperFrames 仍要處理 Node.js、FFmpeg、專案資料夾和終端機。即使不必從頭寫程式，也需要理解檔案、版本和指令。只做一次性影片時，CapCut、Canva 或 HeyGen 原本的圖形介面可能更快。
同樣地，長篇訪談、複雜調色、多機剪輯或精細音訊混音，目前仍是傳統 Non-linear Editing 軟體較擅長的範圍。Non-linear Editing，簡稱 NLE，就是 Premiere Pro、Final Cut Pro 這類能自由排列影片、音訊與效果的剪輯系統。
常見問題
HeyGen HyperFrames 和一般 AI 影片生成器有什麼不同？
不完全是。HyperFrames 是 HeyGen 開源的 HTML 影片框架，主要讓 AI coding agent 撰寫、修改、預覽與輸出影片專案。它可以搭配 HeyGen Avatar 與 CLI，但也能單獨使用自己的文字、圖片、影片和音訊素材。
不會寫程式可以使用 HyperFrames 嗎？
可以跟著 coding agent 和官方 Skill 操作，但仍要能理解資料夾、終端機與基本錯誤訊息。它的門檻比自己寫動畫程式低，卻不是完全不碰技術設定的無程式工具。
HyperFrames 怎麼安裝？
依照截至 2026 年 7 月 18 日的 HyperFrames 官方 GitHub，互動安裝可在終端機執行 npx skills add heygen-com/hyperframes --full-depth，並選擇 Core Skills。若是 coding agent 或非互動流程，官方建議使用 npx hyperframes skills update；在本機建立、預覽與輸出影片仍需要 Node.js 22 以上與 FFmpeg。
HyperFrames 是免費的嗎？
HyperFrames 核心框架採用 Apache 2.0 開源授權，可以下載並在本機使用。不過，若工作流另外呼叫 HeyGen Avatar、API、雲端服務或付費素材，仍可能依所使用的服務產生費用。
HyperFrames 可以取代 CapCut 或 Premiere Pro 嗎？
目前不適合全面取代。固定版型、字幕、Motion Graphics、產品影片與大量重複內容，是 HyperFrames 比較有優勢的場景；長片重組、細緻調色、音訊混音和臨場剪輯，傳統工具仍然更有效率。
30 Days of HyperFrames 後面還會更新嗎？
HeyGen 將這個系列規劃為 30 天，每天發布一個 micro-lesson。本文整理的是台灣時間 2026 年 7 月 18 日以前發布的 Day 1～Day 12，後續主題仍以 HeyGen 官方 X 帳號為準。
這 12 天最值得先看哪幾篇？
一般內容創作者可先看 Day 2、Day 5、Day 10 和 Day 11，分別對應品牌規則、無臉解說、Prompt 結構與場景重用。已經在做 AI 影片工作流的人，再看 Figma、Avatar、字幕與音效整合會比較有效率。
結語：HyperFrames 的重點不是少剪一支片，而是累積下一支片
30 Days of HyperFrames 前 12 天，從安裝一路談到字幕，看似分散，其實都指向同一件事：把影片製作中的知識留下來。
品牌顏色留在 DESIGN.md，動態規則留在 FRAME.md，節奏留在 timing map，設計留在 Figma，場景和字幕則留在 composition 與 component。下一支影片不必再從空白時間軸開始，agent 可以讀取這些規則後繼續製作。
我對 HyperFrames 的評價是中性偏正面。它不是所有人的 CapCut 替代品，也不是輸入一句話就能永遠得到好影片的魔法工具；但對固定產出、重視品牌一致性，而且已經把 coding agent 放進工作流程的團隊，它提供了一條比單次生成更容易維護的路。
接下來真正值得觀察的，不是 Day 30 能不能展示更華麗的效果，而是這些 Skill、元件與專案，在不同團隊、不同品牌和大量產出時，能否保持穩定、容易修改，而且不需要工程師反覆救火。
