HeyGen 把 Hyperframes 塞進了 Claude Design，打造了一套全新工作流

上星期有個做品牌嘅朋友同我講，佢哋團隊而家出一條30秒嘅產品影片，快嘅話要三日，如果遇上改稿多嘅時候，成個星期都搞唔掂，啲重要嘢全部俾佢哋耽誤曬。

我同佢講，而家出一條影片嘅速度可能變成一個下晝就得，佢有啲半信半疑。

因為令呢件事變成可能嘅兩個嘢，幾乎係同一時間發生嘅，而且擺埋一齊睇先感受到佢哋嘅分量。

4月17日，HeyGen 宣佈將旗下嘅 Hyperframes 框架徹底開源，代碼託管喺 GitHub，任何人都可以免費使用同二次開發。

就喺同一日，Anthropic 正式發佈咗 Claude Design 呢個產品。

兩件事分開睇其實只係行業入面嘅常規新聞，就算其中一個係 Claude。

但就喺昨日 HeyGen 宣佈 Hyperframes 已經原生集成到 Claude Design 裏面，徹底將兩者連接成一條完整嘅工作流。

今日我哋就簡單講下當呢條工作流串通之後，佢能帶嚟啲乜嘢價值，尤其係對做設計、做產品、做市場嘅人。

先講 Claude Design

佢係 Anthropic 專門為視覺創作場景設計嘅產品，用嘅係 Claude Opus 4.7 最新嘅視覺理解能力，可以讀取截圖、品牌手冊、Figma 檔案，甚至代碼倉庫，然後根據你描述嘅內容直接生成視覺資產。

當然，開發者都可以用佢，但佢嘅價值我認為對設計師、產品經理同市場營銷人員嚟講更直接。

因為佢真正降低嘅係「我個腦入面有嘢、有畫面，但我做唔出嚟」嘅呢個門檻。

要知道當 Anthropic 發佈佢嘅時候，Figma 嘅股價當日跌咗7%，說明市場認為呢個唔係一個玩具級嘅產品，而係一個可以真正影響現有工作方式嘅嘢。

但 Claude Design 本身有一個限制：佢生成嘅係靜態或者交互原型，冇辦法直接輸出影片檔案。

呢個就係 HeyGen 將 Hyperframes 塞入嚟嘅意義所在！

Hyperframes 係乜嘢

Hyperframes 啱啱出嘅時候，我就寫過一篇文章《Hyperframes：一款本地化、口噴式影片製作神器（附詳細教學）》，可能好多人冇太在意，因為之前就有一款用代碼製作影片嘅神器存在咗，叫「Remotion」，佢需要你識啲 React 代碼嘅實現。

呢兩款產品在理念同思路上係一致嘅，都係用代碼實現影片嘅創作，亦都希望進一步降低製作影片嘅門檻，但兩者在技術實現上仲有差別。

Hyperframes 係 HeyGen 開源嘅一個影片渲染框架，佢做嘅嘢用一句話簡單講就係：將 HTML 渲染成 MP4。你寫 HTML，佢幫你出影片。

而呢次 HeyGen 為 Claude Design 專門製作咗一個技能檔案，檔案名叫做 claude-design-hyperframes.md，將呢個檔案加載俾 Claude Design 之後，Claude Design 就知道應該按照 Hyperframes 嘅規範嚟生成內容，輸出嘅係一個可以直接被渲染成影片嘅完整項目包，而唔係普通嘅網頁原型。

成個工作流嘅分工係咁樣：

◆ Claude Design 類似導演，負責品牌識別、場景版式、核心內容同骨架，俾你出第一刀初稿；
◆ Hyperframes 就係動效師，負責根據導演嘅方向同初稿喺你嘅本地渲染成帶動效嘅影片；
◆ Claude Code 更似一個剪輯師，負責微調 Hyperframes 製作出來嘅影片動效節奏、收緊時序、做質量驗收。

三者係完整嘅接力關係，下面講下具體點樣操作。

第一步，下載技能檔案

打開以下地址：
https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md

喺頁面右上角揾到下載按鈕，撳下載，將檔案保存到本地。

注意：唔可以直接複製呢個 URL 貼俾 Claude Design，一定要下載成檔案再上傳。因為 Claude Design 讀取檔案附件嘅效果遠比讀 URL 好，官方文檔都明確講咗 URL 方式會漏咗好多規則。

第二步，將技能檔案塞俾 Claude Design

