一個神奇的視頻生成 Skills，實測，狂喜

這個 skills 我愿稱之為老章狂喜Skills

我的視頻號，都是文字轉視頻，用的基于Remotion自己手寫的skills，目前我還是比較滿意的

今天再聊一個更神奇的 Skills——HyperFrames，讓 AI agent 用 HTML 代碼直接寫出視頻

一句話定位是：Write HTML. Render video. Built for agents.

還是先看效果吧，我把前幾天發的那篇 喂給了 HyperFrames，讓它壓成一段可視化解讀視頻

結果如下：

然后我花了一些時間，把它融入到語音克隆、讀稿、字幕處理、視頻生產、BGM壓制大工作流中

生成了我的聲音播報、帶精準字幕和BGM的視頻

簡介

HyperFrames 是一個開源的視頻渲染框架，把視頻組合（composition）寫成一個 HTML 文件，瀏覽器里實時預覽，命令行渲染成 MP4

最有意思的是 Skills 這條線

裝上 HyperFrames 的 skills，Claude Code、Cursor、Gemini CLI、Codex 這些 agent 就學會怎么寫合規的 composition 和 GSAP 動畫

在 Claude Code 里，這套 skills 直接注冊成斜杠命令：/hyperframes 寫 composition，/hyperframes-cli 跑 CLI，/gsap 解決動畫問題

技術棧是 headless Chrome + FFmpeg 的穩定組合，HTML 文件直接當源文件用，沒有構建步驟

HyperFrames demo — HTML 代碼在左，渲染出的視頻在右

核心特點：

• HTML 原生 — composition 就是帶 data-* 屬性的 HTML 文件，沒有 React，沒有專有 DSL，agent 本來就會寫 HTML

• Skills 驅動 — 一行 npx skills add heygen-com/hyperframes 把視頻框架的肌肉記憶裝進 agent 腦子里

• 確定性渲染 — 同樣輸入 = 同樣輸出，自動化流水線友好

• Frame Adapter 模式 — 動畫運行時可以換，GSAP、Lottie、CSS、Three.js 都能接

• 50+ 現成模塊 — 社交平臺覆蓋層、shader 轉場、數據圖表、電影感特效，一行命令安裝

要求 Node.js >= 22，加 FFmpeg。

配合 AI agent（官方推薦）：

npx skills add heygen-com/hyperframes

裝完之后直接在 agent 里描述需求即可

手動起項目：

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # 瀏覽器實時預覽，熱更新
npx hyperframes render       # 渲染成 MP4

hyperframes init 會自動把 skills 一并安裝好，隨時可以切回 agent 模式

Codex 用戶有專門的 plugin 入口，稀疏安裝：

codex plugin marketplace add heygen-com/hyperframes --sparse .codex-plugin --sparse skills --sparse assets

Cursor 也有對應 plugin，可以從 Cursor Marketplace 裝，也可以本地 sideload

使用

一個 composition 長這樣，就是一個 HTML 片段：

      id="clip-1"
    data-start="0"
    data-duration="5"
    data-track-index="0"
    src="intro.mp4"
    muted
    playsinline
  > 
         video>
      id="overlay"
    class="clip"
    data-start="2"
    data-duration="3"
    data-track-index="1"
    src="logo.png"
  />
      id="bg-music"
    data-start="0"
    data-duration="9"
    data-track-index="2"
    data-volume="0.5"
    src="music.wav"
  > 
          audio>
 
           div>

data-start 是開始時間，data-duration 是持續秒數，data-track-index 是軌道編號——視頻、圖片、音頻在時間軸上的關系一目了然

這就是它能讓 agent 準確生成視頻的關鍵：HTML 大模型再熟不過了

調用 catalog 加現成組件：

npx hyperframes add flash-through-white   # shader 轉場
npx hyperframes add instagram-follow      # Ins 關注覆蓋層
npx hyperframes add data-chart            # 動態數據圖表

跟 agent 配合的幾個典型 prompt（直接抄）：

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

? Take a look at this GitHub repo https://github.com/heygen-com/hyperframes and explain its uses and architecture to me using /hyperframes.

? Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration.

? Make the title 2x bigger, swap to dark mode, and add a fade-out at the end.

最后那條改稿 prompt 才是真正的殺器——把 agent 當視頻剪輯師用，自然語言改樣式、加下三分之一、加片尾淡出，全程不用碰代碼

HyperFrames 與 Remotion

視頻渲染框架這塊，繞不開 Remotion

HeyGen 自己也大方承認 HyperFrames 受 Remotion 啟發，源碼里還保留了向 Remotion 致敬的注釋（Chrome 啟動參數、image2pipe → FFmpeg 流式管道、幀緩沖那些模式）

兩者底層都是 headless Chrome 驅動，都講究確定性渲染

差別在一個核心決定上：作者主要寫什么

Remotion 押注 React 組件，HyperFrames 押注 HTML

HyperFrames Remotion

作者寫法

HTML + CSS + GSAP

React 組件（TSX）

