Communitygithub.com

cclank/lanshu-html-ppt-templates

基於 30 套嵐叔 HTML 簡報範本建立、改寫與自訂簡報,適用於商務彙報、政企簡報、路演、發表會、學術答辯、教學課件、資料敘事與互動展示。

lanshu-html-ppt-templates 是什麼?

這是一套內含 30 個高品質 HTML 簡報範本的技能,專為需要製作可直接於瀏覽器放映的幻燈片(網頁 PPT)的使用者設計。技能涵蓋多元場景:從商務諮詢、融資路演、品牌敘事到學術答辯、政企彙報及產品發佈,每個範本均為單一 HTML 檔案,內建字型與互動工具。使用者可透過指令列出範本、快速建立新簡報、檢視範本源碼,並利用內嵌的放映工具包(快捷鍵面板、雷射筆、畫筆註記、手機遙控等)提升簡報體驗。技能也提供字型內嵌重新裁切、備註 JSON 同步、靜態驗證(語法檢查)與交付前瀏覽器檢查等自動化流程,確保輸出檔案完整且可用。支援多種範本樣式,如「07-consulting」適合資訊密集的商務簡報,「21-academic」適合學術場景,「28-official」則適用於政府與國企彙報。使用者可依內容、受眾與交付格式選擇最合適的範本,並透過 Python 腳本進行頁面增刪、資料替換與主題色調整。最終產出為獨立 HTML 檔案,可直接在瀏覽器中播放,或依需求輸出 PDF。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cclank/lanshu-html-ppt-templates/tree/HEAD

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

嵐叔 HTML 簡報範本

使用 assets/templates/ 的完整單檔案範本製作可直接放映的 HTML 簡報。線上目錄:https://ppt.lanshuagent.com/;作者:https://x.com/LufzzLiz。

選擇範本

先讀 references/template-catalog.md,按內容、受眾和交付格式選型。使用者已指定風格時沿用;未指定時根據材料選擇,並簡短說明。無需為常規樣式選擇額外確認。

  • 商務彙報、戰略和資訊密集內容:07-consulting、01-swiss。
  • 融資路演、產品和技術發佈:04-brutalism、03-aurora、17-terminal。
  • 品牌、文化、策展和生活方式:02-editorial、08-oriental、09-organic、18-riso、19-collage。
  • 資料分佈和連續敘事:11-morph;可調業務假設:14-live-model;地域和全球網路:20-globe。
  • 學術答辯和課題彙報:21-academic;教學課件和培訓:23-chalkboard。
  • 產品功能介紹和年度總結:22-bento;AI 產品與客戶故事:24-chat;年會和團隊復盤:25-pixel。
  • 政企、國企和機關的工作彙報:28-official;年度大事記、企業內刊:26-newspaper。
  • 工程評審與硬體方案:27-blueprint;產品路線圖和戰略規劃:29-metro;使用者故事和品牌故事:30-comic。
  • 使用者需要多頁 PDF 時,優先選擇目錄中標註有多頁列印樣式的範本;列印效果仍需實際檢查。

建立與修改

命令中的路徑相對於本 skill 目錄;先定位 skill 的實際安裝位置。

python3 scripts/deck.py list
python3 scripts/deck.py new 07-consulting --output /path/to/outputs/presentation.html --title "簡報標題"
python3 scripts/deck.py source 07-consulting
python3 scripts/deck.py inspect /path/to/outputs/presentation.html

new 複製完整範本,保留字型和指令碼,拒絕覆蓋已有檔案。--title 只修改瀏覽器標題,頁面正文需要繼續改寫。source 僅在終端隱藏字型 Base64,保留原始行號;不要把它輸出儲存成簡報檔案。

執行前閱讀 references/authoring.md。對選中的 HTML 做定點修改:

  1. 根據使用者材料建立逐頁敘事,再替換標題、正文、圖表資料、頁首頁尾與品牌。優先複用現有版式,按內容增刪頁。
  2. 保留播放核心依賴的 ID、class、data-*、事件繫結與圖表介面,以及 TOOLKIT(放映工具包)和 PRESENTER(演講者視窗)程式碼區塊;改變頁面數量時同步頁碼、生成陣列和備註數量。
  3. 更新 script#deck-notes 中的 JSON 陣列,讓備註順序與實際放映順序一致。範本範例中的公司、數字、來源文字和聯絡方式需要替換或刪除。
  4. 輸出獨立 HTML。靜態圖形優先使用 SVG/CSS,即時圖形沿用現有 Canvas;新增資源需內嵌或隨簡報一同交付。

範本的中文字型按原文字元裁剪,新增文字會先用系統字型回退。改完文字後,聯網執行 python3 scripts/embed_fonts.py <簡報檔案>,按頁面實際用到的字重新裁剪內嵌字型;離線時優先沿用現有字型堆疊,並檢查版面。保留原有字型許可說明。

互動與匯出邊界

  • 普通範本使用 .slide;無限畫布、電影、空間介面、終端、拼貼各有獨立資料結構,具體見作者指南。
  • 14-live-model 的模型引數、現金流和繫結元素需要一起修改;演講者預覽是獨立例項,預設不會同步主螢幕臨時調整的模型引數。
  • 30 套都內建放映工具包:? 快捷鍵面板、O 總覽、頁碼加 Enter 跳頁、B/W 黑白螢幕、L 雷射筆、D 畫筆批註,E 在瀏覽器裡改字、改講稿、全套替換和調主題色並另存為新檔案。用 python3 scripts/present.py <簡報檔案> 開啟後按 M,可用同一 Wi‑Fi 下的手機掃碼遙控。
  • 17-terminal 是終端外觀的網頁演示,顯示的命令屬於頁面內容。
  • 12-generative 每次執行可能得到不同畫面;需要可複現結果時固定種子。
  • 當前提供 HTML 與部分範本的瀏覽器列印 PDF;互動和動畫由瀏覽器播放。需要可編輯 .pptx 時明確說明格式差異,再按使用者選擇另行轉換。
  • 公網部署僅在使用者要求時執行。修改設定中的網域名稱不會自動取得新網域名稱或發佈許可權。

校驗和交付

python3 scripts/deck.py validate /path/to/outputs/presentation.html

該命令檢查備註 JSON 和內聯 JavaScript 語法;需要本機 Node.js 才能完成 JavaScript 檢查。它不執行頁面指令碼。

在可用的瀏覽器裡檢查首尾頁、關鍵圖表、最長正文、翻頁、全螢幕、演講者備註和互動;有 PDF 要求時檢查實際列印結果。無法執行瀏覽器時說明已做的靜態檢查和未驗證部分。

交付 HTML 的可用路徑、頁數和必要的播放說明;可提示按 ? 檢視全部快捷鍵,需要手機遙控時用 scripts/present.py 開啟。使用者要求 PDF 時一併交付驗證過的 PDF;說明互動狀態和動畫在匯出中的實際表現。

相關技能