Hyperframes:貼一個網址,AI 幫你生出產品發布影片

你有沒有這種經驗:產品剛更新,老闆說「拍支發布影片吧」,結果你花了一整天在腳本、配樂、對齊字幕、輸出重 render。HeyGen 的 Hyperframes 剛好戳中這件事——你丟一個網站連結,AI 就自動生出一支產品發布影片。而且它在 2026 年 7 月又推出一波大更新:多了一個叫 Studio 的視覺編輯器,主打「用 vibe-coding 剪片」,甚至能靠「改逐字稿」來剪影片。這篇拆給你看它到底是什麼、新在哪、跟你平常用的 AI 生影片差在哪、以及該怎麼開始。

先講清楚一件容易搞混的事:這個東西叫 Hyperframes,它跟你印象中 HeyGen 那個「做真人 avatar 口播影片」的產品,是兩個完全不同的東西。Hyperframes 是 HeyGen 在 2026 年 5 月推出的一個開源(Apache 2.0)影片生成框架,它的一句話理念是:「Write HTML. Render video. Built for agents.」——用寫 HTML/CSS/JS 的方式產出影片,而且是專門設計給 AI coding agent 用的。

它到底怎麼運作

「網站變影片」是 Hyperframes 裡的一個 skill,叫 /website-to-video。運作方式有兩條路。

第一條路,你把它裝進你的 coding agent——Claude Code、Cursor、Gemini CLI、Codex 都可以,然後下一句白話 prompt。例如:「用 https://linear.app 做一支 20 秒、像 Apple 發表會風格的產品發布影片。」接著它會跑一條 7 步 pipeline:

擷取網站——把截圖、字體、配色、素材抓下來
抽出設計 tokens(顏色、字級、間距這些)
寫策略跟腳本
生成帶字級時間戳的 TTS 旁白
把上面這些組成一份動畫 HTML
render 成 MP4

重點在於它不是「黑盒吐一支影片」,而是把設計語言抽出來、寫成可以看、可以改的 HTML,再 render。也就是說,產出物是程式碼,不滿意可以直接叫 agent 改某一段,而不是整支重生。

第二條路更簡單:HeyGen 有官方託管版 hyperframes.dev,你不用裝任何東西,直接貼網址就能生,而且第一支免費。想先感受一下效果、又懶得配環境的人,從這裡開始最快。

7 月新增:Studio 視覺編輯器,用 vibe-coding 剪片

這是 Hyperframes 這波(2026 年 7 月)最值得講的更新。原本它比較像「下 prompt → 生一支」,現在多了一個叫 Studio 的視覺編輯器,把「生」跟「改」接了起來,標語直接寫 「Edit Videos By Vibe-Coding」。幾個最有感的新能力:

時間軸編輯器:播放頭停在哪,對應的片段就會高亮;軌道跟元素可以非破壞式地隱藏或裁切(改了不會毀掉原素材),還能拖曳重新調整關鍵影格的時間點。等於把「像剪影片一樣的視覺操作」補了進來,不再只能盲改程式碼。
改逐字稿就能剪片(transcript-cut):新接了 Parakeet 這顆 ASR 引擎,先把影片轉成逐字稿,你直接在逐字稿上刪句子、它就把對應畫面剪掉;還有 audio-duck 這種依語音自動壓低背景音樂的工具。對做口白/旁白影片的人,這是省時神器。
3D 透視與畫布關鍵影格:設計面板多了一顆可拖曳的立方體,直接在畫布上調 X／Y／Z 透視並打關鍵影格。
更聰明的素材重用:agent 會用「模糊比對」去重用已經生過的素材,而不是每次都重新生成,順便支援 Figma 匯入。

一句話總結這波:Hyperframes 從「AI 幫你生影片」往前跨到「AI 幫你生 + 你再用視覺化、甚至改逐字稿的方式微調」——生成跟精修終於在同一個地方完成。

跟一般 AI 生影片差在哪

這是最值得講的一段。市面上大多數「AI 生影片」是走 text-to-video 或 image-to-video 的擴散模型路線——你給 prompt,模型「想像」出畫面。好處是天馬行空,壞處是不可控:字打錯了、logo 長歪了、想把某句話晚 0.5 秒出現,你很難精準調,只能一直抽卡。

Hyperframes 走的是完全相反的路:它是 HTML 動態 motion graphics + TTS 旁白。畫面是排版排出來的,不是模型幻想出來的。這帶來幾個實際差別:

可控、可改:每個元素都是 DOM,位置、時間、顏色都能精準對齊,改一個字不用重抽整支。
忠於品牌:它抓的是你網站真實的配色與字體,產出來的影片視覺上跟你的產品是一致的,不會憑空生一套風格。
沒有 avatar:預設沒有真人頭像,輸出就是乾淨的 motion graphics + 旁白。這也再次提醒你——它不是 HeyGen 的 avatar 產品。

下面是它內建的設計模板長相之一,你可以感覺到那種「發表會投影片動起來」的調性:

Hyperframes 設計模板

其他規格上:影片長度自訂,通常落在 10–60 秒;內建 15 種字幕樣式;開源免費、沒有按次收費,你可以在本機(需要 Node.js 22+ 跟 FFmpeg)或自己的雲端 render。對重視資料自主、想大量產出的團隊來說,這點蠻關鍵——成本結構是你自己的機器,不是每支影片被抽一次錢。

誰適合、該怎麼開始

直接說結論:如果你平常就會用 coding agent,這東西幾乎是白撿的。做產品發布片、功能更新短片、landing page 的 hero 影片、社群宣傳片,都很對味。創作者跟獨立開發者尤其適合——你本來就有網站,現在多一個把它變成影片的自動化路徑。

開始的順序建議這樣:

先試託管版:去 hyperframes.dev 貼一個你的網址,用免費那支感受一下輸出品質,決定值不值得深入。
覺得可以就裝 skill:在你的 Claude Code / Cursor 裡裝上 Hyperframes,之後就能一句 prompt 生一支,還能反覆微調 HTML。
要量產再自架 render:把 Node.js 22+ 跟 FFmpeg 環境備好,批次輸出、完全掌控成本。

一個誠實提醒

別把 Hyperframes 想成「一鍵黑盒網頁 App,按一下就有完美大片」。它的真正價值在於「讓 AI agent 用寫程式的方式生影片」——也因此,它最強的地方(可控、可改、可自動化)也需要你稍微懂一點怎麼跟 agent 協作,才吃得到。託管版是很好的試水溫入口,但要把它變成穩定的生產線,還是得走進 agent + 本機 render 那條路。

另外再強調一次,免得期待錯:它不會生出真人 avatar 口播。想要真人講話的那種影片,那是 HeyGen 另一條產品線,不是 Hyperframes。搞清楚這個定位,你就不會用錯工具、也不會失望。

總的來說,Hyperframes 代表的是一個蠻有意思的方向:影片不再只能「生成」,也可以像網頁一樣被「寫」出來、被版本控制、被精準調整。對已經活在 AI agent 工作流裡的人,這是把「產品→影片」這段從一天壓縮到幾分鐘的實用工具。

如果你也想把這類「一句話就跑完一條 pipeline」的 AI 工作流用在自己的內容上,追蹤 @aihub.tw,我會持續把值得動手的工具拆給你看。留言「我要」,我把完整整理私訊給你。