構建步驟

無， index.html 直接跑

必須，要打包

庫時鐘動畫（GSAP、Anime.js、Motion One）

可 seek，幀級精準

渲染時按墻鐘播放

任意 HTML / CSS 直通

粘貼即可動畫

要重寫成 JSX

分布式渲染

目前單機

Lambda，生產可用

許可證差別更直接：HyperFrames 是 Apache 2.0 完全開源，OSI 認證那種，商用任意規模、無按渲染計費、無座位上限、無公司體量閾值

Remotion 是 source-available，代碼在 GitHub 上但用的是自定義 Remotion License，超過小團隊規模需要付費授權

如果是給 agent 用，HTML 這條路比 React 那條路順得多——大模型生成 HTML 的準確率遠高于生成完整 React 項目，加上 HyperFrames 沒有構建步驟，agent 寫完文件就能預覽，反饋鏈路特別短

生態包

倉庫是個 monorepo，按職責拆得很清晰：

Package

作用

hyperframes

CLI，create / preview / lint / render

@hyperframes/core

類型、解析器、生成器、linter、運行時、frame adapter

@hyperframes/engine

可 seek 的頁面到視頻捕獲引擎（Puppeteer + FFmpeg）

@hyperframes/producer

完整渲染流水線（捕獲 + 編碼 + 音頻混合）

@hyperframes/studio

瀏覽器端 composition 編輯器 UI

@hyperframes/player

嵌入式 web component

@hyperframes/shader-transitions

composition 用的 WebGL shader 轉場

隨框架一起出的 skills 一共 5 個：

Skill

教 agent 什么

hyperframes

HTML composition 編寫、字幕、TTS、音頻反應動畫、轉場

hyperframes-cli

CLI 命令：init、lint、preview、render、transcribe、tts、doctor

hyperframes-registry

通過 hyperframes add 安裝區塊和組件

website-to-hyperframes

抓取一個 URL 把它變成視頻——完整的 website-to-video 流水線

gsap

GSAP 動畫 API、時間軸、緩動、ScrollTrigger、插件、React/Vue/Svelte、性能

website-to-hyperframes 這個最騷——把網頁直接變視頻，這是把"內容素材搬運"的活兒都打包好了。

實戰：把一篇公眾號文章做成 22 秒解讀視頻

上周發的那篇 喂給了 HyperFrames，讓它壓成一段可視化解讀視頻

全程 HTML + GSAP 寫五個場景：標題 → Qwen + Opus 公式 → 關鍵參數卡片（12K SFT / 16 prompt 評測 / RTX 5090 / Apache 2.0）→ GGUF 量化檔位列表 → 收尾

npx hyperframes init 起項目，npx hyperframes lint 校驗，npx hyperframes render 渲染——總共 22 秒的 1920×1080 視頻，渲染耗時 25 秒，輸出 2 MB 的 MP4：

Qwopus3.6 文章解讀 · HyperFrames 一把梭生成

又生成了一個適合視頻號的3:4

整個 composition 的核心結構就是一個 HTML 文件，每個場景一個 .scene 塊加 data-start、data-duration 控制時間軸，底下一段 GSAP timeline 控動畫。改文案、調時長、換配色都是改 HTML，agent 改起來跟改普通網頁沒區別

中間有個小坑：渲染時碰到 PingFang SC 不在 HyperFrames 的確定性字體映射表里，有 warning，但兜底會走 Inter，不影響出片。要徹底干凈的話，文檔里說自己加 @font-face 引入字體文件就行

總結

HyperFrames 這套東西的精妙之處，在于它把視頻生成這個傳統上需要剪輯師/動畫師的工種，重新定義成了寫 HTML——而 agent 寫 HTML 的能力本來就到位了

Skills 把框架的具體語法、動畫模式、CLI 用法封裝成 agent 可加載的上下文，等于給大模型現場培訓了一個全棧視頻開發能力

適合誰用：

• 做內容流水線的，想批量生成宣傳短視頻、產品演示、社交平臺內容

• 已經在用 Claude Code / Cursor / Codex，希望把視頻環節也接進 agent 工作流

• 需要確定性、可復現的渲染，做自動化測試、腳本化產出

• 不想被 Remotion 商業許可綁住，要純開源協議的

局限也得說清楚：

• 分布式渲染目前還沒有，Remotion 已經有 Lambda 方案

• HTML + GSAP 這條路對純前端不熟的人有上手門檻

• 復雜三維特效還是要靠 Three.js 或外部工具，框架本身只是給一個 frame adapter 接口

最大的看點還是 Skills 這條線，也是本文測試等重點

把一個開源視頻框架的全部知識塞進 agent，讓"寫視頻"和"寫文章"在 Claude Code 里變成同一種操作——這是讓我覺得"AI 原生工具"這個詞終于落到實處的一個例子

制作不易，如果這篇文章覺得對你有用，可否點個關注。給我個三連擊：點贊、轉發和在看。若可以再給我加個，謝謝你看我的文章，我們下篇再見！