扔掉PPT，用這44個HTML動畫模板，讓AI幫你做科普視頻
整理版優先睇
免費開源HTML動畫模板，AI幫你做科普影片，只要兩步
呢篇文章由一個B站UP主分享，佢為咗簡化科普影片製作，開發咗一套叫AI-Animation-Skill嘅開源工具。傳統科普影片製作鏈路好長：寫稿、做PPT、調動畫、錄屏、剪輯，每一步都要唔同工具同技能。雖然有Gamma、Beautiful.ai呢啲AI PPT工具，但佢哋有中文排版差、SaaS訂閲貴、輸出係PPT唔係動畫、必須聯網等硬傷。呢個UP主嘅方案就完全唔同：佢用44個精調嘅HTML動畫模板，配合AI Agent，令到成個流程縮到得兩步——輸入內容，就自動生成完整動畫HTML，再用瀏覽器打開錄屏就搞掂。
呢個方案嘅核心差異係輸出物係單一HTML檔，瀏覽器可以直接播放動畫，唔使安裝軟件、唔使登入、唔使導出。技術上所有模板都係純前端代碼，零第三方框架依賴，最輕量嘅得331行。44個模板分三類：PPT Level2（26個）專為唔同科普場景設計，Animation流程圖模板（14個）將內容轉化為平面UI流程圖，仲有4個基礎模板做後備。使用嘅時候需要AI Agent環境（例如OpenClaw或WorkBuddy），安裝好技能之後，只要講「幫我生成PPT」或者「生成流程圖」，Agent就會自動選擇合適模板生成HTML。
整體結論係：呢個方案喺「中文科普動畫」呢個垂直場景上有結構性優勢，免費、離線、開源，效率極高。但佢唔適合做品牌演示、實時協作，而且需要AI Agent環境。對於專注做科普或教學影片嘅創作者嚟講，可能係目前…
- 工具鏈由多步縮減到兩步：寫稿 → AI生成HTML → 錄屏，直接跳過做PPT、調動畫、剪輯等繁瑣步驟
- 核心差異係輸出單一HTML檔，瀏覽器直接播動畫，完全本地運行、零成本、離線可用
- 44個模板分三類（PPT Level2、基礎模板、Animation流程圖），覆蓋概念解釋、案例展示、方案對比等科普常見場景
- 需要AI Agent環境（如OpenClaw或WorkBuddy）配合使用，Agent自動分析內容類型並選取最合適模板生成動畫
- 相比Gamma/Beautiful.ai，喺中文支援、動畫質量、可定製性同成本上都有明顯優勢，但唔適合品牌演示同實時協作
AI-Animation-Skill
44個HTML動畫模板，配合AI Agent生成科普影片，MIT開源協議
傳統科普影片製作嘅樽頸
傳統科普影片製作鏈路好長：寫稿→做PPT→調動畫→錄屏→剪輯。每一步都要唔同工具同技能，尤其係PPT動畫，關鍵幀時間軸、緩動函數、入場出場順序，搞一個位就要幾十分鐘。
Gamma、Beautiful.ai呢啲AI PPT工具雖然快，但中文排版差、SaaS訂閲貴、輸出係PPT唔係動畫、必須聯網，好多硬傷。
AI-Animation-Skill嘅核心差異
呢個方案嘅核心差異得一個：輸出物係單一HTML檔。HTML意味住瀏覽器直接打開就睇到完整動畫效果，唔使裝軟件、唔使登入、唔使導出。打開瀏覽器按F11全屏，開錄屏軟件就得。
技術上44個模板全部係純前端代碼，零第三方框架依賴，最輕量嘅得331行，最密集嘅有30組VS對比動畫。
44個模板點樣分類
44個模板分三類，每一類解決唔同場景嘅需求：
- PPT Level2（26個）：最核心嘅資產，分成9個系列，涵蓋概念引入、定義、案例、警示、護欄、辯論、總結等場景。例如系列1用VS對比卡片加SVG流程圖，系列3最輕量得331行。
- PPT基礎模板（4個）：當Level2唔適用時做回退，其中PPT-Generate-3視覺效果最好。
- Animation流程圖模板（14個）：將內容轉化為平面UI風格流程圖，針對LSTM、word2vec、GPU等技術概念做咗深度優化。
呢9個系列基本覆蓋咗科普影片常見嘅內容結構：概念解釋、案例展示、問題分析、方案對比、總結提煉。
點樣實際使用
前置條件係要有個AI Agent環境，因為AI-Animation-Skill係提示詞模板集，唔係獨立軟件。目前支援OpenClaw（龍蝦）、WorkBuddy（騰訊版）、QClaw、摩爾線程AIBOOK。以WorkBuddy為例，安裝三步搞掂：下載源碼、複製到skills目錄、重啟。
- 1 模式一：PPT演示生成——輸入內容，講「幫我生成PPT」，Agent會分析內容類型，從26個Level2模板揀最合適嘅生成HTML。
- 2 模式二：流程圖生成——喺模式一之後講「生成流程圖」，Agent會從14個Animation模板揀合適嘅重構。兩種模式可以組合用。
唔使你講用邊個模板、唔使手動調參數，全部自動化。
同主流工具嘅真實對比
同Gamma、Beautiful.ai相比，AI-Animation-Skill喺「中文科普動畫」呢個垂直場景上有結構性優勢。
價格上完全免費（MIT開源），而Gamma去水印要$8/月，Beautiful.ai Pro要$45/月。
中文支援方面，佢嘅模板係為中文內容設計，Gamma機翻痕跡明顯，Beautiful.ai冇明確中文支援。
輸出格式係單HTML檔可以直接錄製，而Gamma輸出PDF/PPTX/網頁，Beautiful.ai輸出PDF/PPTX。動畫質量方面，呢度用CSS原生動畫加3D Transform，比基於網頁嘅過渡效果更豐富。可定製性上完全開源隨便改代碼，其他工具限制較多。
一個B站UP主將科普片嘅製作工具鏈縮到得兩步。
唔係概念驗證——GitHub上開源嘅 AI-Animation-Skill 已經運行咗幾個月，B站教程播放量14.2萬，背後有44個精心調整嘅HTML動畫模板同一套完全本地化嘅工作流程。
呢件事值得拆開嚟睇。佢嘅技術路徑同 Gamma、Beautiful.ai 呢啲主流方案完全唔同。
科普片製作嘅工具鏈有幾長
傳統嘅科普片製作流程：
寫稿 → 做PPT → 整動畫 → 錄畫面 → 剪輯
每一步都需要唔同嘅工具同技能。PPT動畫唔係隨便拉幾個元素就有效果㗎，關鍵幀時間軸、緩動函數、入場出場順序，搞掂一個都要幾十分鐘。
Gamma、Beautiful.ai 呢啲 AI PPT 工具的確將製作時間壓縮咗。實測 Gamma 45秒就能生成一份完整嘅演示文稿，Beautiful.ai 嘅智能排版都可以自動調整佈局。
但佢哋有幾個硬傷：
中文排版質量差。呢啲工具嘅主要用戶係英文用戶，中文字體、行距、段落節奏嘅優化幾乎等於零。長文科普內容放落去，出嚟嘅效果好似將中文硬塞入一個英文設計模板咁。
全部都係SaaS訂閲制。Gamma 免費版每月400積分（約10份演示），去水印要 $8/月；Beautiful.ai 冇免費版，Pro $45/月，團隊版 $144/年/人。長期用嘅成本唔低。
輸出係PPT，唔係動畫。佢哋生成嘅本質仲係幻燈片，唔係可以直接用嚟錄製影片嘅動畫檔案。你要得到可以播放嘅動畫效果，仲要另外錄畫面。
一定要聯網。所有計算都喺雲端，斷咗網就做唔到嘢。
AI-Animation-Skill 行咗完全唔同嘅路線。
佢做咗啲咩唔同嘅事
核心差異得一個：輸出係單個HTML檔案。
HTML 檔案代表：瀏覽器直接打開就可以睇到完整嘅動畫效果，唔使安裝任何軟件，唔使登入任何帳號，唔使匯出。你見到嘅就係最終效果。打開瀏覽器，㩒F11全螢幕，開錄製軟件，錄完就得——由HTML到影片嘅轉換只需要呢一步。
技術上，44個模板全部係純前端代碼，零第三方框架依賴。最輕量嘅一個模板得331行代碼，最密集嘅包含30組VS對比動畫——全部都係自己寫嘅，冇 call 任何外部庫。
呢個技術選擇帶嚟嘅直接結果：
- 本地執行，
唔使網絡，唔使 API 密鑰 - 零成本，
MIT開源協議，啲代碼隨便改 - 單檔案輸出
——一個HTML檔案包含所有樣式同邏輯，send俾人直接睇得 跨平台，Chrome、Firefox、Safari、Edge 都行到
44個模板到底有啲咩
44個模板分三類，每一類解決唔同嘅場景需求。
PPT Level2（26個）
呢個係項目最核心嘅資產。26個模板分成9個系列，每個系列針對特定類型嘅內容做咗最佳化：
科普片常見嘅內容結構——概念解釋、案例展示、問題分析、方案對比、總結提煉——呢9個系列基本上全部覆蓋曬。
PPT基礎模板（4個）
4個通用基礎模板，當 Level2 唔適用嘅時候作為後備選項。其中 PPT-Generate-3 視覺效果最好，適合大多數通用場合。
Animation流程圖模板（14個）
呢套模板將科普內容轉化成平面UI風格嘅流程圖動畫。預設用 RNN-3（分層卡片），其他模板針對特定技術概念做咗深度最佳化：LSTM-1 專門展示LSTM嘅三階段門控機制，word2vec-1 展示詞向量嘅語義身份證概念，GPU 模板展示計算節點架構。
實際點樣用
前置條件：你要有一個 AI Agent 環境。AI-Animation-Skill 本身係提示詞模板集，唔係獨立軟件——佢需要配合 AI Agent 去執行「理解文本 → 揀模板 → 生成HTML」呢個過程。
目前支援嘅平台：
- OpenClaw
（龍蝦）——開源社區版 - WorkBuddy
（騰訊版） - QClaw
- 摩爾線程AIBOOK
（國產GPU平台）
安裝
用 WorkBuddy 做例子，三步搞掂：
第一步：下載項目原始碼
git clone https://github.com/Unclecheng-li/AI-Animation-Skill.git
備註：亦可以手動下載項目壓縮包到本機
第二步：複製到 skills 目錄
將 AI-Animation-Skill 將資料夾複製到 ~/.workbuddy/skills/ 目錄下面。
第三步：重新啟動 WorkBuddy
重啟之後，Agent 會自動認到呢個 Skill。
如果你用緊 OpenClaw，可以經 ClawHub 一鍵安裝，唔使手動操作。
生成科普動畫
安裝完成之後，使用流程非常簡單。
模式一：PPT演示生成
喺對話中輸入你嘅科普內容，同 Agent 講「幫我生成PPT」。Agent 會自動做三件事：
分析內容類型，由26個Level2模板中揀最合適嘅一個 生成基礎HTML結構 用選定模板重構，輸出完整嘅動畫HTML檔案
你唔需要話畀佢知用邊個模板，唔需要手動調整參數，唔需要做任何技術決定。
模式二：流程圖生成
喺模式一做咗之後，如果你想將同一段內容轉化為平面UI風格嘅流程圖動畫，只需講一句「生成流程圖」。Agent 會自動由14個Animation模板中揀合適嘅進行重構。
兩種模式可以組合使用：先整PPT版用嚟完整展示，再整流程圖版用嚟快速回顧。
由HTML到影片
生成嘅HTML檔案直接用瀏覽器打開，全螢幕之後用任何錄製工具錄製就得。
OBS（免費）、Windows內置錄製（Win+G）、瀏覽器插件錄製，隨便揀一個。HTML嘅動畫係確定性嘅——每次打開效果完全一樣，冇「錄嘅時候動畫播得唔好」嘅問題。
同主流AI PPT工具嘅真實對比
呢張表嘅核心資訊：AI-Animation-Skill 喺「中文科普動畫」呢個垂直場景上有結構性優勢。佢嘅模板就係為呢個場景設計，唔係為覆蓋所有場景而做嘅通用工具。
佢嘅限制喺邊
需要講清楚嘅唔只係做得到咩，仲有做唔到咩。
唔適合做品牌演示。模板風格偏向技術科普嘅簡潔風，如果你需要企業級嘅品牌管控（鎖定Logo、字體、配色），Beautiful.ai 嘅品牌套件做得更好。
唔適合做即時協作。AI-Animation-Skill 係單人工作流程，唔支援多人同時編輯。Gamma 同 Beautiful.ai 都有即時協作功能。
需要AI Agent環境。佢唔係一個獨立軟件，必須配合 OpenClaw、WorkBuddy 等 AI Agent 使用。如果你仲未有呢啲環境，需要先搞掂呢一步。
模板有限。44個模板對科普場景嚟講夠用，但如果你要做營銷影片、產品宣傳片、品牌廣告，模板儲備唔夠。
最後一件事
AI-Animation-Skill 做咗一個取捨：用純前端HTML取代PPT/After Effects作為動畫輸出格式，用AI Agent取代手動調整參數作為製作流程。
呢個選擇犧牲咗通用性（只能做科普/教學類內容），換嚟垂直場景下嘅極端效率（兩步出成品）同零成本（開源免費、本地執行）。Gamma 同 Beautiful.ai 解決嘅係唔同嘅問題，兩者可以並存。但喺「中文科普動畫」呢個具體場景下，AI-Animation-Skill 可能就係目前最好嘅方案。
GitHub地址：
https://github.com/Unclecheng-li/AI-Animation-Skill
MIT 協議，隨便用。
往期PPT agent資源
一個B站UP主把科普視頻製作的工具鏈砍到了兩步。
不是什麼概念驗證——GitHub上開源的 AI-Animation-Skill 已經跑了幾個月，B站教程播放量14.2萬，背後是44個精調的HTML動畫模板和一套完全本地化的工作流。
這件事值得拆開來看。它的技術路徑和 Gamma、Beautiful.ai 這些主流方案完全不同。
科普視頻製作的工具鏈有多長
傳統的科普視頻製作鏈路：
寫稿 → 做PPT → 調動畫 → 錄屏 → 剪輯
每一步都需要不同的工具和技能。PPT動畫不是隨便拖幾個元素就能出效果的，關鍵幀時間軸、緩動函數、入場出場順序，隨便一個做到位都要幾十分鐘。
Gamma、Beautiful.ai 這些 AI PPT 工具確實把製作時間壓縮了。實測 Gamma 45秒就能生成一份完整演示文稿，Beautiful.ai 的智能排版也能自動調整佈局。
但它們有幾個硬傷：
中文排版質量差。這些工具的核心用戶羣是英文用戶，中文字體、行間距、段落節奏的調優幾乎為零。長文科普內容放進去，出來的東西像把中文強行塞進了一個英文設計模板。
全部是SaaS訂閲制。Gamma 免費版每月400積分（約10份演示），去水印要 $8/月；Beautiful.ai 沒有免費版，Pro $45/月，團隊版 $144/年/人。長期使用成本不低。
輸出是PPT，不是動畫。它們生成的本質還是幻燈片，不是可以直接用於視頻錄製的動畫文件。你要得到可播放的動畫效果，還需要額外錄屏。
必須聯網。所有計算都在雲端，斷網就罷工。
AI-Animation-Skill 走了完全不同的路線。
它做了什麼不同的事
核心差異就一個：輸出物是單個HTML文件。
HTML 文件意味着：瀏覽器直接打開就能看到完整的動畫效果，不需要安裝任何軟件，不需要登錄任何賬號，不需要導出。你看到的就是最終效果。打開瀏覽器，按F11全屏，打開錄屏軟件，錄製完成——從HTML到視頻的轉換隻需要這一步。
技術上，44個模板全部是純前端代碼，零第三方框架依賴。最輕量的一個模板只有331行代碼，最密集的包含30組VS對比動畫——全部自己寫的，沒有調用任何外部庫。
這個技術選擇帶來的直接結果：
- 本地運行，
不需要網絡，不需要API密鑰 - 零成本，
MIT開源協議，代碼隨便改 - 單文件輸出
——一個HTML文件包含所有樣式和邏輯，發給別人直接能看 跨平台，Chrome、Firefox、Safari、Edge 都能跑
44個模板到底有什麼
44個模板分三類，每一類解決不同的場景需求。
PPT Level2（26個）
這是項目最核心的資產。26個模板分成9個系列，每個系列針對特定類型的內容做了優化：
科普視頻常見的內容結構——概念解釋、案例展示、問題分析、方案對比、總結提煉——這9個系列基本全覆蓋了。
PPT基礎模板（4個）
4個通用基礎模板，在Level2不適用時作為回退選項。其中 PPT-Generate-3 視覺效果最好，適合大多數通用場景。
Animation流程圖模板（14個）
這套模板把科普內容轉化為平面UI風格的流程圖動畫。默認使用 RNN-3（分層卡片），其它模板針對特定技術概念做了深度優化：LSTM-1 專門展示LSTM的三階段門控機制，word2vec-1 展示詞向量的語義身份證概念，GPU 模板展示計算節點架構。
實際怎麼用
前置條件：你需要一個 AI Agent 環境。AI-Animation-Skill 本身是提示詞模板集，不是獨立軟件——它需要配合 AI Agent 來執行"理解文本 → 選擇模板 → 生成HTML"這個過程。
目前支持的平台：
- OpenClaw
（龍蝦）——開源社區版 - WorkBuddy
（騰訊版） - QClaw
- 摩爾線程AIBOOK
（國產GPU平台）
安裝
以 WorkBuddy 為例，三步完成：
第一步：下載項目源碼
git clone https://github.com/Unclecheng-li/AI-Animation-Skill.git
備註：也可以手動下載項目壓縮包到本地
第二步：複製到 skills 目錄
將 AI-Animation-Skill 文件夾複製到 ~/.workbuddy/skills/ 目錄下。
第三步：重啓 WorkBuddy
重啓後，Agent 會自動識別這個 Skill。
如果你用的是 OpenClaw，可以通過 ClawHub 一鍵安裝，不需要手動操作。
生成科普動畫
安裝完成後，使用流程極其簡單。
模式一：PPT演示生成
在對話中輸入你的科普內容，告訴 Agent "幫我生成PPT"。Agent 會自動完成三件事：
分析內容類型，從26個Level2模板中選擇最合適的一個 生成基礎HTML結構 用選定模板重構，輸出完整的動畫HTML文件
你不需要告訴它用哪個模板，不需要手動調整參數，不需要做任何技術決策。
模式二：流程圖生成
在模式一完成之後，如果你想把同樣的內容轉化為平面UI風格的流程圖動畫，只需要說一句"生成流程圖"。Agent 會自動從14個Animation模板中選擇合適的進行重構。
兩種模式可以組合使用：先生成PPT版本用於完整展示，再生成流程圖版本用於快速回顧。
從HTML到視頻
生成的HTML文件直接用瀏覽器打開，全屏後用任何錄屏工具錄製即可。
OBS（免費）、Windows自帶錄屏（Win+G）、瀏覽器插件錄屏，隨便選一個。HTML的動畫是確定性的——每次打開效果完全一致，不存在"錄的時候動畫沒播好"的問題。
和主流AI PPT工具的真實對比
這張表的核心信息：AI-Animation-Skill 在"中文科普動畫"這個垂直場景上有結構性優勢。它的模板就是為這個場景設計的，不是為了覆蓋所有場景而做的通用工具。
它的邊界在哪
需要說清楚的不只是能做什麼，還有不能做什麼。
不適合做品牌演示。模板風格偏向技術科普的簡潔風，如果你需要企業級的品牌管控（鎖定Logo、字體、配色），Beautiful.ai 的品牌套件做得更好。
不適合做實時協作。AI-Animation-Skill 是單人工作流，不支持多人同時編輯。Gamma 和 Beautiful.ai 都有實時協作功能。
需要AI Agent環境。它不是一個獨立軟件，必須配合 OpenClaw、WorkBuddy 等 AI Agent 使用。如果你還沒有這些環境，需要先搞定這一步。
模板有限。44個模板對科普場景來說夠用了，但如果你要做營銷視頻、產品宣傳片、品牌廣告，模板儲備不夠。
最後一件事
AI-Animation-Skill 做了一個取捨：用純前端HTML替代PPT/After Effects作為動畫輸出格式，用AI Agent替代手動調參作為製作流程。
這個選擇犧牲了通用性（只能做科普/教學類內容），換來了垂直場景下的極端效率（兩步出成品）和零成本（開源免費、本地運行）。Gamma 和 Beautiful.ai 解決的是不同的問題，兩者可以並存。但在"中文科普動畫"這個具體場景下，AI-Animation-Skill 可能就是目前最好的方案。
GitHub地址：
https://github.com/Unclecheng-li/AI-Animation-Skill
MIT 協議，隨便用。
往期PPT agent資源