最後更新：2026/10/15
做知識型影片的人都遇過同一件事：請 AI 生一段「三個步驟的流程圖動畫」，第一次字是歪的，第二次步驟變四個，第三次箭頭方向反了。AI 生影片是「生成」，每次都是重新畫一張，數字、文字、圖表這種要精準的東西，它做不穩。〈用 AI 做知識短影音〉那篇講的流程裡，畫面這一段是最花時間的。
另一條路最近一年越來越多人走：不要讓 AI 生影片，讓 AI 寫「網頁」。畫面用 HTML、CSS 和 JavaScript 排，動畫用網頁的動畫技術做，然後用程式把網頁一格一格截圖、拼成影片。AI 最擅長的輸出就是網頁程式碼，寫一段動畫比畫一段動畫穩定得多；文案錯了改幾個字、顏色不對改一行樣式，不用重生。這篇講這條路上兩個主要的工具 HyperFrames 和 Remotion，以及它們適合誰。
原理：影片是一頁一頁的網頁
網頁本來就會動：按鈕的淡入、區塊的滑入、數字的跳動，這些都是瀏覽器做的動畫。把一支影片想成「十幾個場景的網頁」，每個場景規定從第幾秒演到第幾秒，程式用瀏覽器把每一格畫出來，再交給影片工具編成 MP4。畫面裡的文字是真的文字，圖表是真的圖表，所以不會歪、不會錯字、每次輸出一模一樣。
做不到的也很清楚：真實的影片素材（實拍畫面、照片）它畫不出來，要你自己準備，或接 AI 生圖服務。所以這套方法最適合「講解型」的內容：流程、比較、數據、步驟、字卡，也就是知識型影片最需要的那些畫面。
HyperFrames：用 HTML 寫影片
HyperFrames 是 HeyGen 公司開源的框架，用 Apache 2.0 授權，可以免費商用。每一個場景就是一個 HTML 檔，用標籤的屬性標時間軸（這個元素第 2 秒進、第 5 秒出），動畫可以用 GSAP、CSS、Lottie、Three.js 這些網頁動畫技術，框架負責在無頭瀏覽器裡逐格擷取、用 FFmpeg 編成影片。它附一個命令列工具，建專案、預覽、檢查、輸出都是一行指令，需要 Node.js 22 以上和 FFmpeg。
它和 AI 的搭配很直接：它把「怎麼寫場景」整理成一套給 AI 看的技能文件，你在 Codex 或 Claude Code 這類 AI 工具裡裝上，跟 AI 說「做一支 90 秒介紹某件事的影片」，AI 會問你要給誰看、什麼平台、多長、有哪些素材，然後一個場景一個場景寫出來，自己檢查、自己預覽。我們整理過一位創作者的做法：他先用另一份「追問用」的技能把需求問清楚，鎖定目的、盤點素材、挑表現手法、定視覺主題、收集參考和反例，答案寫成一份文件，HyperFrames 照著文件執行，出片的品質取決於前面想得多清楚。
HyperFrames 還內建配音和字幕的部分：可以接語音合成產生口白、自動對時間產生字幕、加背景音樂和音效、去掉人像背景。所以一支「口播加動畫」的影片，從稿子到成片可以在同一個流程裡做完。
Remotion：用 React 寫影片
Remotion 比 HyperFrames 早，已經有幾萬人在用，原理一樣是用瀏覽器渲染，但寫法是 React 元件。會寫前端的人會覺得它很自然，每個場景是一個元件，時間用「第幾格」算，資料可以從外部傳進來，所以適合「同一個模板、換資料出一百支影片」這種批量的需求，例如每週的數據報告、每個商品的介紹片。
授權要注意：Remotion 對個人、三人以下的營利公司、非營利組織免費，超過的公司要買授權；HyperFrames 是完全開源。公司規模大的要先看清楚。
我們整理的筆記裡，對兩者的比較很實際：AI 寫 HTML 比寫 React 元件穩，HyperFrames 上手快；Remotion 的生態比較大、範例多、適合要寫程式整合的團隊。兩個都用的人是按專案選。
動畫品質怎麼上去
同樣的工具，有人做出像專業動態設計的影片，有人做出像簡報的影片，差別在給 AI 的材料。我們整理過的幾位創作者的經驗一致：
空專案生出來的動畫很普通，因為 AI 從零開始猜。先把官方的技能文件裝進專案、把現成的畫面元件庫（圖表、流程圖、字卡、裝置模擬）放進去，AI 有積木可以用，品質立刻不一樣。
給它風格參考。把你喜歡的影片截圖、品牌的配色和字型整理成一份設計文件放在專案裡，AI 做出來的東西就會照這個風格；沒有參考，每支影片長得都不一樣。
把踩過的坑寫成規則。一位創作者把「每個鏡頭要有視覺重心」「標題要比內文大三倍」「重點不能一次全部湧出來，要跟著口播一個一個出現」「禁止三欄卡片這種一看就是 AI 的版面」這些寫進技能文件，AI 每次都照規則做，不用每次重新提醒。這和〈AI 生成文章封面和插圖〉裡講的「反 AI 視覺指紋」是同一個觀念。
什麼人適合走這條路
適合：固定做知識型、講解型影片的講師、顧問、品牌；需要大量相似影片的電商和媒體；不想出鏡、不想剪片，但有稿子的人。用 HyperFrames 加數位分身（〈AI 配音與數位分身〉）加語音合成，一個人可以做出每週固定產出的頻道，筆記裡那位創作者就是這樣在一個月內做出第一筆商業合作。
不適合：需要實拍畫面、人物表演、情境劇的內容，那是〈AI 漫畫短劇〉那條路；完全不想碰任何程式工具的人，這條路至少要會裝 Node.js、在終端機打指令、看懂 AI 回報的錯誤。
費用方面，工具本身免費或對小團隊免費，要花的是 AI 工具的訂閱（Codex、Claude Code 這類）和語音合成的費用；用本機的開源語音模型可以把配音成本降到零，但要有一台顯卡夠用的電腦，這個取捨在〈在自己電腦跑 AI 繪圖和影片值不值得〉。
怎麼開始
從一支 30 秒的影片開始：挑一段你講過很多次的內容，寫成口播稿，請 AI 用 HyperFrames 做成字卡加流程圖的動畫，自己配音或用語音合成。做完看三件事：字有沒有錯、節奏跟不跟得上口播、風格像不像你。然後把不滿意的地方寫成規則，做第二支。前三支會花很多時間，第四支開始就是流程。
這套東西的價值和〈一支短影音也能變成資產〉講的一樣：模板和規則建好一次，之後每支影片的成本都在降。
如果你想建立一個固定產出影片的流程，並且把影片放在自己的網站上累積（而不是只放在平台上），可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，可以替你規劃影片頁面和課程網站。MIMI 提供台灣網頁設計服務，全台灣的講師和創作者都可以用電話、Email 直接和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
