---
title: "Skill-🎞️ HyperFrames — 用 HTML 寫影片的 AI Agent 框架 (tc)"
description: HeyGen 開源的 HyperFrames，讓 AI agent 用 HTML/CSS/JS 寫出影片，再渲染成 MP4。
url: "https://aaronchan.com/zh/kb/hyperframes/"
updated: "2026-10-07"
category: "AI-Skill (tc)"
tags:
  - AI_Agent
  - AI_Skill
---

# Skill-🎞️ HyperFrames — 用 HTML 寫影片的 AI Agent 框架 (tc)

> 📅 資料整理日期：2026-10-05
> ⚠️ 版本／Star 數可能隨時變動，以 GitHub 官方 Repo 為準
> ℹ️ 注意：本文講的是 HeyGen 開源的 **HyperFrames**（HTML 轉影片框架），
> 與另一間商業影片平台「[Hyperframe.ai](http://Hyperframe.ai)」是兩個不同產品。

---

## 第一部分：這是什麼？

| 項目 | 詳情 |
| --- | --- |
| 名稱 | HyperFrames |
| 開發者 | HeyGen |
| 類型 | 開源影片渲染框架（HTML/CSS/JS → 影片） |
| 授權 | Apache-2.0（免費商用，任意團隊規模） |
| GitHub | ~58.4k stars / 5.2k forks（2026-10） |
| 官網 | [https://hyperframes.heygen.com/](https://hyperframes.heygen.com/) |
| Repo | [https://github.com/heygen-com/hyperframes](https://github.com/heygen-com/hyperframes) |

**核心概念**：不靠時間軸編輯器，而是讓 AI agent 用 **HTML、CSS、JavaScript 寫出影片**。

AI 負責腳本、結構與場景配對，透過程式碼生成合成（composition），再渲染成 MP4。

---

## 第二部分：核心原理

| 項目 | 說明 |
| --- | --- |
| 輸入 | HTML / CSS / JS 檔案 |
| 渲染引擎 | Headless Chrome + FFmpeg |
| 輸出 | MP4 影片 |
| 建置步驟 | 無（檔案直接可播，不用 bundler） |
| 設計對象 | AI agent（Claude Code、Cursor、Gemini CLI、Codex） |

> 💡 HyperFrames 是「agent-first」設計，預設就給 AI 容易產出精緻結果的環境，
> 用純 HTML 而非 React 元件，AI 好寫、非開發者也較易讀懂。

---

## 第三部分：安裝與使用

### 方式 A：AI coding agent（建議）

 Copy

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

安裝後在 agent 內以提示詞操作，例：

 Copy

```
Using /hyperframes, create a 10-second product intro
with a fade-in title, background video, and background music.
```

### 方式 B：手動 CLI

 Copy

```
npx hyperframes init my-video     # 建立專案
cd my-video
npx hyperframes preview           # 瀏覽器預覽
npx hyperframes render            # 渲染成 MP4
```

### 現成 Blocks（直接加到影片）

| 指令 | 用途 |
| --- | --- |
| `npx hyperframes add flash-through-white` | 白閃轉場 |
| `npx hyperframes add instagram-follow` | IG 追蹤 overlay |
| `npx hyperframes add data-chart` | 資料圖表 |

### 前置需求

| 項目 | 版本 |
| --- | --- |
| Node.js | 22+ |
| FFmpeg | 需安裝 |
| npx | 隨 npm 提供 |
| AI coding agent | Claude Code / Cursor / Gemini CLI / Codex（選用） |

---

## 第四部分：適用場景

| 使用場景 | 說明 |
| --- | --- |
| 產品宣傳片（product promos） | 快速產出品牌化短影片 |
| 社群短片（social clips） | IG/TikTok 尺寸與 overlay |
| 動畫解說（animated explainers） | 用程式碼生成動畫 |
| 資料視覺化（data viz） | 動態圖表轉影片 |
| 字幕／overlay | 程式化疊加文字與標籤 |
| 自動化影片工作流 | 批次、程式化生成大量影片 |

---

## 第五部分：HyperFrames vs Remotion

| 項目 | HyperFrames | Remotion |
| --- | --- | --- |
| 編寫方式 | 純 HTML/CSS/JS | React 元件 |
| 建置步驟 | 無（檔案直接播） | 需 bundler |
| 設計對象 | AI agent | React 開發者 |
| 授權 | Apache 2.0（免費） | 團隊 4+ 人需付費 |
| 雲端渲染規模 | Local + Lambda | 較成熟 |
| 底層引擎 | Headless Chrome + FFmpeg | 相同 |

> 💡 兩者底層相同，輸出品質基本持平；差別在 HyperFrames 對 AI agent 與非開發者更友善、無團隊規模收費門檻。

---

## ⚠️ 注意事項

| 注意事項 | 說明 |
| --- | --- |
| 需要寫程式能力 | 適合熟悉程式或 AI coding 工具的用戶；純 no-code 應選 HeyGen 主平台 |
| 需裝 FFmpeg | 本地渲染影片編碼依賴 FFmpeg |
| 與 [hyperframe.ai](http://hyperframe.ai) 不同 | 別搞混：[hyperframe.ai](http://hyperframe.ai) 是另一間商業影片平台 |
| 真影片素材需另處理 | 要放真實影片片段／手剪，仍得靠 Premiere 等傳統剪輯 |
| 版本更新快 | v0.8.x 快速迭代，API 可能變動 |

---

## 🔗 參考連結

| 來源 | 連結 |
| --- | --- |
| 官方文件 | [https://help.heygen.com/en/articles/15001510-hyperframes-x-heygen](https://help.heygen.com/en/articles/15001510-hyperframes-x-heygen) |
| GitHub Repo | [https://github.com/heygen-com/hyperframes](https://github.com/heygen-com/hyperframes) |
| 官網 | [https://hyperframes.heygen.com/](https://hyperframes.heygen.com/) |
| HyperFrames vs Remotion 評測 | [https://www.getmasset.com/resources/blog/hyperframes-vs-remotion-review](https://www.getmasset.com/resources/blog/hyperframes-vs-remotion-review) |

---

*資料來源：HeyGen 官方文件、GitHub 及公開評測（2026年10月）*