ppt2video-skills：把口播文案變成動畫視頻 PPT，AI 幫你全自動編排
整理版優先睇
ppt2video-skills：AI幫你將口播文案自動變成動畫影片PPT
作者係一位內容創作者，親身經歷過寫好口播文案後仲要花大量時間排版、做動畫嘅痛苦。佢發現市面上嘅影片工具一係太複雜，一係太死板，令到好多創作者喺「做畫面」呢步卡住咗。為咗解決呢個問題，佢整理咗呢個 AI Agent 技能「ppt2video-skills」，目標係將「文案→影片PPT」呢個流程變成一次對話完成嘅任務。
呢套技能嘅核心係一套四步流水線：先由AI拆解文案成PPT結構，輸出確認稿畀你用家把關；然後揀選視覺主題（預設4套風格）；最後每頁生成獨立HTML檔案，內建GSAP動畫同HyperFrames兼容結構。作者強調呢個流程唔係黑盒全自動，而係人機協同——你只需要確認結構同揀主題，其餘畫面呈現交畀AI。
技術底層用咗 HyperFrames（用HTML做影片嘅開源框架）同 GSAP 動畫庫，輸出嘅HTML可以後續渲染成MP4。目前呢個技能需要喺 Claude Code 或相容嘅AI Agent環境執行，預設輸出豎屏1080×1440，最多4套主題。作者認為呢個係影片內容創作第三次革新嘅具體產品：第一次係智能電話普及，第二次係剪映呢類工具普及，第三次就係AI介入內容製作嘅中台環節。
- 核心價值：將「做影片PPT」由需要設計技能嘅馬拉松，變成可以對話完成嘅任務，內容創作者只需專註文案本身。
- 四步流水線：拆結構→用戶確認→選主題→生成scene，每一步都有明確輸入輸出，確保人機協同而非黑箱操作。
- 技術基礎：用HyperFrames將HTML渲染成影片，每頁scene用GSAP做3-6個入場動作（opacity/x/y/scale），保證渲染穩定。
- 主題機制：唔係用配置文件，而係AI先讀真實HTML示例提取風格規則，再按規則生成新頁面，示例越多質量越穩定。
- 適用邊界：依賴AI Agent環境（Claude Code等）、目前4套主題、預設豎屏、輸出HTML需另行渲染成MP4；適合知識博主、課程講師、自媒體創作者快速出片。
ppt2video-skills GitHub 倉庫
安裝方法：git clone ~/.claude/skills/ppt2video-skills，或直接叫AI Agent幫手安裝。
佢解決咗咩核心痛點
做影片PPT呢件事，到底難喺邊？作者拆咗四關：文案到畫面轉換、排版與視覺呈現、動畫與節奏、輸出與渲染。大部分創作者喺第二關已經放棄。
第一關：文案到畫面嘅轉換——邊度開新頁？邊句做標題？呢啲判斷依賴敍事邏輯感，唔係人人都有。
第二關：排版與視覺呈現——模板幫到一部分，但一旦想跳出模板，難度陡增。
第三關：動畫與節奏——文字點入場？幾時切換？動畫節奏對口播嘅配合，呢個已經係專業動效設計師嘅領域。
第四關：輸出與渲染——傳統做法要用剪輯軟件重新拼，或者用PPT錄製功能，質素同效率都打折扣。
從文案到影片：四步流水線
整套流程分四步，每一步都有明確嘅輸入同產出。作者強調呢個唔係黑盒全自動，而係人機協同——你嘅確認係關鍵一環。
第一步：拆結構——AI將文案按敍事邏輯拆成PPT頁，輸出結構確認稿（structure-proposal.md），包含建議頁數、每頁主題、對應原文範圍同拆分理由。
第二步：用戶確認——你睇完結構稿後可以調整，例如合併、拆分、加減內容。改完確認後先進入下一步。
第三步：選主題——預置4套主題（雜誌風/瑞士風/手繪白板/極簡發佈），揀選後AI會讀取該主題嘅3-5個真實HTML示例，總結風格語法再生成新頁面。
第四步：生成scene——每頁PPT生成一個獨立HTML檔案，固定畫布1080×1440，內嵌GSAP動畫時間線（3-6個入場動作）同HyperFrames兼容結構。
- 1 產出配套文件：script.txt（每行對應一頁口播文案）、outline.md（每頁主題與目的）、subtitle-scene-map.md（腳本行與scene編號映射）、scene-design-plan.md（每頁設計思路）
- 2 安全機制：禁止無限循環動畫、禁止複雜透明疊加、避免使用backdrop-filter等渲染不穩定嘅CSS特性
技術基礎：HyperFrames + GSAP
輸出係HTML，但呢個唔係普通網頁——係可以渲染成影片嘅畫面。作者用咗HyperFrames呢個開源框架，核心思路係用HTML+CSS+JavaScript描述影片畫面然後渲染成影片檔案。呢種做法叫「聲明式影片」，好處係可編程、可版本控制、可精確到毫秒。
GSAP動畫：每頁用3-6個入場動作就夠，以opacity/x/y/scale為主，呢啲屬性渲染性能最好。
主題機制：先讀真實HTML示例提取規則，再按規則生成新頁面——示例越多，質素越穩定。主題唔係配置文件，而係一組真實HTML示例。
產出物一覽：
scene-01.html ~ scene-NN.html (每頁影片畫面HTML)
script.txt (每行對應一頁口播文案)
outline.md (每頁主題與目的)
subtitle-scene-map.md (腳本行 ↔ scene編號映射)
scene-design-plan.md (每頁設計思路)
structure-proposal.md (結構確認稿保留備查)上手實操：完整流程演示
用一個簡化例子行一次。假設你輸入嘅口播文案開頭係：「很多人覺得做影片好難，但其實只需要三步。第一步，想清楚你要講咩。第二步，寫低嚟。第三步，講畀人聽。就咁簡單。」
第一步輸出：結構確認稿建議5頁——開場鈎子、原因分析、核心方法第一步、第二三步合併、總結金句。
用戶確認：你話「第4頁內容太多，拆成兩頁」，技能調整後先進入下一步。
選主題：揀咗guizang-swiss-demo（瑞士風），AI讀取主題示例後總結風格規則：黑白配色為主、少量藍色強調、網格佈局、無襯線字體。
- 最終產出5個scene HTML、script.txt、outline.md、subtitle-scene-map.md、scene-design-plan.md、structure-proposal.md
- 每個scene打開可見到動畫畫面：標題滑入、正文漸顯、元素依次入場。全程只係對話中確認結構同揀主題就完成。
適用場景與邊界
誰最啱用？作者列出咗幾個場景同推薦程度，由最高嘅知識博主、課程講師，到產品團隊同個人創作者都啱。核心優勢係可控、可編輯、渲染穩定、主題化、無需設計基礎。
可控：每一頁scene係獨立HTML檔案，可以單獨打開修改，唔使喺剪輯軟件重新拼。
可編輯：識少少HTML可以直接改文字、顏色、動畫時長，唔需要專業影片編輯技能。
主題化：預置4套風格，而且主題係「可閲讀嘅HTML示例」而非配置文件，可以不斷擴展主題庫。
你有冇試過咁嘅情況——
花咗兩個鐘寫好一篇口播文案，然後對住空白編輯器發愁：整成視頻PPT仲要再花兩個鐘排版、調整動畫、配節奏。文案寫得好係一回事，但將佢變成睇得到嘅畫面又係另一回事。
仲衰嘅係，大部分視頻PPT工具一係太複雜（專業剪輯軟件），一係太死板（套模板做到一式一樣）。你想做嘅係「有自己風格嘅視覺呈現」，但時間同技能都唔夠。
所以就有咗 ppt2video-skills。
呢個AI Agent技能可以幫你喺對話入面完成「文案→視頻PPT」嘅成個流程。你提供口播文案，佢會自動拆成PPT頁、生成結構稿等你確認、俾你揀視覺主題，然後輸出一套帶GSAP動畫嘅HTML視頻畫面。
呢篇文章會拆解佢嘅一切：解決咩問題、點樣運作、技術底子係咩、實際用起嚟效果點樣。
PART 01｜佢解決咗咩核心痛點
首先諗一個問題：做視頻PPT呢件事，到底難喺邊？
第一關：文案到畫面嘅轉換。 你有一段口播文案，但佢唔係PPT結構。邊度應該開新一頁？邊度應該合併？邊句適合做標題？邊段適合做金句？呢啲判斷依賴敍事邏輯感——唔係人人都具備。
第二關：排版同視覺呈現。 確定頁結構之後，每一頁點樣排？標題擺邊？配咩圖？用咩顏色？用咩字體？呢一關將絕大部分內容創作者擋喺門外。模板可以解決一部分，但一諗住跳出模板，難度就急升。
第三關：動畫同節奏。 視頻PPT同靜態PPT最大嘅分別係「動」。文字點樣入場？幾時切換？每頁停留幾耐？動畫節奏點樣配合口播——呢個已經係專業動效設計師嘅領域。
第四關：輸出同渲染。 做好咗之後仲要導出成視頻。傳統做法係喺剪輯軟件入面重新拼一次，或者用PPT自帶嘅錄製功能——質量同效率都大打折扣。
ppt2video-skills 將所有四關串成一條自動化流水線。
佢嘅定位好明確：等內容創作者淨係關心文案本身，畫面呈現交俾AI。
佢唔係一個獨立軟件，而係一個AI Agent技能（Skill）。佢運行喺AI Agent環境（Claude Code或兼容嘅Agent框架）入面，你透過對話嚟驅動佢。你話「我有一篇口播文案，幫我整成視頻PPT」，佢就會開始做嘢。
核心價值可以濃縮做一句話：將「做視頻PPT」呢件事，由一場需要設計技能嘅馬拉松，變做一次可以對話完成嘅任務。
PART 02｜由文案到視頻：四步流水線
成個流程分四步行，每一步都有明確嘅輸入同產出。
第一步：拆結構——等AI讀明你篇文案
收到口播文案之後，技能唔做其他嘢，先讀文案。
佢會將文案按敍事邏輯拆成PPT頁。但唔係就咁按段落切——佢會判斷每一段嘅敍事角色：
• 呢個係開場鈎子？→ 適合獨立成頁，做大標題 • 呢個係論證過程？→ 可能分2-3頁，每頁講一個要點 • 呢個係金句/結論？→ 單獨一頁，強調輸出
拆完之後輸出一份 結構確認稿（structure-proposal.md），包含：
• 建議拆成幾多頁 • 每頁嘅主題 • 每頁對應嘅原文範圍 • 拆分理由
呢份確認稿就係第一階段嘅產出。
第二步：用戶確認——人同AI協同
結構確認稿推俾你睇，你確認或者調整。
呢個係成個流程最關鍵嘅設計。佢唔係黑盒全自動——AI拆嘅結構唔一定完美，需要你嚟把關。
你可以話「第3頁同第4頁合併」、「第5頁拆成兩頁」、「俾第2頁加一句話」。改完確認之後，技能先會進入下一步。
第三步：揀主題——決定視覺風格
確認完頁結構之後，你需要揀一套視覺主題。技能預置咗4套主題，展示俾你預覽：
| guizang-magazine-demo | ||
| guizang-swiss-demo | ||
| handdrawn-whiteboard-demo | ||
| launch-minimal-demo |
揀好主題之後，技能會先讀取該主題目錄下面嘅3-5個真實HTML示例，總結佢嘅風格語法——背景點樣處理、標題層級點樣用、顏色角色點樣分配——然後先生成新頁面。
呢個係「先睇示例再創作」嘅設計，保證產出風格統一，而唔係AI憑空想像出嚟嘅畫面。
第四步：生成scene——每頁一個獨立HTML
最後一步，技能為每一頁PPT生成一個獨立嘅HTML文件，稱為一個「scene」。
每頁scene嘅結構：
• 固定畫布尺寸（預設1080×1440豎屏） • GSAP動畫時間線（3-6個入場動作，以opacity / x / y / scale為主） • HyperFrames兼容結構（可被視頻渲染框架識別） • 內嵌安全機制：禁止無限循環、禁止複雜透明疊加
同時產出嘅配套文件：
• script.txt：每行對應一頁嘅口播文案 • outline.md：每頁嘅主題同目的 • subtitle-scene-map.md：腳本行同scene編號嘅映射 • scene-design-plan.md：每頁嘅設計思路說明
成條流水線嘅價值唔在於某一項技術有幾強，而係每一步之間無縫銜接——文案入，一套完整嘅視頻PPT素材出。
PART 03｜技術基礎：HyperFrames + GSAP
ppt2video-skills 嘅輸出係HTML，但呢個唔係普通嘅網頁——佢係可以被渲染成視頻嘅視頻畫面。
HyperFrames：用HTML做視頻
HyperFrames 係一個開源框架，佢嘅核心思路係：用HTML + CSS + JavaScript嚟描述視頻畫面，然後渲染成視頻文件。
每一頁scene係一個獨立嘅HTML文件，包含固定尺寸嘅畫布、視覺內容同動畫時間線。HyperFrames框架可以識別呢啲HTML，按時間線播放並錄製成視頻。
呢個喺業界被稱為「聲明式視頻」——你聲明每一幀係點樣，框架負責將佢變做視頻。好處係：可編程、可版本控制、可以精確到毫秒。
GSAP動畫
每一頁嘅動畫使用GSAP（GreenSock Animation Platform）驅動。GSAP係業界最成熟嘅Web動畫庫之一，相比CSS animation更可控，相比手寫JavaScript動畫更高效。
每頁嘅動畫設計原則：
• 3-6個入場動作就夠，唔需要花巧 • 以opacity / x / y / scale為主，呢啲屬性渲染性能最好 • 先寫靜態畫面，再加動畫——確保最終畫面正確，動畫只負責「點樣出現」 • 禁止repeat: -1——視頻PPT唔需要無限循環
一條典型嘅時間線：標題由下方滑入（y: 100 → 0），正文漸顯（opacity: 0 → 1），裝飾元素依次入場。每頁4-8秒，配合同步口播。
主題機制：先睇示例再創作
主題系統係ppt2video-skills最有特色嘅設計。
佢唔係等AI憑空「設計」風格，而係等AI先讀真實主題HTML，提取風格規則，再按規則生成新頁面。
工作流：
1. 技能讀取所選主題目錄下面嘅3-5個scene HTML 2. 提取背景處理、顏色角色、標題層級、佈局模式、動畫節奏 3. 將呢啲規則套用到新頁面嘅生成當中
呢個意味住：主題目錄入面嘅示例越多，AI生成嘅質量越穩定。主題唔係一個配置文件，而係一組真實HTML示例——AI透過閲讀佢哋嚟理解你想要嘅風格。
渲染安全：點解唔用複雜CSS
視頻渲染引擎對CSS嘅支援度不如瀏覽器。一啲喺瀏覽器入面正常嘅效果，喺渲染時可能會漏幀、錯位或者唔顯示。
禁止使用嘅CSS特性：
• backdrop-filter— 視頻渲染器唔支援• mix-blend-mode— 混合模式喺渲染時唔可預測• filter: blur()— 多層模糊會嚴重拖慢渲染• 多層透明疊加 — 渲染順序容易出錯
推薦嘅樣式策略： 實色背景、簡單漸變、高對比文字、輕量邊框同單層陰影。
呢個都係ppt2video-skills嘅設計哲學之一：寧願設計上節制啲，都要保證渲染穩定。
產出物一覽
scene-01.htmlscene-NN.html | |
script.txt | |
outline.md | |
subtitle-scene-map.md | |
scene-design-plan.md | |
structure-proposal.md |
每個文件都有明確用途，組成一套完整嘅視頻PPT製作素材包。
PART 04｜上手實操：完整流程演示
下面用一個簡化嘅例子，睇嚇實際行一次係咩效果。
輸入
假設你嘅口播文案開頭係咁：
好多人覺得做視頻好難，但其實只需要三步。第一步，諗清楚你要講咩。第二步，寫低佢。第三步，將佢講俾人聽。就咁簡單。
第一步輸出：結構確認稿
技能讀完之後，輸出結構確認稿：
# PPT 結構確認稿
- 核心主題：做視頻只需要三步
- 建議尺寸：1080 × 1440
- 建議頁數：5 頁
| 頁碼 | 頁面主題 | 對應原文 | 拆分理由 |
|------|---------|---------|---------|
| 01 | 開場：你覺得做視頻難嗎？ | 第一句 | 製造共鳴，作為第一眼鈎子 |
| 02 | 原因分析：為什麼覺得難 | 隱含前提 | 過渡頁，引出解決方案 |
| 03 | 第一步：想清楚說什麼 | "第一步..." | 核心方法第一步 |
| 04 | 第二步：寫下來 + 講出來 | "第二步...第三步..." | 兩個短步驟合併一頁 |
| 05 | 總結金句 | 最後一句 | 收束結尾，留印象 |用戶確認
你話「第4頁內容有啲多，拆成兩頁」。技能調整之後進入下一步。
選主題
你打開主題預覽，揀咗 guizang-swiss-demo（瑞士風，乾淨極簡）。
技能讀取該主題下面嘅示例HTML，總結風格規則：黑白配色為主、少量藍色強調色、網格佈局、標題用無襯線字體、內容區有左右分欄同上下分層兩種模式。
最終產出
output/
├── scene-01.html
├── scene-02.html
├── scene-03.html
├── scene-04.html
├── scene-05.html
├── script.txt
├── outline.md
├── subtitle-scene-map.md
├── scene-design-plan.md
└── structure-proposal.md每個scene HTML打開之後，可以睇到對應嘅動畫畫面：標題滑入、正文漸顯、元素依次入場。
呢個過程，喺對話入面完成。由你俾出文案到拎到全部產出，核心操作得兩件事——確認頁結構、揀主題風格。
PART 05｜適用場景同邊界
邊個最啱用
核心優勢
可控。 每一頁scene係獨立嘅HTML文件，可以單獨打開、修改、替換。唔需要喺剪輯軟件入面重新拼一次。
可編輯。 識少少HTML嘅人可以直接改代碼——改文字、換顏色、調整動畫時長。唔需要專業視頻編輯技能。
渲染穩定。 有明確嘅「渲染安全CSS」規則，避免咗大部分導出問題。
主題化。 預置4套風格各異嘅主題，而且主題係「可閲讀嘅HTML示例」而唔係配置文件——呢個意味住主題庫可以不斷擴展。
無需設計基礎。 你唔需要識排版、動效、配色。AI幫你完成，你只需要判斷「呢個結構啱唔啱」同埋「呢套風格適唔適合」。
當前邊界
依賴AI Agent環境。 ppt2video-skills 係一個技能，唔係獨立應用。佢需要運行喺Claude Code或兼容嘅AI Agent框架入面。
主題庫目前得4套。 4套主題覆蓋咗常見風格，但如果你有非常特定嘅品牌視覺要求，可能需要定製主題。
適合豎屏內容。 預設1080×1440豎屏尺寸，適合視頻號、抖音、快手等豎屏平台。橫屏內容需要額外適配。
非實時渲染。 輸出嘅係HTML scene，唔係MP4視頻。需要配合視頻渲染工具（HyperFrames）嚟生成最終視頻文件。
寫喺最後
視頻內容創作呢件事，呢幾年發生咗兩次變化。
第一次係智能手機普及——人人都咗拍攝設備。第二次係剪映呢類工具普及——人人都咗剪輯能力。
第三次正在發生：AI開始介入內容製作嘅中台環節。唔係你寫好文案之後再「順便」做個視頻配圖，而係AI自動將文案變成畫面、排好版、加好動畫、準備好渲染。
ppt2video-skills 係第三次變化中嘅一個具體產品。佢嘅價值唔在於技術複雜——HyperFrames同GSAP都係成熟技術——而係在於佢將「由文案到視頻PPT」呢條鏈路，變成一個可對話、可確認、可自動執行嘅流程。
如果你已經用緊AI Agent，又有口播文案需要整成視頻，可以試嚇。輸入文案，AI幫你排好版、配好動畫，你只需要確認方向同揀主題。
淨低嘅交俾技能就得。
技能資訊
GitHub：https://github.com/dayuanlog/ppt2video 技術棧：HyperFrames + GSAP 預置主題：4套（雜誌風 / 瑞士風 / 手繪白板 / 極簡發佈） 預設畫布：1080 × 1440（豎屏） 運行環境：Claude Code或兼容AI Agent框架
安裝方法
將倉庫複製到AI Agent嘅技能目錄就得：
git clone https://github.com/dayuanlog/ppt2video.git ~/.claude/skills/ppt2video-skills
或者直接同Claude Code / Openclaw / Hermes講：
請幫我安裝這個skill：https://github.com/dayuanlog/ppt2video既然睇到呢度，如果覺得唔錯，順手㩒個讚、睇、轉發三連啦，如果想第一時間收到推送，都可以俾我個星標⭐～
多謝你睇我嘅文章，我哋，下次再見
你有沒有這樣的經歷——
花兩小時寫好一篇口播文案，然後對着空白編輯器發愁：做成視頻 PPT 還得再花兩小時排版、調動畫、配節奏。文案寫得好是一回事，把它變成能看的畫面是另一回事。
更糟的是，大多數視頻 PPT 工具要麼太複雜（專業剪輯軟件），要麼太死板（模板套完千篇一律）。你想做的是"有自己風格的視覺呈現"，但時間和技能都不夠。
所以有了 ppt2video-skills。
這個 AI Agent 技能，能幫你在對話中完成"文案→視頻 PPT"的全流程。你提供口播文案，它自動拆成 PPT 頁、生成結構稿等你確認、讓你選視覺主題，然後輸出一套帶 GSAP 動畫的 HTML 視頻畫面。
這篇文章拆解它的一切：解決什麼問題、怎麼工作、技術底子是什麼、實際用起來效果如何。
PART 01｜它解決了什麼核心痛點
先想一個問題：做視頻 PPT 這件事，到底難在哪？
第一關：文案到畫面的轉換。 你有一段口播文案，但它不是 PPT 結構。哪裏該新開一頁？哪裏該合併？哪句話適合做標題？哪段適合做金句？這些判斷依賴敍事邏輯感——不是人人都有。
第二關：排版與視覺呈現。 確定頁結構之後，每一頁怎麼排？標題放哪？配什麼圖？什麼顏色？什麼字體？這一關把絕大多數內容創作者擋在門外。模板能解決一部分，但一旦想跳出模板，難度陡增。
第三關：動畫與節奏。 視頻 PPT 和靜態 PPT 最大的區別是"動"。文字怎麼入場？什麼時候切換？每頁停留多久？動畫節奏對口播的配合——這已經是專業動效設計師的領域了。
第四關：輸出與渲染。 做好之後還得導出成視頻。傳統做法是在剪輯軟件裏重新拼一遍，或者用 PPT 自帶的錄製功能——質量和效率都打折扣。
ppt2video-skills 把所有四關串成一條自動化流水線。
它的定位很明確：讓內容創作者只關心文案本身，畫面呈現交給 AI。
它不是一個獨立軟件，而是一個 AI Agent 技能（Skill）。它運行在 AI Agent 環境中（Claude Code 或兼容的 Agent 框架），你通過對話來驅動它。你說"我有一篇口播文案，幫我做成視頻 PPT"，它就開始工作。
核心價值可以濃縮為一句話：把"做視頻 PPT"這件事，從一場需要設計技能的馬拉松，變成一次可以對話完成的任務。
PART 02｜從文案到視頻：四步流水線
整套流程分四步走，每一步都有明確的輸入和產出。
第一步：拆結構——讓 AI 讀懂你的文案
收到口播文案後，技能不做別的事，先讀文案。
它會把文案按敍事邏輯拆成 PPT 頁。但不是簡單地按段落切——它會判斷每一段的敍事角色：
• 這是開場鈎子？→ 適合獨立成頁，做大標題 • 這是論證過程？→ 可能分 2-3 頁，每頁講一個要點 • 這是金句/結論？→ 單獨一頁，強調輸出
拆完後輸出一份 結構確認稿（structure-proposal.md），包含：
• 建議拆成多少頁 • 每頁的主題 • 每頁對應的原文範圍 • 拆分理由
這份確認稿就是第一階段的產出。
第二步：用戶確認——人與 AI 協同
結構確認稿推給你看，你確認或調整。
這是整個流程中最關鍵的設計。它不是黑盒全自動——AI 拆的結構不一定完美，需要你來把關。
你可以說"第 3 頁和第 4 頁合併"、"第 5 頁拆成兩頁"、"給第 2 頁加一句話"。改完確認後，技能才會進入下一步。
第三步：選主題——決定視覺風格
確認完頁結構後，你需要選擇一套視覺主題。技能預置了 4 套主題，展示給你預覽：
| guizang-magazine-demo | ||
| guizang-swiss-demo | ||
| handdrawn-whiteboard-demo | ||
| launch-minimal-demo |
選好主題後，技能會先讀取該主題目錄下的 3-5 個真實 HTML 示例，總結它的風格語法——背景怎麼處理、標題層級怎麼用、顏色角色怎麼分配——然後再生成新頁面。
這是"先看示例再創作"的設計，保證產出風格統一，而不是 AI 憑空想象出來的畫面。
第四步：生成 scene——每頁一個獨立 HTML
最後一步，技能為每一頁 PPT 生成一個獨立的 HTML 文件，稱為一個 "scene"。
每頁 scene 的結構：
• 固定畫布尺寸（默認 1080×1440 豎屏） • GSAP 動畫時間線（3-6 個入場動作，以 opacity / x / y / scale 為主） • HyperFrames 兼容結構（可被視頻渲染框架識別） • 內嵌安全機制：禁止無限循環、禁止複雜透明疊加
同時產出的配套文件：
• script.txt：每行對應一頁的口播文案 • outline.md：每頁的主題和目的 • subtitle-scene-map.md：腳本行與 scene 編號的映射 • scene-design-plan.md：每頁的設計思路說明
整套流水線的價值不在某一項技術有多強，而在每一步之間無縫銜接——文案進，一套完整的視頻 PPT 素材出。
PART 03｜技術基礎：HyperFrames + GSAP
ppt2video-skills 的輸出是 HTML，但這不是普通的網頁——它是可以被渲染為視頻的視頻畫面。
HyperFrames：用 HTML 做視頻
HyperFrames 是一個開源框架，它的核心思路是：用 HTML + CSS + JavaScript 來描述視頻畫面，然後渲染成視頻文件。
每一頁 scene 是一個獨立的 HTML 文件，包含固定尺寸的畫布、視覺內容、和動畫時間線。HyperFrames 框架可以識別這些 HTML，按時間線播放並錄製為視頻。
這在業界被稱為"聲明式視頻"——你聲明每一幀長什麼樣，框架負責把它變成視頻。好處是：可編程、可版本控制、可精確到毫秒。
GSAP 動畫
每一頁的動畫使用 GSAP（GreenSock Animation Platform）驅動。GSAP 是業界最成熟的 Web 動畫庫之一，相比 CSS animation 更可控，相比手寫 JavaScript 動畫更高效。
每頁的動畫設計原則：
• 3-6 個入場動作就夠了，不需要花哨 • 以 opacity / x / y / scale 為主，這些屬性渲染性能最好 • 先寫靜態畫面，再加動畫——確保最終畫面正確，動畫只負責"怎麼出現" • 禁止 repeat: -1——視頻 PPT 不需要無限循環
一條典型的時間線：標題從下方滑入（y: 100 → 0），正文漸顯（opacity: 0 → 1），裝飾元素依次入場。每頁 4-8 秒，配合同步口播。
主題機制：先看示例再創作
主題系統是 ppt2video-skills 最有特色的設計。
它不是讓 AI 憑空"設計"風格，而是讓 AI 先讀真實主題 HTML，提取風格規則，再按規則生成新頁面。
工作流：
1. 技能讀取選中主題目錄下的 3-5 個 scene HTML 2. 提取背景處理、顏色角色、標題層級、佈局模式、動畫節奏 3. 將這些規則應用到新頁面的生成中
這意味着：主題目錄裏的示例越多，AI 生成的質量越穩定。主題不是一個配置文件，而是一組真實 HTML 示例——AI 通過閲讀它們來理解你想要的風格。
渲染安全：為什麼不用複雜 CSS
視頻渲染引擎對 CSS 的支持度不如瀏覽器。一些在瀏覽器中正常的效果，在渲染時可能丟幀、錯位或不顯示。
禁止使用的 CSS 特性：
• backdrop-filter— 視頻渲染器不支持• mix-blend-mode— 混合模式在渲染時不可預測• filter: blur()— 多層模糊會嚴重拖慢渲染• 多層透明疊加 — 渲染順序容易出錯
推薦的樣式策略： 實色背景、簡單漸變、高對比文字、輕量邊框與單層陰影。
這也是 ppt2video-skills 的設計哲學之一：寧可設計上剋制一點，也要保證渲染穩定。
產出物一覽
scene-01.htmlscene-NN.html | |
script.txt | |
outline.md | |
subtitle-scene-map.md | |
scene-design-plan.md | |
structure-proposal.md |
每個文件都有明確用途，組成一套完整的視頻 PPT 製作素材包。
PART 04｜上手實操：完整流程演示
下面用一個簡化的例子，看實際走一遍是什麼效果。
輸入
假設你的口播文案開頭是這樣：
很多人覺得做視頻很難，但其實只需要三步。第一步，想清楚你要說什麼。第二步，寫下來。第三步，把它講給別人聽。就這麼簡單。
第一步輸出：結構確認稿
技能讀完後，輸出結構確認稿：
# PPT 結構確認稿
- 核心主題：做視頻只需要三步
- 建議尺寸：1080 × 1440
- 建議頁數：5 頁
| 頁碼 | 頁面主題 | 對應原文 | 拆分理由 |
|------|---------|---------|---------|
| 01 | 開場：你覺得做視頻難嗎？ | 第一句 | 製造共鳴，作為第一眼鈎子 |
| 02 | 原因分析：為什麼覺得難 | 隱含前提 | 過渡頁，引出解決方案 |
| 03 | 第一步：想清楚說什麼 | "第一步..." | 核心方法第一步 |
| 04 | 第二步：寫下來 + 講出來 | "第二步...第三步..." | 兩個短步驟合併一頁 |
| 05 | 總結金句 | 最後一句 | 收束結尾，留印象 |用戶確認
你說"第 4 頁內容有點多，拆成兩頁"。技能調整後進入下一步。
選主題
你打開主題預覽，選了 guizang-swiss-demo（瑞士風，乾淨極簡）。
技能讀取該主題下的示例 HTML，總結風格規則：黑白配色為主、少量藍色強調色、網格佈局、標題用無襯線字體、內容區有左右分欄和上下分層兩種模式。
最終產出
output/
├── scene-01.html
├── scene-02.html
├── scene-03.html
├── scene-04.html
├── scene-05.html
├── script.txt
├── outline.md
├── subtitle-scene-map.md
├── scene-design-plan.md
└── structure-proposal.md每個 scene HTML 打開後，可以看到對應的動畫畫面：標題滑入、正文漸顯、元素依次入場。
這個過程，在對話中完成。從你給出文案到拿到全部產出，核心操作只有兩件事——確認頁結構、選擇主題風格。
PART 05｜適用場景與邊界
誰最適合用
核心優勢
可控。 每一頁 scene 是獨立的 HTML 文件，可以單獨打開、修改、替換。不需要在剪輯軟件裏重新拼一遍。
可編輯。 懂一點 HTML 的人可以直接改代碼——改文字、換顏色、調動畫時長。不需要專業視頻編輯技能。
渲染穩定。 有明確的"渲染安全 CSS"規則，避免了大多數導出問題。
主題化。 預置 4 套風格各異的主題，且主題是"可閲讀的 HTML 示例"而非配置文件——這意味着主題庫可以不斷擴展。
無需設計基礎。 你不需要會排版、動效、配色。AI 幫你完成，你只需要判斷"這個結構對不對"和"這套風格適不適合"。
當前邊界
依賴 AI Agent 環境。 ppt2video-skills 是一個技能，不是獨立應用。它需要運行在 Claude Code 或兼容的 AI Agent 框架中。
主題庫目前 4 套。 4 套主題覆蓋了常見風格，但如果你有非常特定的品牌視覺要求，可能需要定製主題。
適合豎屏內容。 默認 1080×1440 豎屏尺寸，適合視頻號、抖音、快手等豎屏平台。橫屏內容需要額外適配。
非實時渲染。 輸出的是 HTML scene，不是 MP4 視頻。需要配合視頻渲染工具（HyperFrames）來生成最終視頻文件。
寫在最後
視頻內容創作這件事，這幾年發生了兩次變化。
第一次是智能手機普及——人人都有了拍攝設備。第二次是剪映這類工具普及——人人都有了剪輯能力。
第三次正在發生：AI 開始介入內容製作的中台環節。不是你寫好文案後再"順便"做個視頻配圖，而是 AI 自動把文案變成畫面、排好版、加好動畫、準備好渲染。
ppt2video-skills 是第三次變化中的一個具體產品。它的價值不在於技術複雜——HyperFrames 和 GSAP 都是成熟技術——而在於它把"從文案到視頻 PPT"這條鏈路，變成了一個可對話、可確認、可自動執行的流程。
如果你已經在用 AI Agent，又有口播文案需要做成視頻，可以試試。輸入文案，AI 幫你排好版、配好動畫，你只需要確認方向和選主題。
剩下的交給技能就好。
技能信息
GitHub：https://github.com/dayuanlog/ppt2video 技術棧：HyperFrames + GSAP 預置主題：4 套（雜誌風 / 瑞士風 / 手繪白板 / 極簡發佈） 默認畫布：1080 × 1440（豎屏） 運行環境：Claude Code 或兼容 AI Agent 框架
安裝方法
將倉庫克隆到 AI Agent 的技能目錄即可：
git clone https://github.com/dayuanlog/ppt2video.git ~/.claude/skills/ppt2video-skills
或者直接和Claude Code / Openclaw /Hermes 說：
請幫我安裝這個skill：https://github.com/dayuanlog/ppt2video既然看到這裏了，如果覺得不錯，隨手點個贊、在看、轉發三連吧，如果想第一時間收到推送，也可以給我個星標⭐～
謝謝你看我的文章，我們，下次再見