HeyGen 開源 FRAME.md,Agent 有了自己的視頻製作「品牌說明書」

作者:土著哥聊AI
日期:2026年6月5日 上午6:30
來源:WeChat 原文

整理版優先睇

速讀 5 個重點 高亮

HeyGen 開源 FRAME.md,為 Agent 提供視頻製作專用品牌規範,補齊 DESIGN.md 喺鏡頭層面嘅空白

整理版摘要

呢篇文章係介紹 HeyGen 近日開源嘅 FRAME.md 規範。作者指出,而家 Agent 做編程有 CLAUDE.md,做設計有 DESIGN.md,但唯獨做視頻嗰陣缺乏統一嘅品牌規範。傳統 DESIGN.md 係為屏幕設計,例如網頁或簡報,但視頻涉及時間軸、動效、鏡頭節奏,Logo 何時出現、點樣進退場呢啲細節,DESIGN.md 根本無辦法交代畀 Agent。

HeyGen 推出 FRAME.md 就係為咗填補呢個缺口。佢將 DESIGN.md 嘅品牌規則從「屏幕」邏輯翻譯成「鏡頭」邏輯,原子保持不變(顏色、字體),但重新按視頻維度表述節奏、比例、停留時間同運動方式。官方強調「原子保持不變,構圖保持自由,數值由腳本決定」,即係唔係死模板,而係可靈活應用嘅超集。佢哋仲提供在線轉換工具,上傳現有 DESIGN.md 就自動生成 FRAME.md。

文章同時介紹咗 HyperFrames——HeyGen 開源嘅視頻渲染引擎,支援 HTML 定義視頻、GSAP/CSS 動畫、Headless Chrome 逐幀截圖等,屬於確定性渲染,適合批量生產。配合 FRAME.md,Agent 就有咗完整嘅「品牌拍攝說明書」。作者用例子展示咗生成嘅視頻完全跟足規範。最後作者認為呢啲規範文件唔係工具增加,而係語言層擴展,每多一個規範就打通一條人機溝通頻道;FRAME.md 開源成為行業基礎設施,正如 Markdown 一樣。

  • FRAME.md 補齊 Agent 視頻製作嘅品牌規範缺口,解決 DESIGN.md 唔適用於鏡頭嘅問題。
  • 佢將品牌規則從屏幕邏輯翻譯成鏡頭邏輯,原子不變但構圖同數值靈活。
  • 提供在線轉換工具(hyperframes.dev/design),可將現有 DESIGN.md 自動生成 FRAME.md
  • 結合 HyperFrames 框架,支援產品展示、功能介紹、社交內容等多種視頻類型。
  • 係開源規範,類比 Markdown,成為行業基礎設施,唔屬於任何單一公司。
值得記低
工具 hyperframes.dev

FRAME.md 在線轉換工具

將現有 DESIGN.md 上傳或粘貼,自動生成 FRAME.md 規範文件。

流程

HyperFrames 安裝指令

喺 Agent 執行呢行命令即可安裝 HyperFrames 技能,掌握視頻製作流程。

整理重點

Agent 做視頻,缺咗個品牌「拍攝說明書」

其實能為 Agent 提供更好嘅服務,最終得益嘅都係人類。而家 Agent 做編程,我哋會提前規範好 CLAUDE.md 或者 AGENTS.md;做設計嗰陣,就會為 Agent 準備 DESIGN.md。唯獨輪到 Agent 做視頻,似乎仲缺少一種標準化嘅規範。

先講下 DESIGN.md。呢個規範最近先流行起嚟,前有 Claude Design,後有 Google Stitch,後者直情將 DESIGN.md 融入整套設計工作流。佢會將品牌視覺規範寫成統一文本文件,包括字體、顏色、Logo 用法、間距規則等,放進項目畀 AI 直接讀取。好處係你只需話畀 AI 一次,佢就記住品牌個樣,唔使每次都重新解釋,既省力又慳 token。

整理重點

FRAME.md:缺失嘅「翻譯層」

