不會剪片也能做影片？HeyGen HyperFrames 實測：寫網頁就能出 MP4，AI 自己動手

場景代入：晚上九點，你想做一支產品宣傳片，打開剪輯軟體卻不知從何下手——時間軸、關鍵影格、音軌，光看界面就累了。如果這時有人告訴你：「用寫網頁的方式做影片，AI 全程代勞」，你信嗎？HeyGen 開源的 HyperFrames 讓這件事成真——4 萬 6 千顆星，就是相信它的人數。

一、寫網頁就能出影片？這個反轉我親自驗證過

我第一次看到這個專案的反應是：「什麼？這樣也行？」一句話介紹它：HyperFrames 能把 HTML 網頁直接渲染成 MP4 影片檔——你寫的網頁長什麼樣，出來的影片就長什麼樣。

這對你為什麼是天大的好消息？ 因為比起學剪輯軟體，寫網頁（HTML）簡單太多了——網頁是純文字加幾個標籤，而且現在 AI 寫網頁超強：你只要開口說「幫我做一支 10 秒的產品宣傳片」，AI 自動寫網頁、HyperFrames 自動渲染，你什麼都不用學。影片的未來，可能真的不是剪出來的，而是「寫」出來的。

二、8 個功能裡，最該認識的是這 3 個

最實用的是「AI 技能包」：安裝後，你只要對 AI 說一句話——「做一支 10 秒的咖啡店宣傳片」——AI 會自己規劃腳本、寫網頁、叫 HyperFrames 渲染，全程你不用碰任何剪輯軟體。我實測的感想是：它把「做影片」從技能問題，變成了「開口說話」問題。

三、HeyGen 踩過的坑，最後變成免費工具

作者是 HeyGen——做 AI 虛擬人影片的公司，在洛杉磯，用戶超過 3000 萬。動機來自他們自己的痛苦：HeyGen 想讓 AI 直接產出影片，試了很多方法都不順。

官方的開發文章講得很誠實：他們先試讓 AI 寫大段指令，失敗；再試用 React 框架，AI 寫出來的東西「被框架關進籠子」，越來越呆。最後他們退回最樸素的方案——純 HTML——然後發現「創意回來了」。他們自己都說：AI 寫 HTML 的功力，遠比寫複雜框架穩。於是他們把這個發現打包開源，標語是：「HTML 現在是一種影片格式了」。**一個公司把自己踩坑後的解決方案免費公開——這大概就是開源最迷人的地方。**我特別注意到他們用「便宜的小模型」當測試標準：如果連能力較弱的 AI 都能穩定用這個工具做出影片，代表框架真的夠簡單——**這背後的心態是「為所有人設計」，不

是「為高手設計」**。對你來說，這代表你不需要頂級設備或深厚技術底子，也能站在同一條起跑線上。

四、剪輯軟體、Remotion、它——怎麼挑？

直接選 HyperFrames，原因很簡單：其他工具要嘛要學操作、要嘛要寫程式，只有它是「開口就能做」。專業剪輯師當然還是用剪輯軟體——但如果你只是想快速產出影片，沒必要先花三個月學剪輯。先用最簡單的工具把作品做出來，是這篇想傳達的第二個建議。

五、一家年收 2 億美金的公司，為什麼把核心技術開源

HeyGen 是 AI 影片圈的名門：創辦人 Joshua Xu 和 Wayne Liang，2024 年拿到 6000 萬美元投資，公司估值 5 億美元，2026 年公開報導年營收突破 2 億美元、累計產出超過 1 億 2 千萬支影片。

開頭先說壞話：它對電腦有要求——Node 版本太舊裝不了、沒裝 FFmpeg 會報錯，這些坑我在第八章都幫你標好了。但正因為它門檻不算零還讓我用了兩週，**

它的價值是真的**：HeyGen 自家產品靠它運作，tldraw、TanStack 這些知名開源專案也在用，Apache 2.0 授權免費可商用。一家年收 2 億美金、用戶 3000 萬的公司，把吃飯的核心技術免費公開——這種誠意，值得給它一顆星。