喺 Claude Design 中新建一個對話，將啱啱下載好嘅 SKILL.md 檔案直接拖入對話框裏面。然後描述你想要做咩影片。如果你有品牌色板、截圖、Logo 檔案，一齊拖入去，Claude Design 會自動識別並應用到生成內容裏面。

描述影片嘅時候唔需要寫得好精確，但要包含幾個關鍵信息：

◆ 主題係乜
◆ 想要幾長嘅影片
◆ 主要色調或者品牌色（最好可以直接俾十六進制色號）
◆ 核心文案或者數據
◆ 仲有風格感覺（例如「簡潔」、「暗色系」、「有科技感」呢類詞）

Claude Design 都理解到。

官方都俾咗幾個提示詞參考格式，例如做一個功能發佈嘅 Instagram 豎版影片，可以咁樣寫：

用附件嘅技能檔案。我啱啱發佈咗一個新功能，做一個15秒嘅 Instagram 豎版影片。App 名係【XXX】，主色調係【某個色號】，風格乾淨極簡，關鍵數據係【某個數字】。

就咁樣，唔需要寫得好複雜。

第三步，Claude Design 生成

佢會輸出四個檔案：index.html 係影片主體，preview.html 係本地預覽頁，README.md 係呢個項目嘅說明，DESIGN.md 係品牌同設計決策嘅記錄。將呢四個檔案打包下載，呢個就係你嘅影片初稿項目包。

第四步，配置環境

拎到項目包之後，喺本地打開終端，確保你嘅電腦裝咗 Node.js 22 以上嘅版本同 FFmpeg。

呢兩個工具嘅安裝方式：

◆ Node.js 直接去 nodejs.org 下載安裝包
◆ FFmpeg 喺 Mac 上用命令 brew install ffmpeg，喺 Windows 上去 ffmpeg.org/download 下載。

裝完之後可以喺終端度行 npx hyperframes doctor，系統會自動幫你檢查環境係咪配置正確。

第五步，預覽影片

環境確認冇問題之後，喺終端度進入你下載嘅項目文件夾，依次行三條命令。

第一條：npx skills add heygen-com/hyperframes
呢個係一次性安裝，之後唔需要重複行。

第二條：npx hyperframes lint，呢個命令檢查項目結構有冇問題，正常情況下應該係零錯誤通過。

第三條：npx hyperframes preview，呢個會喺瀏覽器度打開本地預覽界面，地址係 http://localhost:3002，你可以喺呢度睇到影片嘅實際效果。

Claude Design 內置嘅預覽窗口唔係太可靠，倒轉拖進度條會出現空白幀，所以官方建議都係喺本地預覽度睇效果。

第六步，微調影片

如果預覽效果整體滿意但係有啲動效細節想調整，將呢個項目包交俾 Claude Code，用自然語言描述你想改啲乜，例如：

「第三個場景嘅出場動效節奏快啲」
「第四場景覺得太長咗壓一壓」
「第五個場景嗰個數字可唔可以從零跳動上嚟」

Claude Code 會直接喺代碼層面幫你調整。

第七步，渲染影片

最終滿意之後，喺終端度行 npx hyperframes render，等佢渲染完成，就得到一個 MP4 檔案。支援嘅解像度包括 1080×1920 嘅豎版、1920×1080 嘅橫版、1080×1080 嘅正方形，三種尺寸都可以喺提示詞度指定。

三類人各自可以用呢套流程做啲乜

1、對設計師嚟講

最有價值嘅地方係方向探索嘅效率。以前俾客戶提案，準備三個唔同風格方向，淨係粗稿就要花幾日。

而家嘅流程係：

準備三段唔同側重嘅提示詞，將品牌素材餵俾 Claude Design，幾十分鐘內出三個有完整動效嘅影片初稿，直接發俾客戶對方向感，而唔係坐埋一齊傾抽象嘅視覺感受。呢個效率壓縮嘅唔係質量，壓縮嘅係「從腦到可睇內容」之間嗰段痛苦嘅等待。

適合品牌片初稿、活動視覺方向對比、產品功能演示影片等場景。

2、對產品經理嚟講

最直接嘅用途係將功能描述變成可以直接擺喙匯報度嘅動態內容。功能上線公告、Q1數據總結、用戶研究發現，以往呢啲嘢要發設計需求單，等排期，改稿，最終可能出一張靜態設計圖。

而家自己寫一段提示詞，包含數據同功能名，Claude Design 配合 Hyperframes 出一個30秒嘅動態影片，裏面嘅數字可以做跳動動畫，場景切換有過渡效果，直接插入會議室嘅大屏演示度。

