web-video-presentation：把文章做成可錄屏網頁影片的 Agent Skill

Fri, 15 May 2026 09:02:15 +0800

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 平時隱藏，只有懸浮時出現，方便錄屏。

它適合把部落格文章做成影片解說、把口播稿做成動態視覺稿、做產品 demo、教程影片或 keynote 風格演講。

核心價值不是省掉剪輯軟體，而是讓網頁成為可控、可迭代的影片畫布。

核心設計原則

第一，固定 16:9 舞台。內容在穩定的 1920×1080 坐標系裡設計，再縮放到不同視口，避免錄屏時布局漂移。

第二，全域 step cursor。點擊或鍵盤推進 (chapter, step)，本地保存進度。它像影片時間線，但用網頁狀態控制。

第三，一個 step 只講一個想法。每個節拍都應該是完整畫面，而不是在同頁上堆 bullet。

第四，腳本節拍驅動結構。口播稿決定節奏，outline 決定章節和 step，畫面跟著敘事走。

第五，motion first。每個場景都應該有一個會動的視覺錨點。如果只是靜態段落，還沒有變成影片語言。

第六，主題 token 化。主題不是換色，而是透過語義 token 控制字體、顏色、卡片、背景、分隔線、裝飾和整體氣質。

工作流分四段

第一階段是內容編寫。使用者給原始文章時，agent 要改寫成 script.md，再生成 outline.md。如果已有口播稿，就直接落盤成 script.md，再生成 outline。

第二階段是網頁開發。agent 用腳手架生成 Vite / React / TypeScript 專案，按章節實作畫面。第 1 章必須由主線完整做出來並讓使用者驗收，因為它是後續章節的風格錨點。

第三階段是可選音訊合成。skill 支援從章節裡的 narrations.ts 抽取音訊片段定義，再走語音合成流程。

第四階段是錄屏和後期。網頁本身作為錄屏舞台，使用者用錄屏工具把點擊驅動的演示錄成影片。

流程中有硬檢查點：腳本、outline、主題、素材計畫、開發模式要先對齊；第 1 章做完必須驗收；是否合成音訊也要停下來確認。

為什麼 outline 不寫動畫

outline.md 只規劃節奏和資訊密度，不規劃具體動畫。它可以寫章節切分、step 數、每步畫面內容、素材清單和估計時長，但不該寫 CSS 動畫類型、毫秒數、clip-path 或 filter。

原因是，如果 outline 把動畫寫死，後面的章節開發就會退化成機械翻譯。真正的影片感應該在實作單章時，根據內容關係即時設計。

narrations.ts 是唯一真相源

每章都有自己的 narrations.ts，保存 step 數和對應口播文本。skill 要求章節 .tsx 裡出現的最大 step 數，必須和 narrations.length 對齊。

這是為了避免 script.md、outline.md、章節程式碼、chapters.ts 和音訊檔互相漂移。口播、畫面、音訊和 step 數不一致時，影片生產會很難維護。

內建主題不是簡單換皮

內建主題包括 paper-press、warm-keynote、midnight-press、blueprint、chalk-garden、terminal-green、bauhaus-bold、sunset-zine、newsroom、monochrome-print。

它們不是紅色版、藍色版，而是不同視覺方向。agent 在 Checkpoint Plan 階段要根據稿子的主題和語氣，推薦 2 到 3 個合適主題。使用者也可以要求自訂主題。

三種開發模式

第 1 章無論如何都必須主線做完並驗收。之後有三種模式。

模式 A 是逐章確認，風險最低。模式 B 是順序開發，第 2 章到最後由主線做完後統一驗收。模式 C 是並行開發，第 1 章通過後把後續章節交給 subagent 並行實作，速度最快，但各章風格可能略有差異。

這很現實：影片生產既需要風格錨點，也需要生產效率。

適合誰用

它特別適合已經有內容素材的人。如果你有文章、腳本、產品介紹、教程或技術解讀，它可以把這些內容轉成可錄屏網頁影片。

但如果只是說「幫我想一個影片主題」，它不適合直接接手。它不是創意選題工具，而是內容轉影片的生產流程。

小結

web-video-presentation 的價值，不是幫你生成好看的 React 頁面，而是把內容影片化拆成可協作、可驗收、可重用的流程。

它把文章、口播、outline、主題、章節實作、音訊合成和錄屏串起來，同時用硬檢查點防止 agent 一路跑偏。

內容創作 on KnightLi的博客