web-video-presentation 是 ConardLi/garden-skills 裡的一個 agent skill。它要解決的問題很具體：把一篇文章或一段口播稿，做成可以錄屏的影片化網頁演示。
專案地址：https://github.com/ConardLi/garden-skills/tree/main/skills/web-video-presentation
它不是普通 PPT 模板，也不是單純的 React 元件庫。更準確地說，它是一套面向 AI agent 的影片演示生產流程：先把內容改成口播稿，再拆成 outline，再選主題，再用 Vite + React + TypeScript 做一個 16:9 的點選驅動網頁，最後錄屏成影片。
它想做的不是幻燈片
README 裡有一個很關鍵的定位：這個 skill 生成的是 “video production surface”，不是 slide deck。
也就是說，它不希望每一頁只是標題加 bullet list，而是讓每一次點選推進一個口播節拍。每個 step 獨佔 1920×1080 的舞臺，畫面隨著敘事變化。進度 UI 平時隱藏，只有懸浮時出現，這樣錄屏畫面更乾淨。
這類形態很適合：
- 把部落格文章做成 B 站 / YouTube 解說影片
- 把已有口播稿做成動態視覺稿
- 做產品 demo
- 做教程影片
- 做 keynote 風格的視覺演講
- 做“動態 PPT，但不像 PPT”的內容
它的核心價值不在於省掉剪輯軟體，而是讓網頁成為一個可控的、可迭代的影片畫布。
核心設計原則
這個 skill 的幾個原則很清楚。
第一，固定 16:9 舞臺。內容在穩定的 1920×1080 座標系裡設計，再縮放到不同視口。這樣錄屏時不會因為瀏覽器視窗變化導致佈局漂移。
第二，全域性 step cursor。使用者點選或用鍵盤推進 (chapter, step)，本地儲存進度。它像影片時間線，但用網頁狀態來控制。
第三，一個 step 只講一個想法。每個節拍都應該是完整畫面，而不是在同一頁上不斷堆 bullet。
第四，指令碼節拍驅動結構。口播稿決定節奏，outline 決定章節和 step，畫面跟著敘事走。
第五，motion first。每個場景都應該有一個會動的視覺錨點。如果只是靜態段落，說明這一步還沒有被設計成影片語言。
第六，主題 token 化。主題不是簡單換顏色，而是透過語義 token 控制字型、顏色、卡片、背景、分割線、裝飾和整體氣質。
這些原則加在一起，能把 AI 從“生成頁面”拉到“設計影片節奏”。
工作流分四段
它的工作流分成四個階段。
第一階段是內容編寫。使用者給原始文章時，agent 要把它改寫成 script.md，再生成 outline.md。如果使用者已經給了口播稿，就直接落盤成 script.md，再生成 outline。
第二階段是網頁開發。agent 用腳手架生成 Vite / React / TypeScript 專案，然後按章節實現畫面。第 1 章必須由主執行緒完整做出來，並讓使用者驗收，因為它是後續章節的風格錨點。
第三階段是可選音訊合成。skill 支援從章節裡的 narrations.ts 抽取音訊片段定義，再走語音合成流程。
第四階段是錄屏和後期。網頁本身作為錄屏舞臺，使用者用錄屏工具把點選驅動的演示錄成影片。
這個流程裡有幾個硬檢查點：指令碼、outline、主題、素材計劃、開發模式要先對齊；第 1 章做完必須驗收；是否合成音訊也要停下來確認。它不允許 agent 從原文一路衝到最終程式碼。
為什麼 outline 不寫動畫
這個 skill 裡一個很有意思的約束是：outline.md 只規劃節奏和資訊密度，不規劃具體動畫。
也就是說，outline 可以寫：
- 章節切分
- 每章 step 數
- 每步螢幕內容
- 每章資訊池
- 素材清單
- 估計時長
但不應該寫：
- 用什麼 CSS 動畫
- 用 blur、wipe 還是 spring
- 每個動效多少毫秒
- 具體 clip-path 或 filter 實現
原因很合理：如果 outline 把動畫寫死，後面的章節開發 agent 就會退化成“按說明翻譯頁面”。真正的影片感應該在實現單章時，根據內容關係即時設計。
這也是它比普通模板更有意思的地方。它把“結構”和“視覺決策”分開，讓 AI 有空間做內容驅動的設計，而不是機械套版。
narrations.ts 是唯一真相源
專案結構裡有一個關鍵檔案：narrations.ts。
每章都有自己的 narrations.ts，它儲存 step 數和對應口播文字。skill 明確要求，章節 .tsx 裡出現的最大 step 數，必須和 narrations.length 對齊。
這樣做是為了避免五處內容漂移：
script.mdoutline.md- 章節程式碼
chapters.ts- 音訊檔案
如果口播、畫面、音訊和 step 數不一致，影片生產會非常難維護。把 narrations.ts 作為唯一真相源，是這個流程裡很實用的工程約束。
內建主題不是簡單換皮
README 裡列了一組內建主題：
paper-presswarm-keynotemidnight-pressblueprintchalk-gardenterminal-greenbauhaus-boldsunset-zinenewsroommonochrome-print
這些主題不是“紅色版”“藍色版”這種換皮，而是不同視覺方向。比如 paper-press 偏編輯紙張和印刷質感，blueprint 偏技術圖紙，terminal-green 偏老式終端，newsroom 偏媒體桌面。
agent 在 Checkpoint Plan 階段要根據稿子的主題和語氣，主動推薦 2 到 3 個合適主題。使用者也可以要求自定義新主題。
這點很重要。影片類網頁最怕所有主題都長一個樣：大標題、漸變背景、卡片、幾個圓角按鈕。主題系統如果能約束視覺語言，就能減少 AI 生成內容常見的同質化。
開發模式有三種
第 1 章無論如何都必須主執行緒做完並驗收。之後可以選擇三種模式。
模式 A 是逐章確認。每章做完都暫停驗收，風險最低，也最適合對成片質量要求高的內容。
模式 B 是順序開發。第 2 章到最後一章由主執行緒順序做完，最後統一驗收，速度中等。
模式 C 是並行開發。第 1 章透過後，把後續章節交給 subagent 並行實現。它最快，但各章風格可能會有差異。skill 認為這是預期，因為主題 token 負責兜底統一，章節內部可以自由發揮。
這個設計很現實：影片生產既需要風格錨點，也需要生產效率。第一章先定調，後續章節再按風險承受能力選擇速度。
適合誰用
這個 skill 特別適合已經有內容素材的人。
如果你手裡有一篇文章、一段指令碼、一個產品介紹、一份教程、一篇技術解讀，它可以把這些內容轉成可錄屏的網頁影片。
但如果你只是說“幫我想一個影片主題”，它並不適合直接接手。SKILL.md 裡也明確說了：使用者什麼都沒有時，agent 應該反問，讓使用者先給素材或大綱。它不是創意選題工具，而是內容轉影片的生產流程。
小結
web-video-presentation 的價值，不是幫你生成一套好看的 React 頁面，而是把內容影片化這件事拆成可協作、可驗收、可複用的流程。
它把文章、口播、outline、主題、章節實現、音訊合成和錄屏串起來，同時用硬檢查點防止 agent 一路跑偏。
如果你經常把技術文章、產品介紹或教程做成影片，這個 skill 值得研究。即使不直接使用它的腳手架，裡面關於“一個 step 一個想法”“先定第 1 章風格錨點”“narrations.ts 做唯一真相源”“outline 不寫死動畫”的方法，也很適合遷移到自己的 AI 內容生產流程裡。