HyperFrames 完整攻略 — HTML 即影片格式 + 點用（2026/7）

🎯 一句話 verdict： HyperFrames 換咗思路做 AI 影片 — 唔係叫 AI 生 pixel（貴、不可控），而係叫 AI 寫 HTML + CSS + JS 動畫（cheap、deterministic、git-able）。 Headless Chrome 一幀一幀 screenshot → 編碼成 MP4。對你嘅即時 value：你可以將你嘅「Lark doc research 轉成 AI 旁白影片」—— 結合 MiniMax Music 3.0（已有）+ Kokoro TTS（內建）+ ListenHub 聲音克隆（可選），一條 60 秒 video 成本 < HK$5。

📊 一、5 大關鍵數字

🧠 二、呢個 tool 做咩？（5 個一句話）

1. HTML = 影片格式 — AI 寫 HTML，headless browser 一幀一幀截成 MP4

2. Deterministic rendering — 同樣 input 永遠出同樣 output，git-able / diff-able / reproducible

3. 超平 — 唔使 gen video model 嘅 API，靠瀏覽器 screenshot，幾乎免費

4. AI agent-friendly — 內建 /hyperframes skill，npx skills add 即裝即用

5. 時間軸鎖定 — TTS 字幕時間戳 = 畫面時鐘，「音頻即時鐘」

🔬 三、HyperFrames vs 你嘅現有 AI video stack

結論： HyperFrames 係完全唔同嘅 paradigm — 唔係同 Runway 競爭，係重新定義「AI 影片」呢件事。

🛠️ 四、Quick Start（5 步）

Step 1：Install Prerequisites

1
2
3
4
5
6
7
8

# Node.js 22+
node --version  # 確認 >= v22

# FFmpeg
brew install ffmpeg  # macOS
sudo apt install ffmpeg  # Linux
winget install ffmpeg  # Windows

Step 2：Install HyperFrames Skills for AI Agent（推薦）

1
2
3

npx skills add heygen-com/hyperframes
# 揀「core set」或者直接 --all

HyperFrames 自動 load 入以下 AI agent：

• Claude Code ✅

• Cursor

• Gemini CLI

• Codex

• Google Antigravity

• GitHub Copilot CLI

Step 3：Init Project

1
2
3
4

npx hyperframes init my-video
# 或 --non-interactive
npx hyperframes init my-video --non-interactive --example blank

自動生成 project structure：

1
2
3
4
5
6
7
8
9

my-video/
├── meta.json              # Project metadata
├── index.html             # Root composition（你嘅 video 入口）
├── compositions/          # Sub-compositions
│   ├── intro.html
│   └── captions.html
└── assets/                # Media files
    └── video.mp4

Step 4：用 AI Agent 寫內容

入 Claude Code / Cursor 講大白話：

“Using /hyperframes, create a 10-second product intro with a fade-in title over a dark background and subtle background music.”

AI 會自動寫 HTML + GSAP 動畫入 index.html。

3 大必要 rule：

• Root element 必須有 data-composition-id、data-width、data-height

• Timed elements 必須有 data-start、data-duration、data-track-index、class="clip"

• GSAP timeline 必須 { paused: true } + register 到 window.__timelines

Step 5：Render MP4

1
2
3

npx hyperframes preview     # 本地即時 preview
npx hyperframes render --output output.mp4

輸出：

1
2
3
4

✔ Capturing frames... 150/150
✔ Encoding MP4...
✔ output.mp4 (1920x1080, 5.0s, 30fps)

🎤 五、配音 — 3 大方案

方案 A：本地 Kokoro TTS（免費、offline、Chinese xiaobei）

1
2
3
4

hyperframes tts
# 內建 Kokoro-82M
# 中文：`--lang zh --voice xiaobei`

• ✅ 唔連網

• ✅ 完全免費

• ⚠️ 音色 generic，唔似你嘅聲

方案 B：雲端 TTS（ListenHub）

• 出 audio + 逐句 SRT

• 支援聲音克隆（你錄一段 → AI 學你把聲）

• 影片內 01Coder 用呢個方法，主角聲就係佢克隆嘅自己

方案 C：MiniMax TTS（你已有 Hermes）

你已經有 MiniMax API，可以直接整合 MiniMax TTS：

• 中文音色 + 廣東話支援

• API cost 約 $0.01/100 字

• 1 分鐘 voiceover ≈ HK$0.10

HyperFrames 嘅魔法：

「音頻即時鐘，畫面跟着聲音走」

TTS 字幕嘅 SRT timestamp = 畫面 trigger —— 邊句讀到，邊個 element 出。

🎨 六、設計系統 — 3 大 Design Patterns

好處： 10 期影片就係「一家人」—— 觀眾一眼認得。

HyperFrames 提供 Catalog 50+ ready-to-use blocks：

• Transitions · Overlays · Data visualizations · Effects

💡 七、對你「直接」嘅 7 個 use case

Use Case 1：SME 月報轉影片

1
2
3
4
5

Lark doc (SME 月報) 
   ↓ HyperFrames + Hermes agent
   ↓
60 秒影片：標題 + 3 大要點 + AI 旁白 + BGM