更重要嘅係，呢個過程唔需要任何設計軟件嘅使用經驗。

3、對市場營銷人員嚟講

呢套流程最省心嘅地方係多尺寸適配。以往一個活動素材要出唔同平台版本，揾設計師改尺寸本身就係一輪額外溝通。而家喺提示詞度直接寫清楚你要邊幾個尺寸，Claude Design 喺生成嘅時候就可以按照唔同寬高比輸出唔同版本，內容同品牌語言一致，格式各自對應平台要求。

一次描述，多個方向，呢個先係真正嘅效率提升。

寫喺最後

一啲使用條件仲係要預先知道嘅。

Hyperframes 本身係完全免費開源嘅，Apache 2.0 協議，商業用途冇任何限制，冇渲染次數收費，冇席位限制。

但要使用 Claude Design，需要 Claude Pro 或以上嘅訂閲。而且 Claude Design 係按用量獨立計費，唔係你買咗 Pro 就可以無限用。影片生成嘅能力本質上仍然係消耗 Claude 嘅視覺處理額度，頻繁使用嘅話需要留意用量上限。

本地環境呢方面前面都講過，Node.js 22 + FFmpeg 呢兩個係硬性要求，缺一個都行唔起。如果之前冇接觸過呢類命令行工具，安裝過程可能需要花啲時間，但官方嘅 npx hyperframes doctor 命令會幫你做環境檢查，邊度冇裝好都會直接話你知，都算比較省心。

音訊呢方面目前唔支援直接處理，如果你嘅影片需要字幕或者語音同步，要先用 Whisper 之類嘅工具（你嘅 Agent 會自動幫你安裝）將音訊轉成帶時間戳嘅文稿，再提供俾 Claude Design 作為參考。呢個係現階段嘅一個明確限制，官方文檔裏面有專門嘅說明。

呢套工作流並唔係要取代 After Effects 或者 Figma，而係將「從想法到可展示內容」嘅門檻大幅降低咗。

以前需要設計師加動效師先完成到嘅影片初稿，而家一個人通過 Agent 用對話嘅方式就可以推進到可以精調嘅狀態。

呢個變化唔係技術層面嘅，係工作節奏層面嘅。

項目推進速度、提案效率、團隊內部溝通嘅信息密度，都會因此改變。

而家回頭睇，同一日 HeyGen 將 Hyperframes 開源，Anthropic 推出 Claude Design，似乎並唔係偶然。

既然睇到呢度，如果覺得幾好，幫忙順手撳個「讚」、「在看」、「轉發」三連；如果想第一時間收到推送，都可以幫我加個星標★，非常感謝！

上週有個做品牌的朋友跟我說，他們團隊現在出一條 30 秒的產品視頻快的話要三天，趕上改稿多的時候一週都打不住，重要事兒全被它們給耽誤了。

我告訴他，現在出一條視頻的速度可能會變成一個下午了，他有點兒半信半疑。

因為讓這件事兒成為可能的兩個東西，幾乎是在同一時間發生的，而且放在一起看才能感受到它們的分量。

4 月 17 日，HeyGen 宣佈將旗下的 Hyperframes 框架徹底開源，代碼託管在 GitHub，任何人都可以免費使用和二次開發。

就在同一天，Anthropic 正式發佈了 Claude Design 這個產品。

兩件事兒單獨看其實只能算是行業裏的常規新聞，就算其中一個是 Claude。

但就在昨天 HeyGen 宣佈 Hyperframes 已經原生集成到 Claude Design 裏了，徹底把兩者連接成了一條完整的工作流。

今天咱們就來簡單說說當這條工作流串通後它能帶來怎樣的價值，尤其是對於做設計、做產品、做市場的人。

先說 Claude Design

它是 Anthropic 專門為視覺創作場景設計的產品，用的是 Claude Opus 4.7 最新的視覺理解能力，可以讀取截圖、品牌手冊、Figma 文件，甚至代碼倉庫，然後根據你描述的內容直接生成視覺資產。

當然，開發者也可以用它，但它的價值我認為對設計師、產品經理和市場營銷人員來說更直接。

因為它真正降低的是「我腦子裏有東西、有畫面，但我不會做出來」的這個門檻。

要知道當 Anthropic 發佈它的時候，Figma 的股價當天跌了 7%，說明市場認為這不是一個玩具級的產品，而是一個可以真正影響現有工作方式的東西。