今日 HeyGen 發佈嘅 FRAME.md,就係為咗填補呢個缺口。HeyGen 將 FRAME.md 定義為「缺失嘅翻譯層」,佢把你 DESIGN.md 入面嗰套品牌規則,從「屏幕」邏輯翻譯成「鏡頭」邏輯。

品牌嘅基礎 token 唔變——顏色仲係嗰個顏色,字體仲係嗰個字體——但重新按視頻維度表述:節奏點樣控、比例點樣縮放、內容喺畫面停留幾耐、點樣運動。官方講法是「原子保持不變,構圖保持自由,數值則由腳本決定」。意思係品牌核心元素鎖定,具體構圖同時長由每次項目內容決定,唔係一套死模板。

最終生成嘅 FRAME.mdDESIGN.md 嘅超集,你成個工具鏈都可以讀取,唔止 HyperFrames 自己用。HeyGen 直接提供在線轉換入口:hyperframes.dev/design,你上傳現有 DESIGN.md 或者粘貼內容,系統就會自動翻譯成 FRAME.md 規範。

  1. 1 上傳或粘貼現有 DESIGN.md,系統自動生成 FRAME.md
  2. 2 未有 DESIGN.md 嘅可以點輸入框右上角嘅示例體驗一下效果。
  3. 3 生成嘅 FRAME.md 可以直接放入支援 HyperFrames 嘅項目,Agent 就有咗完整嘅「品牌拍攝說明書」。
整理重點

HyperFrames 框架 x FRAME.md:品牌一致性從未咁容易

背後嘅框架叫 HyperFrames,係 HeyGen 開源嘅視頻渲染引擎。我之前都寫過唔少篇關於佢嘅文章。核心邏輯係:用 HTML 定義視頻,加數據屬性控制時間軸同軌道,配合 GSAP、CSS、Lottie、Three.js 等動畫庫處理動效,最後用 Headless Chrome 逐幀截圖、FFmpeg 合成 MP4 輸出。

例如作者基於樣例 FRAME.md,叫 Claude Code 製作咗一個關於 LLM 智能體論文嘅介紹視頻,結果完全跟足規範嘅顏色、字體、間距同邊框。另一個「Hermes Agent」中文版介紹視頻,背景音樂唔同,但品牌統一性保持得好好。

安裝方式亦好簡單,喺你嘅 Agent 運行一行命令就得:npx skills add heygen-com/hyperframes。裝完之後 Agent 就掌握 HyperFrames 製作流程,知道點規劃視頻、寫合法 HTML 結構、接入動畫、添加媒體、預覽同渲染輸出,對新手嚟講基本上零門檻。

整理重點

語言層擴展,人機溝通又開一條頻道

而家代碼層有 CLAUDE.md,設計層有 DESIGN.md,連視頻層都有埋統一規範 FRAME.md。呢個唔係工具增加,而係語言層擴展——每出現一個規範文件,就代表人類同 Agent 之間又打通咗一個新嘅溝通頻道。


其實可以為Agent提供更好嘅服務,最終嘅受益者都係人類。

而家叫Agent做編程,我哋會提前規範好CLAUDE.md或者AGENTS.md;而做設計嘅時候,就會為Agent提前規劃好DESIGN.md。

唯獨叫Agent做視頻嘅時候,我哋似乎仲缺少一種標準化嘅規範。

講呢個問題之前,我哋先傾傾DESIGN.md。

呢個DESIGN.md規範,其實都係最近一段時間先流行起嚟,前有Claude Design,後有Google Stitch。特別係後者已經完全將DESIGN.md融入咗成個設計工作流程入面。

佢會將品牌嘅視覺規範寫成一個統一嘅文本檔案,放入設計項目入面,令到AI同協作工具可以直接讀取。包括字體、顏色、Logo用法、間距規則等等全部喺曬入面。

好處係你只需要話畀AI聽一次,佢就會記得你個品牌係點樣,唔使每次重新解釋,又慳力又慳token。用過嘅人都話好用,因為AI做網頁、做PPT嘅時候真係可以跟住執行。

