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

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

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

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

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

結(jié)果如下：

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

生成了我的聲音播報(bào)、帶精準(zhǔn)字幕和BGM的視頻

簡介

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

最有意思的是 Skills 這條線

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

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

技術(shù)棧是 headless Chrome + FFmpeg 的穩(wěn)定組合，HTML 文件直接當(dāng)源文件用，沒有構(gòu)建步驟

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

核心特點(diǎn)：

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

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

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

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

• 50+ 現(xiàn)成模塊 — 社交平臺覆蓋層、shader 轉(zhuǎn)場、數(shù)據(jù)圖表、電影感特效，一行命令安裝

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

配合 AI agent（官方推薦）：

npx skills add heygen-com/hyperframes

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

手動起項(xiàng)目：

npx hyperframes init my-video
cd my-video
npx hyperframes preview      # 瀏覽器實(shí)時預(yù)覽，熱更新
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 也有對應(yīng) 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 是持續(xù)秒數(shù)，data-track-index 是軌道編號——視頻、圖片、音頻在時間軸上的關(guān)系一目了然

這就是它能讓 agent 準(zhǔn)確生成視頻的關(guān)鍵：HTML 大模型再熟不過了

調(diào)用 catalog 加現(xiàn)成組件：

npx hyperframes add flash-through-white   # shader 轉(zhuǎn)場
npx hyperframes add instagram-follow      # Ins 關(guān)注覆蓋層
npx hyperframes add data-chart            # 動態(tài)數(shù)據(jù)圖表

跟 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 當(dāng)視頻剪輯師用，自然語言改樣式、加下三分之一、加片尾淡出，全程不用碰代碼

HyperFrames 與 Remotion

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

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

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

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

Remotion 押注 React 組件，HyperFrames 押注 HTML

HyperFrames Remotion

作者寫法

HTML + CSS + GSAP

React 組件（TSX）

構(gòu)建步驟

無， index.html 直接跑

必須，要打包

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

可 seek，幀級精準(zhǔn)

渲染時按墻鐘播放

任意 HTML / CSS 直通

粘貼即可動畫

要重寫成 JSX

分布式渲染

目前單機(jī)

Lambda，生產(chǎn)可用

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

Remotion 是 source-available，代碼在 GitHub 上但用的是自定義 Remotion License，超過小團(tuán)隊(duì)規(guī)模需要付費(fèi)授權(quán)

如果是給 agent 用，HTML 這條路比 React 那條路順得多——大模型生成 HTML 的準(zhǔn)確率遠(yuǎn)高于生成完整 React 項(xiàng)目，加上 HyperFrames 沒有構(gòu)建步驟，agent 寫完文件就能預(yù)覽，反饋鏈路特別短

生態(tài)包

倉庫是個 monorepo，按職責(zé)拆得很清晰：

Package

作用

hyperframes

CLI，create / preview / lint / render

@hyperframes/core

類型、解析器、生成器、linter、運(yùn)行時、frame adapter

@hyperframes/engine

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

@hyperframes/producer

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

@hyperframes/studio

瀏覽器端 composition 編輯器 UI

@hyperframes/player

嵌入式 web component

@hyperframes/shader-transitions

composition 用的 WebGL shader 轉(zhuǎn)場

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

Skill

教 agent 什么

hyperframes

HTML composition 編寫、字幕、TTS、音頻反應(yīng)動畫、轉(zhuǎn)場

hyperframes-cli

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

hyperframes-registry

通過 hyperframes add 安裝區(qū)塊和組件

website-to-hyperframes

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

gsap

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

website-to-hyperframes 這個最騷——把網(wǎng)頁直接變視頻，這是把"內(nèi)容素材搬運(yùn)"的活兒都打包好了。

實(shí)戰(zhàn)：把一篇公眾號文章做成 22 秒解讀視頻

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

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

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

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

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

整個 composition 的核心結(jié)構(gòu)就是一個 HTML 文件，每個場景一個 .scene 塊加 data-start、data-duration 控制時間軸，底下一段 GSAP timeline 控動畫。改文案、調(diào)時長、換配色都是改 HTML，agent 改起來跟改普通網(wǎng)頁沒區(qū)別

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

總結(jié)

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

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

適合誰用：

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

• 已經(jīng)在用 Claude Code / Cursor / Codex，希望把視頻環(huán)節(jié)也接進(jìn) agent 工作流

• 需要確定性、可復(fù)現(xiàn)的渲染，做自動化測試、腳本化產(chǎn)出

• 不想被 Remotion 商業(yè)許可綁住，要純開源協(xié)議的

局限也得說清楚：

• 分布式渲染目前還沒有，Remotion 已經(jīng)有 Lambda 方案

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

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

最大的看點(diǎn)還是 Skills 這條線，也是本文測試等重點(diǎn)

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

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