但 Claude Design 本身有一個限制：它生成的是靜態或者交互原型，沒法直接輸出視頻文件。

這就是 HeyGen 把 Hyperframes 塞進來的意義所在！

Hyperframes 是什麼

Hyperframes 剛出來的時候，我就寫過一篇文章《Hyperframes：一款本地化、口噴式視頻製作神器（附詳細教程）》，可能很多人沒太在意，因為之前就有一款用代碼製作視頻的神器存在了，叫「Remotion」，它需要你懂一些 React 代碼的實現。

這兩款產品在理念和思路上是一致的，都是用代碼實現視頻的創作，也都希望進一步降低製作視頻的門檻，但兩者在技術實現上還是有差別。

Hyperframes 是 HeyGen 開源的一個視頻渲染框架，它乾的事情用一句話簡單說就是：把 HTML 渲染成 MP4。你寫 HTML，它幫你出視頻。

而這次 HeyGen 為 Claude Design 專門製作了一個技能文件，文件名叫做 claude-design-hyperframes.md，把這個文件加載給 Claude Design 之後，Claude Design 就知道該按照 Hyperframes 的規範來生成內容，輸出的是一個可以直接被渲染成視頻的完整項目包，而不是普通的網頁原型。

整個工作流的分工是這樣的：

◆ Claude Design 類似於導演，負責品牌識別、場景版式、核心內容與骨架，給你出第一刀初稿；
◆ Hyperframes 則是動效師，負責根據導演的方向與初稿在你的本地渲染成帶動效的視頻；
◆ Claude Code 更像一名剪輯師，負責微調 Hyperframes 製作出來的視頻動效節奏、收緊時序、做質量驗收。

三者是完整的接力關係，下面說說具體怎麼操作。

第一步，下載技能文件

打開以下地址：
https://github.com/heygen-com/hyperframes/blob/main/docs/guides/claude-design-hyperframes.md

在頁面右上角找到下載按鈕，點擊下載，把文件保存到本地。

注意：不能直接複製這個 URL 粘貼給 Claude Design，必須下載成文件再上傳。因為 Claude Design 讀取文件附件的效果遠比讀 URL 要好，官方文檔也明確說了 URL 方式會漏掉很多規則。

第二步，將技能文件塞給 Claude Design

在 Claude Design 中新建一個對話，把剛才下載好的 SKILL.md 文件直接拖進對話框裏。然後描述你想要做什麼視頻。如果你有品牌色板、截圖、Logo 文件，一起拖進去，Claude Design 會自動識別並應用到生成內容裏。

描述視頻的時候不需要寫得很精確，但要包含幾個關鍵信息：

◆ 主題是什麼
◆ 想要多長的視頻
◆ 主要色調或者品牌色（最好能直接給十六進制色號）
◆ 核心文案或者數據
◆ 還有風格感覺（比如"簡潔"、"暗色系"、"有科技感"這類詞）

Claude Design 都能理解。

官方也給了幾個提示詞參考格式，比如做一個功能發佈的 Instagram 豎版視頻，可以這樣寫：

用附件的技能文件。我剛發佈了一個新功能，做一個 15 秒的 Instagram 豎版視頻。App 名字是【XXX】，主色調是【某個色號】，風格乾淨極簡，關鍵數據是【某個數字】。

就這樣，不需要寫的很複雜。

第三步，Claude Design 生成

它會輸出四個文件：index.html 是視頻主體，preview.html 是本地預覽頁，README.md 是這個項目的說明，DESIGN.md 是品牌和設計決策的記錄。把這四個文件打包下載，這就是你的視頻初稿項目包。

第四步，配置環境

拿到項目包之後，在本地打開終端，確保你的電腦上裝了 Node.js 22 以上的版本和 FFmpeg。

這兩個工具的安裝方式：

◆ Node.js 直接去 nodejs.org 下載安裝包
◆ FFmpeg 在 Mac 上用命令 brew install ffmpeg，在 Windows 上去 ffmpeg.org/download 下載。

裝完之後可以在終端裏跑 npx hyperframes doctor，系統會自動幫你檢查環境是否配置正確。

第五步，預覽視頻

環境確認沒問題之後，在終端裏進入你下載的項目文件夾，依次跑三條命令。

第一條：npx skills add heygen-com/hyperframes
這是一次性安裝，之後不需要重複跑。

第二條：npx hyperframes lint，這個命令檢查項目結構是否有問題，正常情況下應該是零錯誤通過。