報價：HK$3k–8k / 月 / 客戶

Use Case 2：研究 doc → 簡報影片

1
2
3
4
5

Lark doc research（Microsoft Research 4 大新研究）
   ↓ /hyperframes
   ↓
YouTube Short 風格：Hook + 3 個 takeaway + CTA

省時間： 而家 research → doc → 仲要寫多份影片稿，改用 HyperFrames 一條 prompt 出片。

Use Case 3：客戶 onboarding 影片

1
2
3
4
5

客戶 SOP (Lark doc)
   ↓ HyperFrames + TTS
   ↓
Welcome video：3 分鐘 product walkthrough

報價：HK$5k–15k / 客戶

Use Case 4：產品 launch 影片

HyperFrames 已有 /product-launch-video workflow：

1
2
3
4
5

Product spec (Notion / Lark)
   ↓ /product-launch-video
   ↓
15 秒 launch teaser + 60 秒 full version

報價：HK$10k–30k / launch

Use Case 5：Code tutorial 影片

1
2
3
4
5

VS Code project
   ↓ /pr-to-video (GitHub PR)
   ↓
10 分鐘 code walkthrough video

極啱 developer audience — 你嘅 GitHub commits 即影片。

Use Case 6：AI 旁白 podcast intro

1
2
3
4
5
6

Blog post / Lark doc
   ↓ MiniMax Music 3.0 (BGM) + MiniMax TTS (voice)
   ↓ HyperFrames
   ↓
30 秒 podcast intro（每集）

Use Case 7：批量內容生產

Hermes Agent + Orca（之前研究過嘅）做多 worktree：

1
2
3
4

Worktree #1 → 5 條影片 script → HyperFrames render → 5 條 MP4
Worktree #2 → 客戶 A brand song MV → HyperFrames render → MP4
Worktree #3 → 客戶 B onboarding → HyperFrames render → MP4

10 條影片 × 1 日 = 之前要 1 週

🛠️ 八、HyperFrames + 你 Hermes Stack 整合

3 大 integrated workflow

A. YouTube Short 自動生產

1
2
3
4
5
6

[niche topic list (Lark Sheet)] 
   → [Hermes: 寫 60 秒 script]
   → [HyperFrames: render video]
   → [mediakit-cli: 加 burned-in subtitle]
   → [n8n: auto-upload YouTube + Telegram notify]

B. 客戶 brand video 月單

1
2
3
4
5
6
7

[客戶 brand spec (Lark doc)]
   → [Hermes: 用 `/product-launch-video` 寫 index.html]
   → [MiniMax Music 3.0: 生成 BGM]
   → [ListenHub 或 MiniMax TTS: voiceover]
   → [HyperFrames: render]
   → [Lark upload: deliver to client]

C. AI 內容工廠

1
2
3
4
5

[Lark Sheet: 100 個 video topic backlog]
   → [Hermes × Orca: parallel write scripts]
   → [HyperFrames: parallel render (5 concurrent)]
   → [Lark auto-upload: schedule across 100 days]

🆚 九、Competitor 對標

HyperFrames 嘅 positioning： 唯一一個 open-source + HTML-based + AI agent 友善嘅 video framework。

💰 十、HK Side Income 對標

⚠️ 十一、限制 / 風險

1. 要 Node.js 22+ + FFmpeg — 首次 setup 比較煩

2. HyperFrames 內建 TTS 音質一般 — 中文要靠 MiniMax 或 ListenHub

3. AI 寫 HTML quality — 要 prompt 寫得清楚

4. 每段 video 仍要 preview — AI 寫嘅 HTML 唔一定第一次就 OK

5. License — HeyGen 出品，雖然 open source 但有商用條款要 check

6. v0.7.42 — 仲係早期版本，可能有 bugs

7. HeyGen 商業策略不確定 — 未來可能轉商業 license

8. 6:16 教學片係中文 — 英文 community 細

🚀 十二、Next Step 建議

📚 十三、Source / 延伸閱讀

YouTube 影片

• 01Coder 快速上手： https://youtu.be/BZFLuzm9tCk?si=TI8K_vWFfRdEbm4H

• 其他 HyperFrames tutorial： https://www.youtube.com/results?search_query=hyperframes

官方

• HyperFrames GitHub： https://github.com/heygen-com/hyperframes

• HyperFrames 官網： https://www.hyperframes.dev/

• Quickstart： https://hyperframes.heygen.com/quickstart

• Catalog： https://hyperframes.heygen.com/catalog/blocks/data-chart

• Docs： https://hyperframes.heygen.com/

• HeyGen： https://www.heygen.com/

Skills & Installation

1
2
3

npx skills add heygen-com/hyperframes
npx skills add heygen-com/hyperframes --all  # core + all workflows

Tools 對標

• Remotion： https://www.remotion.dev/

• Runway： https://runwayml.com/

• MiniMax Music 3.0： 你已有嘅 Lark doc #5

本報告由 Hermes Agent 自動研究編製，數據截至 2026/7/20。HyperFrames 由 HeyGen 開發並開源，版本以 GitHub latest release 為準。