跳到主要內容
/
HeyGenvideo-generationagentopen-sourceClaude-Code

HeyGen HyperFrames：用 HTML 寫動畫，AI Agent 直接輸出 MP4

avatar
Akira@akiraxtwo

HeyGen 在 2026 年四月做了一件有趣的事：他們用 Claude Code 和自己寫的框架，把發布影片從頭做到尾——然後把這個框架開源。

這個框架叫做 HyperFrames。它的核心想法非常直接：你寫 HTML 和 CSS 動畫，框架把它轉成 MP4。整條 pipeline 設計給 AI agent 操作，不需要人工打開任何影片編輯工具。

HyperFrames 是什麼

HyperFrames 是一個 open source、agent-native 的影片生成框架，pipeline 是 HTML/CSS → MP4。

它把影片製作的每個步驟都用程式碼表達：動畫是 CSS keyframes，排版是 HTML，時間軸是宣告式的結構。最後統一交由框架的渲染引擎輸出成標準的 MP4 檔案。

對 AI agent 來說，這個設計非常關鍵：agent 只需要會寫 HTML 和 CSS，就能產出影片——不需要操作 Premiere、After Effects，也不需要呼叫任何 GUI 介面。對 Claude Code 這類 coding agent 來說，這正好是它們最擅長的語言。

安裝與使用

HyperFrames 透過 npx skills 安裝，一行指令：

npx skills add heygen-com/hyperframes

安裝完成後，你可以在 Claude Code 或其他 agent 環境中直接使用這個框架的能力。基本的使用流程是：

<!-- 定義一個場景：標題出現動畫 -->
<div class="frame" data-duration="2s">
  <h1 class="animate-in">HyperFrames</h1>
</div>

/* CSS 控制動畫細節 */
.animate-in {
  animation: fadeSlideUp 0.8s ease-out forwards;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

框架接管渲染過程，把每一個 frame 截圖、合成時間軸，最後輸出 MP4。

整條 pipeline 的結構

Loading diagram...

整條流程裡沒有任何需要「手動操作」的步驟。HTML 定義場景結構，CSS 定義視覺動效，HyperFrames 引擎負責從程式碼到影片的全部轉換工作。

為什麼 agent-native 是重要的設計決策

傳統的影片製作工具設計給人類使用：你拖拽素材、調整時間軸、點選輸出按鈕。這些操作對 AI agent 來說幾乎不可能直接執行——它們需要 GUI、需要滑鼠事件、需要視覺回饋。

HyperFrames 的 agent-native 設計翻轉了這個假設。影片製作的每個步驟都用程式碼表達，而程式碼是 AI agent 的原生語言。

這意味著什麼：

AI agent 可以從頭到尾獨立完成一支影片。 你告訴 Claude Code「幫我做一支介紹新功能的 30 秒影片」，它可以規劃場景、寫 HTML 結構、設計 CSS 動畫、執行渲染，最後交給你一個 MP4 檔案——整個過程不需要你打開任何影片軟體。

影片內容可以被版本控制。 HTML 和 CSS 是純文字，可以放進 git repo、可以 code review、可以 diff。影片製作第一次變成了可以用工程流程管理的工作。

可以用 data 驅動影片生成。 agent 可以把 API 資料、產品截圖、動態文字直接注入 HTML 模板，生成個人化的影片內容。這是傳統 GUI 工具難以做到的。

對 indie dev 的意義

HeyGen 自己用 Claude Code 做發布影片，然後把框架開源——這個舉動本身就說明了問題。

影片是目前 indie dev 最難自動化的內容形式。寫文章、做圖、寫程式碼，這些都已經有很成熟的 AI 工作流。但影片一直需要人工介入：打開軟體、調時間軸、手動輸出。

HyperFrames 把影片製作帶進了程式碼的世界。對於獨立開發者來說，這意味著你的 AI coding agent 現在可以接管更多的發布流程——不只是寫 changelog、寫 tweet，還可以直接產出一支說明影片。

它現在的成熟度還不完整，HTML to MP4 的渲染效果和 After Effects 之間有距離，但重點不是畫質比拼，而是這條 pipeline 打通了一個之前完全封閉的自動化路徑。

對習慣用 Claude Code 開發的 indie dev 來說，值得花三十分鐘試試。把它加進你的 agent 工作流，看看它能替你做到哪一步。