技能包

HTML PPT Skill:用靜態 HTML 做演示和演講者檢視

適合要用純靜態 HTML 做專業演示並需要演講者模式的人,但安裝後只有支援 AgentSkills 的執行環境才能用來製作。

官方來源 · html-ppt-skill

安裝

npx skills add https://github.com/lewislulu/html-ppt-skill

適合誰

如果你要讓 Agent 直接產出可打開的 HTML 演示文稿,而不是再走一套打包工具,這個 AgentSkill 更合適。它面向專業 HTML 演示:主題、整套模板、單頁版式、動畫,以及帶預覽、逐字稿和計時器的演講者模式。成品是純靜態 HTML/CSS/JS,沒有建置步驟。

你需要一個支援 AgentSkills 的 Agent 執行環境,並接受用 npx 註冊技能。只想自己手寫幾頁 HTML、不打算讓 Agent 代寫的人,收益有限。中文說明在

https://github.com/lewislulu/html-ppt-skill/blob/main/README.zh-CN.md

頁面還寫了許可為 MIT。它沒有把某一種聊天產品寫成唯一用戶端,因此不要自行限定只能在某一家裡用。

3 分鐘完成第一次嘗試

官方安裝命令只有這一條:

npx skills add https://github.com/lewislulu/html-ppt-skill

它會把該技能註冊到你的 Agent 執行環境。這會改執行環境的技能清單,不是唯讀查看。先確認本機有 npx,並且這是你要寫入的那個環境,再執行。

裝好後做一次低風險試寫:讓支援 AgentSkills 的 Agent 產生一份盡量短的靜態 HTML 演示。寫檔前,先讓它說出將建立的路徑和頁數,你點頭後再允許落盤。成功訊號有兩層:得到可直接用瀏覽器打開的 HTML,中間沒有建置步驟;打開後按 S,能彈出獨立的演講者視窗。若 Agent 開始改你的現有站點工程或追加建置指令稿,先停下來。

頁面寫到安裝後可以 “by asking things like”,但這份摘錄沒有給出具體問句。所以第一次不要編一套口令,只要求「短、靜態、可打開、先確認路徑」。

使用案例

案例一:讓 Agent 按主題和版式做一份演示。頁面給出的規模是 36 套主題、15 套整本模板、31 種單頁版式,資源分別在 assets/themes/*.css、templates/full-decks/<name>/、templates/single-page/*.html。動畫則是 27 個 CSS 動畫加 20 個 canvas FX。摘錄沒有寫每個主題的名字,也沒有寫 Agent 會如何挑選模板。因此你能要求的是:產出靜態 HTML 演示,並盡量重用這些現成資源。你無法根據這份材料指定「必須用某一個未寫出的主題名」。產生前仍要確認輸出路徑。

案例二:檢查演講者模式。任意一套成品打開後,按 S 會彈出專用演講者視窗,裡面有四張可拖動、可縮放的磁性卡片:目前頁、下一頁預覽、逐字稿、計時器。兩個視窗透過 BroadcastChannel 保持同步。頁面沒有寫瀏覽器名單,也沒有寫沒有第二視窗時該怎麼辦。所以驗收只看到:按 S 後出現上述四塊,並且翻頁時預覽和講稿跟著變。不要在這一步讓 Agent 繼續改 HTML。

使用邊界

數字以頁面表格為準:主題 36、整本模板 15、單頁版式 31、CSS 動畫 27、canvas FX 20。不要用倉庫標題裡可能更舊的數字去改這些計數。路徑寫到了目錄級,沒有提供完整檔案清單。

安裝路徑就是上面的 npx skills add。它沒有第二條並列安裝器。註冊之後,只有支援 AgentSkills 的執行環境被寫成可以製作演示;不支援該標準的工具,不要假定已經能用。

成品沒有建置步驟,也不等於不會寫磁碟。第一次先完成一頁或少數幾頁的靜態檔,並按 S 核對演講者視窗。任何覆蓋已有演示、批次產生幾十頁或引入外部建置的動作,都要先讓 Agent 複述將改的檔,你確認後再繼續。