這兩天打開X，發現一個開源項目刷屏了—— Hyperframes 。GitHub上兩天干了17.4k star，1.6k fork，Codex、Cursor、Claude Code的插件全線覆蓋。

更重要的是，它打開了一條AI生成視頻的新路線，不需要Seedance等視頻大模型，而是用普通的語言模型就能生成可控的視頻內容。直接上我們做的案例，大家看看效果怎么樣。

通過案例可以看出，Hyperframes不是一個AI視頻工具，它更像是給AI Agent量身定、基于 HTML 的視頻渲染框架。它的核心理念特別直白——AI最擅長寫的就是HTML，那為什么不讓AI直接寫HTML來生成視頻？

Hypereframes到底是什么

很多讀者看到HTML，可能聯想到我們最近做的HTML PPT案例集。

但大家千萬不要先入為主這樣想，不然你會認為，這不是Hyperframes做了個PPT錄了個屏，就說自己能做視頻了？！從而很難高看這個項目的未來發展前景。

簡單說，Hyperframes是深圳一家出海數字人企業在2026年4月開發的項目，它未來做的通過代碼、而不是圖像元素構建視頻。

不用碰PR、剪映等剪輯軟件，讓AI寫一個HTML文件就行。

這個HTML文件本身就是完整的視頻——什么時候出現什么畫面、動畫怎么做、背景音樂什么時候響、字幕怎么同步，全部寫在HTML的屬性里。最后一條命令轉成MP4。

底層原理并不復雜。Hyperframes用Puppeteer驅動一個無頭（不用登陸）Chrome，把你的HTML一幀一幀地截取下來，然后通過FFmpeg把這些幀串成視頻，再疊上音頻軌道。輸出的結果是確定性的——同樣的HTML，不管渲染多少次，出來的視頻每一幀都一樣。這對自動化流程來說非常重要，你不會遇到"怎么這次渲染和上次不一樣"的問題。

跟Remotion到底有什么區別

說到HTML生成視頻，繞不開Remotion。Remotion可以說是這個賽道的開創者，用React組件寫視頻。Hyperframes的README也很坦誠地標注了，哪些技術路線是從Remotion學來的，包括Chrome的啟動參數、圖像管道轉FFmpeg流式傳輸、幀緩沖這些底層機制。但兩者在最核心的地方分叉了——你用什么來寫視頻。

Remotion的選擇是React組件。要做一個視頻，得寫TSX文件，意味著你得理解React的組件化思想——每一個畫面是一個組件，每一段動畫是一段邏輯，圖片要import進來，樣式要用styled-components或者內聯style。最后還需要一個構建工具把你寫的東西打包成JS bundle，再丟給Chrome渲染。

這中間多了一層概念轉換：你得先想清楚視頻的結構，然后翻譯成React的組件樹。

Hyperframes的選擇就是純粹的HTML加數據屬性。你打開一個index.html，用data-composition-id定義這是哪個視頻，用data-start和data-duration定義每個片段什么時間出現、持續多久，用data-track-index定義它在哪個軌道上（視頻軌道、圖片軌道、音頻軌道）。

不需要構建工具，不需要打包，在瀏覽器里直接打開就能預覽，預覽的效果跟最終渲染一模一樣。

這個差異對AI來說影響很大。AI寫HTML和CSS的能力在過去一年里已經非常成熟了，你讓任何一個主流代碼模型寫一個帶動畫的網頁，它都能搞定。但如果讓它寫React組件，雖然也能寫，但多了一步概念轉換，出錯概率更高，調試也更麻煩。Hyperframes說白了就是選了一條對AI最友好的路——直接寫瀏覽器最原生理解的東西。

怎么安裝

目前最方便的方式，是在 Codex 里直接安裝官方插件。 方法一：Codex 插件安裝 先安裝 / 打開 Codex： https://chatgpt.com/codex/ 然后在 Codex 插件里搜索： HyperFrames by HeyGen

安裝完成后，在對話框中直接使用： @hyperframes 就可以讓 Codex 調用 HyperFrames 來生成視頻。

方法二：Claude Code / OpenClaw / Cursor 等工具安裝 如果你用的是 Claude Code、OpenClaw、Cursor、Gemini CLI 這一類 AI coding agent，可以用命令安裝 skills： npx skills add heygen-com/hyperframes

GitHub 地址： https://github.com/heygen-com/hyperframes

很明顯hyperframes不適合做AI漫劇等賽道，具體適合做什么，我們來幾個具體的例子。

你可以讓AI把一個GitHub倉庫的README變成一個講解視頻。在Claude Code里說"用/hyperframes看一下這個倉庫 https://github.com/heygen-com/hyperframes，給我做個講解視頻"，它會自己讀README，提取關鍵信息，按時間線組織成視頻腳本，然后生成對應的HTML，最后渲染出視頻。

你可以把一篇文章或者PDF變成一個短視頻。說"用/hyperframes把這篇PDF做成一個45秒的演講視頻"，它會自動摘要內容，配上TTS朗讀和字幕。

你可以把CSV數據變成一個動態圖表比賽視頻。說"用/hyperframes把這組CSV做成一個動畫柱狀圖競賽"，它就能生成一個數據驅動的可視化視頻。

還有一個玩法，我覺得最能體現Hyperframes的思路。

你可以讓AI在視頻里模擬出一個真實的Codex界面，然后在這個界面上演出一系列操作——對話框里實時打字、點擊發送、看到AI生成的PPT展示、切換到全屏播放。所有這些都在一個HTML文件里完成，用CSS動畫和GSAP時間線驅動。最終渲染出來的視頻看起來就像有人真的在操作Codex一樣，但實際上一行剪輯軟件都沒碰。

如何使用：

如果是在codex中使用： @remotion制作鯨格skills的宣傳片，根據"D:\鯨格PPT-full-README.md"這個文檔的內容

Claudecode中使用 /remotion制作鯨格skills的宣傳片，根據"D:\鯨格PPT-full-README.md"這個文檔的內容

視頻質量很依賴提示詞的精度。你描述得越細、越具體，出來的效果越好。但如果你只是說"做個好看的視頻"，那大概率出來的東西很平淡。它不像image2那樣一句話就能炸出一張大片級的畫面，輸出質量的上限取決于你輸入的上限。

一個比較好用的提示詞結構

我建議使用 HyperFrames 時，不要只寫一句話。

可以按下面這個結構來寫：

【風格要求】 整體擬真、高級，接近真實 Codex 產品界面。 界面切換使用平滑漸隱漸現。 所有動效清爽、自然，不要過度炫技。

最后： Hyperframes在這個時間點火起來，不是偶然。過去一年AI代碼能力突飛猛進。模型寫HTML和CSS的基本功已經極其扎實了。但問題在于，AI能寫出很漂亮的網頁，然后呢？網頁的消費場景其實是有限的——不是每個HTML都需要有人去打開看。

Hyperframes相當于給AI的新技能找了一個全新的出口——做視頻。互聯網上對視頻內容的需求遠遠大于對網頁的需求。一條短視頻的播放量可能是一篇文章閱讀量的幾十上百倍。所以這不是一個"用HTML寫視頻"的技術問題，而是一個"讓AI的輸出的內容能找到更大消費場景"的商業邏輯。

當然Hyperframes目前還處在早期，很多東西需要時間和社區去打磨。

未來可能的場景是，它會在非剪輯人群（技術、學生、創業者）中流行開來，這群人本身并不擅長剪輯，也沒有很大的精力去拼接剪輯細碎的內容，正好有一種產出確定、效果OK的視頻模式，于是自己輸入一句話，就輸出一個想要的視頻了。