但問題係:DESIGN.md呢個規範係寫畀「屏幕」嘅,唔係畀「攝像機」嘅。

假設你攞住DESIGN.md叫Agent作為規範直接做視頻,就會發現AI好多時會將佢理解成做網頁或者做投影片嘅規則,兜咗一個圈都係輸出靜態嘅嘢。

因為視頻呢個場景完全唔同。畫面係16:9嘅,有時間軸,有動效,有鏡頭節奏,Logo喺網頁上貼左上角係啱嘅,但喺視頻開場Logo應該第幾幀出現、停幾耐、點樣入場、點樣退場...

呢啲DESIGN.md係完全冇話畀AI知嘅,AI完全唔知道,所以只能靠估。

而今日HeyGen發布嘅FRAME.md,就係嚟填補呢個缺口嘅。

HeyGen將FRAME.md定義為「缺失嘅翻譯層」。

佢做嘅嘢就係將你DESIGN.md入面嗰套品牌規則,從「屏幕」邏輯翻譯成「鏡頭」邏輯。

品牌嘅基礎token不變,顏色都係嗰個顏色,字體都係嗰個字體,但重新按照視頻嘅維度嚟表述。節奏點樣控制、比例點樣縮放、內容喺畫面入面停留幾耐、點樣鬱。

按照官方嘅講法係「原子保持不變,構圖保持自由,數值則由腳本決定」。意思係品牌核心元素鎖定,具體嘅構圖同埋時長由每次嘅具體項目內容嚟定,所以佢並唔係一套死模板。

最終生成嘅FRAME.md係DESIGN.md嘅一個超集,你成個工具鏈都可以讀取,唔淨止係HyperFrames自己用。

HeyGen直接提供咗一個在線轉換嘅入口:
https://www.hyperframes.dev/design

你只需要將你現有嘅DESIGN.md上傳上去,或者貼內容入去,系統就會自動幫你翻譯成FRAME.md規範信息。

圖片

當然,暫時冇DESIGN.md嘅都可以㩒輸入框右上角嘅示例先體驗一下效果。

生成嘅FRAME.md攞到手之後,你就可以直接掉入你本地正在用HyperFrames製作視頻嘅項目入面,你嘅Agent就相當於有咗一份完整嘅「品牌拍攝說明書」。

產品發布視頻、功能介紹短片、帶動效字幕嘅社交內容、數據可視化動畫、PDF轉敍述性視頻、博客文章轉短視頻、GitHub項目轉架構講解視頻,呢啲全部做得。

你只需要對住支援HyperFrames技能嘅Agent講:「幫我做一個10秒嘅產品開場,有淡入標題,有背景視頻,有背景音樂」。佢就知道應該點樣做,因為佢已經有你嘅FRAME.md話畀佢知品牌係點樣嘅。

例如我就基於上面HeyGen提供嘅樣例FRAME.md規範,叫Claude Code製作咗一個針對《面向生產級LLM智能體的運行時架構模式選型與組合方法》論文嘅介紹視頻。

圖片

你會發現下面最終輸出嘅呢個視頻完全遵守咗FRAME.md入面制定嘅規範,無論係顏色、字體、間距、邊框等等都嚴格執行咗。

呢個就係FRAME.md「品牌拍攝說明書」起到嘅關鍵作用!

佢令到Agent製作嘅視頻時唔再係自由發揮,而係有章可循,令品牌嘅一致性得到咗好好嘅延續。

再睇一個例子,我叫Claude Code製作嘅一個關於「Hermes Agent」嘅中文版介紹視頻。

都同樣應用咗FRAME.md規範,只係介紹嘅內容變咗做中文,增加咗背景音樂,但品牌嘅統一性保持得非常好。

呢個背後嘅框架叫HyperFrames,係HeyGen開源嘅視頻渲染引擎。我之前都寫過唔少篇針對佢嘅文章。

核心邏輯就係:用HTML定義視頻,加數據屬性控制時間軸同軌道,配合GSAP、CSS、Lottie、Three.js等動畫庫處理動效,最後用Headless Chrome逐幀截圖、FFmpeg合成MP4輸出。

