# 策展 · X (Twitter) 🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：HeyGen (@HeyGen) · 平台：X (Twitter) · 日期：2026-06-04

> 原始來源：https://x.com/HeyGen/status/2062211458042347520

## 中文摘要

HeyGen 推出 `frame.md` 規格，讓 AI Agent 能將品牌設計系統轉化為可執行的影片製作指令。

**核心概念**
HeyGen 此次發布的 `frame.md` 旨在解決品牌一致性在影片製作中的斷層。過去開發者常用的 `design.md` 僅適用於網頁與簡報，當 AI Agent 嘗試將其應用於影片時，往往會產生錯誤的轉譯。`frame.md` 作為一種「設計系統的影片轉譯層」，將既有的設計規範（如原子化設計元件）重新定義，讓 AI Agent 能在不需猜測版面配置的情況下，精準產出符合品牌規範的影片。

**技術應用與整合**
「HyperFrames」是一個開源框架，專為將 HTML、CSS 及各類動畫（如 GSAP、Lottie）轉化為確定性 MP4 影片而設計。其核心特色在於對 AI Agent 的高度友善，開發者可透過以下指令將相關 skill 整合至現有的程式開發流程中：

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1780584481144-23haecyq.mp4" controls preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 這段影片介紹了 HyperFrames 如何將靜態的設計規範（design.md）轉換為適合 AI 代理（AI Agent）理解的動態影片腳本格式（frame.md）。

```bash
npx skills add heygen-com/hyperframes
```

整合後，Agent 即可透過自然語言指令（例如：「建立一個 10 秒的產品介紹影片，包含淡入標題與背景音樂」）自動執行影片製作的完整迴圈，包含規劃、撰寫 HTML、配置動畫、預覽以及渲染。

**與同類工具差異**
相較於同樣基於 Headless Chrome 與 FFmpeg 渲染影片的「Remotion」，HyperFrames 的設計哲學更偏向「HTML 原生」：
- **無建置步驟**：`index.html` 檔案可直接在瀏覽器預覽，無需複雜的 React 打包流程。
- **Agent 友善**：由於直接使用標準 HTML 與 CSS，AI Agent 在編寫與除錯時更為直覺。
- **確定性輸出**：確保相同的輸入在不同環境下產出完全一致的影格，適合自動化內容管線與回歸測試。

使用者可透過 [HyperFrames 官方網站](https://www.hyperframes.dev/) 瀏覽設計範本，或前往 [GitHub 專案庫](https://github.com/heygen-com/hyperframes) 獲取完整原始碼與文件。

## 標籤

Agent, 新產品, 開源專案, HeyGen, HyperFrames