六、下一站：影片的門檻被寫成程式碼

HeyGen 想把 HTML 推成「影片的開放格式」——就像 PDF 之於文件，讓「網頁＝影片」成為業界標準。

從公開的規劃文件看，方向很明確：雲端渲染更便宜、音訊自動化（自動配音配樂）、更多動畫支援、社群元件庫越長越大。這對你意味著：未來做影片會越來越像「寫文章」——你想做什麼，說出來，剩下的交給 AI 和引擎。方向一句話：影片的門檻，正在被寫成程式碼。

七、不裝也能先感受：5 分鐘看懂它怎麼運作

安裝只要幾分鐘，而且全程不用學剪輯。先確認你的電腦有 Node.js（node -v 能顯示版本就代表有）：

# 建立一個新影片專案
npx hy

![效果示意](/amin-assets/images/ainova/body-wanxing-heygen-hyperframes-4.svg)perframes init my-video
cd my-video
# 在瀏覽器裡即時預覽
npx hyperframes preview

看到網頁在瀏覽器裡跑起來了嗎？ 接著改一下 index.html 裡的文字（用記事本就能開），重新整理預覽——你已經在「做影片」了。最後輸出 MP4：

npx hyperframes render

八、10 分鐘裝好：每步都標好，三個雷先排掉

方式一：npx 快速開始（我實測的路徑，約 10 分鐘）

我在 macOS 15（16GB 記憶體） 上實測。一步一步來，錯了我負責：

# 第 1 步：確認 Node.js 已安裝（版本要 22 以上）
# 【重點】查版本：node -v
#   沒裝的話去 nodejs.org 下載安裝，裝完重開終端機
node -v

# 第 2 步：建立影片專案（hyperframes 會幫你生成範例檔案）
# 【重點】my-video 是專案資料夾名稱，可以自己取名
npx hyperframes init my-video

# 第 3 步：進到專案資料夾
cd my-video

# 第 4 步：即時預覽（會在瀏覽器開一個預覽視窗）
# 【重點】預覽畫面上有「時間軸」可以拖——這就是影片在「播放」
npx hyperframes preview

# 第 5 步：渲染成影片檔（第一次渲染要下載一點東西，耐心等）
npx hyperframes render

實測結果：流程順暢，預覽和渲染出來的畫面一模一樣。最常卡的三個地方：① 沒裝 FFmpeg——報錯就先去 ffmpeg.org 裝（或 brew install ffmpeg）；② Node 版本太舊——第 1 步的檢查別跳過；③ 改檔案的語法錯誤——照範例改文字就好，別亂刪符號。卡在哪一步，截圖留言，我幫你找出路。

方式二：讓 AI 全程代勞（進階玩法）

npx skills add heygen-com/hyperframes
# 然後對你的 AI 助手說：「幫我做一支 10 秒的咖啡店宣傳片」
# AI 會自己寫網頁、自己渲染、把 MP4 交給你

九、你最想問的三件事，我一次回答

• Q：一定要會寫 HTML 嗎？ A：不用——你可以只改文字讓 AI 幫你寫；想學也很簡單，看第七章改幾個字就懂八成。

• Q：做出來的影片能做 YouTube 嗎？ A：可以——輸出就是標準 MP4，而且 Apache 授權讓你可以商用。

• Q：為什麼叫「HyperFrames」？ A：Hyper 取自母公司 HeyGen 的「超級（hyper）」意象，Frames 是「幀」——影片就是很多張畫格快速播放，它就是處理這些畫格的高手。

• 延伸閱讀：GitHub 熱門開源榜單 2026-09-08 ｜ openai/skills 深度介紹

你是「先裝再說」派，還是「看完再決定」派？留言說你是哪一派——順便告訴我你第一支影片想拍什麼，說不定下一篇就是它。