佢屬於確定性渲染,同一套輸入每次出嚟嘅視頻基本完全一致,而家再結合埋FRAME.md規範,就更加適合批量內容生產。

而且呢個框架原生就適配Claude Code、Codex、Cursor、Gemini CLI等主流Agent工具,方便直接調用。

上手方式都非常簡單,喺你嘅Agent入面執行一行命令就可以安裝:

npx skills add heygen-com/hyperframes

安裝之後Agent就掌握咗HyperFrames嘅製作流程,知道點樣規劃視頻、寫合法嘅HTML結構、接入動畫、加入媒體文件、預覽同渲染輸出。

對於新手嚟講,基本上屬於零門檻。


寫喺最後

而家代碼層有CLAUDE.md,設計層有DESIGN.md,而家連視頻層都有咗統一嘅規範FRAME.md,話畀Agent知呢個品牌喺鏡頭前係點樣。

呢個並唔係工具喺度增加,而係語言層喺度擴展。

每次出現一個咁樣嘅規範文件,就意味住人同Agent之間又打通咗一個新嘅溝通頻道。

視頻呢件事,之前一路都係Agent工作流入面最難控制嘅嗰一環。

今次HeyGen開源咗FRAME.md呢套規範,令佢成為咗整個行業共用嘅基礎設施,而唔係想將FRAME.md變成自己嘅護城河。

就好似Markdown咁,唔屬於任何人,所以先可以屬於所有人。


既然睇到呢度,如果覺得唔錯,順手幫手㩒個「讚」、「在看」、「轉發」三連;如果想第一時間收到推送,都可以畀我加個星標★,非常感謝!



其實能為 Agent 提供更好的服務,最終的受益者仍是人類。

現在讓 Agent 做編程,我們會提前規範好 CLAUDE.md 或者 AGENTS.md;而在做設計時,則會為 Agent 提前規劃 DESIGN.md。

唯獨讓 Agent 做視頻時,我們似乎還缺少一種標準化的規範。

在說這個問題之前,我們先聊聊 DESIGN.md。

這個  DESIGN.md 規範,其實也就是最近一段時間才流行起來的,前有 Claude Design,後有 Google Stitch。特別是後者已經完全把 DESIGN.md 融入了整套設計工作流當中。

它會把品牌的視覺規範寫成一個統一的文本文件,放進設計項目裏,讓 AI 與協作工具可以直接讀取。包括字體、顏色、Logo 用法、間距規則等等全在裏面。

好處是你只需告訴 AI 一次,它就能記住你的品牌長什麼樣,不用每次重新解釋,既省力、也省 token。用過的人都說好用,因為 AI 做網頁、做 PPT 的時候確實能照着執行。

但問題是:DESIGN.md 這個規範是給「屏幕」寫的,不是給「攝像機」寫的。

假設你拿着 DESIGN.md 讓 Agent 作為規範直接做視頻,會發現 AI 往往會把它理解成做網頁或者做幻燈片的規則,繞了一圈兒還是給你輸出靜態的東西。

因為視頻這個場景完全不一樣。畫面是 16:9 的,有時間軸,有動效,有鏡頭節奏,Logo 在網頁上貼左上角是對的,但在視頻開場 Logo 應該第幾幀出現、停多久、怎麼進場、怎麼退場...

這些 DESIGN.md 是根本沒有告訴 AI 的,AI 完全不知道,所以只能靠猜。

而今天 HeyGen 發佈的 FRAME.md,就是來填補這個缺口的。

HeyGen 把 FRAME.md 定義為「缺失的翻譯層」。

它做的事情就是把你 DESIGN.md 裏的那套品牌規則,從「屏幕」邏輯翻譯成「鏡頭」邏輯。

品牌的基礎 token 不變,顏色還是那個顏色,字體還是那個字體,但重新按照視頻的維度來表述。節奏怎麼控、比例怎麼縮放、內容在畫面裏停留多久、怎麼運動。