第三條：npx hyperframes preview，這會在瀏覽器裏打開本地預覽界面，地址是 http://localhost:3002，你可以在這裏看到視頻的實際效果。

Claude Design內置的預覽窗口不太可靠，倒着拖進度條會出現空白幀，所以官方建議都在本地預覽裏看效果。

第六步，微調視頻

如果預覽效果整體滿意但有一些動效細節想調整，把這個項目包交給 Claude Code，用自然語言描述你想改什麼，比如：

"第三個場景的出場動效節奏快一點"
"第四場景感覺太長了壓一下"
"第五個場景那個數字能不能從零跳動上來"

Claude Code 會直接在代碼層面幫你調整。

第七步，渲染視頻

最終滿意之後，在終端裏跑 npx hyperframes render，等它渲染完成，就得到一個 MP4 文件了。支持的分辨率包括 1080×1920 的豎版、1920×1080 的橫版、1080×1080 的正方形，三種尺寸都可以在提示詞裏指定。

三類人各自能用這套流程幹什麼

1、對設計師來說

最有價值的地方是方向探索的效率。以前給客戶提案，準備三個不同風格方向，光是粗稿就要花好幾天。

現在的流程是：

準備三段不同側重的提示詞，把品牌素材餵給 Claude Design，幾十分鐘內出三個有完整動效的視頻初稿，直接發給客戶對方向感，而不是坐在一起聊抽象的視覺感受。這個效率壓縮的不是質量，壓縮的是「從腦子到可看內容」之間那段痛苦的等待。

適合品牌片初稿、活動視覺方向對比、產品功能演示視頻等場景。

2、對產品經理來說

最直接的用途是把功能描述變成可以直接放在彙報裏的動態內容。功能上線公告、Q1數據總結、用戶研究發現，以往這些東西要發設計需求單，等排期，改稿，最終可能出來一張靜態設計圖。

現在自己寫一段提示詞，包含數據和功能名，Claude Design 配合 Hyperframes 出一個 30 秒的動態視頻，裏面的數字可以做跳動動畫，場景切換有過渡效果，直接插進會議室的大屏演示裏。

更重要的是，這個過程不需要任何設計軟件的使用經驗。

3、對市場營銷人員來說

這套流程最省心的地方是多尺寸適配。以往一個活動素材要出不同平台版本，找設計師改尺寸本身就是一輪額外溝通。現在在提示詞裏直接寫清楚你要哪幾個尺寸，Claude Design 在生成的時候就可以按照不同寬高比輸出不同版本，內容和品牌語言一致，格式各自對應平台要求。

一次描述，多個方向，這才是真正的效率提升。

寫在最後

一些使用條件還是得需要提前知道的。

Hyperframes 本身是完全免費開源的，Apache 2.0 協議，商業用途沒有任何限制，沒有渲染次數收費，沒有席位限制。

但要使用 Claude Design，需要 Claude Pro 及以上的訂閲。而且 Claude Design 是按用量獨立計費的，不是你買了 Pro 就能無限用。視頻生成的能力本質上還是在消耗 Claude 的視覺處理額度，頻繁使用的話需要留意用量上限。

本地環境這塊前面也說過了，Node.js 22 + FFmpeg 這兩個是硬性要求，缺一個都跑不起來。如果之前沒有接觸過這類命令行工具，安裝過程可能需要花一點時間，但官方的 npx hyperframes doctor 命令會幫你做環境檢查，哪裏沒裝好也會直接告訴你，也算比較省心。

音頻這塊目前不支持直接處理，如果你的視頻需要字幕或者語音同步，要先用 Whisper 之類的工具（你的 Agent 會自動幫你安裝）把音頻轉成帶時間戳的文稿，再提供給 Claude Design 作為參考。這是現階段的一個明確限制，官方文檔裏有專門的說明。

這套工作流並不是要替代 After Effects 或者 Figma，而是把「從想法到可展示內容」的門檻大幅大幅度降低了。

以前需要設計師加動效師才能完成的視頻初稿，現在一個人通過 Agent 用對話的方式就能推進到可以精調的狀態。

這個變化不是技術層面的，是工作節奏層面的。

項目推進速度、提案效率、團隊內部溝通的信息密度，都會因此改變。

現在回頭看，同一天 HeyGen 把 Hyperframes 開源，Anthropic 推出 Claude Design，似乎並非偶然。

既然看到這兒了，如果覺得還不錯，幫忙隨手點個「贊」、「在看」、「轉發」三連；如果想第一時間收到推送，也可給我加個星標★，非常感謝！