按照官方的說法是「原子保持不變,構圖保持自由,數值則由腳本決定」。意思是品牌核心元素鎖定,具體的構圖和時長由每次的具體項目內容來定,所以它並不是一套死模板。

最終生成的 FRAME.md 是 DESIGN.md 的一個超集,你整個工具鏈都能讀取,不只是 HyperFrames 自己用。

HeyGen 直接提供了一個在線轉換的入口:
https://www.hyperframes.dev/design

你只要把你現有的 DESIGN.md 上傳上去,或者粘貼內容進去,系統就會自動幫你翻譯成 FRAME.md 規範信息。

圖片

當然,暫時沒有 DESIGN.md 的也可以點輸入框右上角的示例先體驗一下效果。

生成的 FRAME.md 拿到手後,你就可以直接丟進你本地正在使用 HyperFrames 製作視頻的項目裏,你的 Agent 就相當於有了一份完整的「品牌拍攝說明書」。

產品發佈視頻、功能介紹短片、帶動效字幕的社交內容、數據可視化動畫、PDF 轉敍述性視頻、博客文章轉短視頻、GitHub 項目轉架構講解視頻,這些統統能做。

你只需要對着支持 HyperFrames 技能的 Agent 說:"幫我做一個 10 秒的產品開場,有淡入標題,有背景視頻,有背景音樂"。它就知道該怎麼幹,因為它已經有了你的 FRAME.md 告訴它品牌長什麼樣了。

比如我就基於上面 HeyGen 提供的樣例 FRAME.md 規範,讓 Claude Code 製作了一個針對《面向生產級 LLM 智能體的運行時架構模式選型與組合方法》論文的介紹視頻。

圖片

你會發現下面最終輸出的這個視頻完全遵守了 FRAME.md 中制定的規範,無論是顏色、字體、間距、邊框等等都嚴格執行了。

這就是 FRAME.md「品牌拍攝說明書」起到的關鍵作用!

它讓 Agent 製作的視頻時不再是自由發揮,而是有章可循,讓品牌的一致性得到了很好的延續。

再看一個例子,我讓 Claude Code 製作的一個關於「Hermes Agent」的中文版介紹視頻。

也同樣應用了 FRAME.md 規範,只是介紹的內容變成了中文,增加了背景音樂,但品牌的統一性保持的非常好。

這背後的框架叫 HyperFrames,是 HeyGen 開源的視頻渲染引擎。我之前也寫過不少篇針對它的文章。

核心邏輯就是:用 HTML 定義視頻,加數據屬性控制時間軸和軌道,配合 GSAP、CSS、Lottie、Three.js 等動畫庫處理動效,最後用 Headless Chrome 逐幀截圖、FFmpeg 合成 MP4 輸出。

它屬於確定性渲染,同一套輸入每次出來的視頻基本完全一致,現在再結合上 FRAME.md 規範,就更加適合批量內容生產。

而且這個框架原生就適配 Claude Code、Codex、Cursor、Gemini CLI 等主流 Agent 工具,方便直接調用。

上手方式也非常簡單,在你的 Agent 裏運行一行命令即可安裝:

npx skills add heygen-com/hyperframes

安裝之後 Agent 就掌握了 HyperFrames 的製作流程,知道怎麼規劃視頻、寫合法的 HTML 結構、接入動畫、添加媒體文件、預覽和渲染輸出。

對於新手來講,基本上屬於零門檻。


寫在最後

現在代碼層有 CLAUDE.md,設計層有 DESIGN.md,現在連視頻層也有了統一的規範 FRAME.md,告訴 Agent 這個品牌在鏡頭前長什麼樣。

這並非工具在增加,而是語言層在擴展。

每出現一個這樣的規範文件,就意味着人和 Agent 之間又打通了一個新的溝通頻道。

視頻這件事兒,之前一直是 Agent 工作流裏最難控制的那一環。

這次 HeyGen 開源了 FRAME.md 這套規範,讓它成為了整個行業共用的基礎設施,而不是想把 FRAME.md 變成自己的護城河。

就像 Markdown 一樣,不屬於任何人,所以才能屬於所有人。


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