AI Skills
html-ppt

html-ppt

熱門

HTML PPT Studio — 使用模板製作專業的靜態 HTML 簡報，支援多種風格、版面與動畫。當使用者要求製作簡報、PPT、投影片、keynote、deck、slideshow、「幻灯片」、「演讲稿」、「做一份 PPT」、「做一份 slides」、reveal 風格的 HTML 簡報、小紅書圖文，或任何需要美觀且可用鍵盤導航的多頁提案/報告/分享文件時使用。觸發關鍵字包含「presentation」、「ppt」、「slides」、「deck」、「keynote」、「reveal」、「slideshow」、「幻灯片」、「演讲稿」、「分享稿」、「小红书图文」、「talk slides」、「pitch deck」、「tech sharing」、「technical presentation」。

6743星標
610分支
更新於 2026/7/2
獲取技能源代碼

相關技能

content-research-writer6.8萬music-to-video3.2萬writing-guidelines2.9萬
SKILL.md
readonlyread-only
name
html-ppt
description

HTML PPT Studio — 使用模板製作專業的靜態 HTML 簡報，支援多種風格、版面與動畫。當使用者要求製作簡報、PPT、投影片、keynote、deck、slideshow、「幻灯片」、「演讲稿」、「做一份 PPT」、「做一份 slides」、reveal 風格的 HTML 簡報、小紅書圖文，或任何需要美觀且可用鍵盤導航的多頁提案/報告/分享文件時使用。觸發關鍵字包含「presentation」、「ppt」、「slides」、「deck」、「keynote」、「reveal」、「slideshow」、「幻灯片」、「演讲稿」、「分享稿」、「小红书图文」、「talk slides」、「pitch deck」、「tech sharing」、「technical presentation」。

html-ppt — HTML PPT Studio

將專業的 HTML 簡報製作成靜態檔案。一個主題檔案 = 一種外觀。一個版面檔案 = 一種頁面類型。一個動畫 class = 一種進場效果。所有頁面共用 assets/base.css 中以 token 為基礎的設計系統。

安裝

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

單一指令，無需建置。純靜態 HTML/CSS/JS，僅使用 CDN 網頁字型。

這個 skill 提供什麼

  • 36 種主題 (assets/themes/*.css) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint
  • 15 種全 deck 模板 (templates/full-decks/<name>/) — 完整的多頁簡報，附帶限定的 .tpl-<name> CSS。8 個從真實簡報中提取（xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal），7 個情境腳本（pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, presenter-mode-reveal — 演講者模式專用）
  • 31 種版面 (templates/single-page/*.html) 附帶實際的示範資料
  • 27 種 CSS 動畫 (assets/animations/animations.css) 透過 data-anim 使用
  • 20 種 Canvas FX 動畫 (assets/animations/fx/*.js) 透過 data-fx 使用 — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion
  • 鍵盤執行環境 (assets/runtime.js) — 方向鍵、T（主題）、A（動畫）、F/O、S（演講者模式：磁吸卡片彈出視窗，包含目前 / 下一頁 / 逐字稿 / 計時器卡片）、N（備註抽屜）、R（在演講者模式中重設計時器）
  • FX 執行環境 (assets/animations/fx-runtime.js) — 在投影片進入時自動初始化 [data-fx]，離開時清理
  • 展示用 deck — 主題 / 版面 / 動畫 / 全 deck 畫廊
  • 無頭 Chrome 渲染腳本 — 用於匯出 PNG

使用時機

當使用者要求任何投影片形式的輸出，或希望將文字/筆記轉換為可展示的 deck 時使用。優先選擇此方式而非從頭建立。

🎤 演講者模式（演講者模式 + 逐字稿）

如果使用者提到以下任何關鍵字：演講 / 分享 / 講稿 / 逐字稿 / speaker notes / presenter view / 演講者視圖 / 提詞器，或說出「我要去給團隊講 xxx」、「要做一場技術分享」、「怕講不流暢」、「想要一份帶逐字稿的 PPT」— 請使用 presenter-mode-reveal 全 deck 模板，並在每張投影片的 <aside class="notes"> 中撰寫 150–300 字的逐字稿。

詳見 references/presenter-mode.md 的完整撰寫指南，包含演講稿撰寫的 3 條規則：

  1. 不是講稿，是提示信號 — 加粗核心詞 + 過渡句獨立成段
  2. 每頁 150–300 字 — 2–3 分鐘/頁的節奏
  3. 用口語，不用書面語 — 「因此」→「所以」，「該方案」→「這個方案」

所有全 deck 模板都支援 S 鍵演講者模式（內建於 runtime.js）。S 會開啟一個新的彈出視窗，包含 4 張磁吸卡片：

  • 🔵 CURRENT — 目前投影片的像素級 iframe 預覽
  • 🟣 NEXT — 下一張投影片的像素級 iframe 預覽
  • 🟠 SPEAKER SCRIPT — 大字型逐字稿（可捲動）
  • 🟢 TIMER — 已過時間 + 投影片計數器 + 上一頁/下一頁/重設按鈕

每張卡片可透過標題列拖曳，並可透過右下角把手調整大小。卡片位置/大小會持久化儲存到每個 deck 的 localStorage。「Reset layout」按鈕可恢復預設排列。

為什麼預覽是像素級精確：每個預覽都是一個 <iframe>，載入實際的 deck HTML 並帶有 ?preview=N 查詢參數；runtime.js 會偵測此參數並僅渲染第 N 張投影片，不顯示任何 chrome。因此預覽使用與觀眾視角相同的 CSS、主題、字型和視口 — 顏色和版面保證完全一致。

流暢導航：投影片切換時，演講者視窗會向每個 iframe 發送 postMessage({type:'preview-goto', idx:N})。iframe 僅切換 .is-active 到不同投影片 — 無需重新載入，無閃爍。兩個視窗也透過 BroadcastChannel 保持同步。

只有 presenter-mode-reveal 是從頭圍繞此功能設計，並在每張投影片上提供適當的逐字稿範例。

演講者視窗的鍵盤操作：← → 導航（同步觀眾）· R 重設計時器 · Esc 關閉彈出視窗。
觀眾視窗的鍵盤操作：S 開啟演講者視窗 · T 循環主題 · ← → 導航（同步演講者）· F 全螢幕 · O 總覽。

在開始製作任何內容之前 — 務必先詢問或建議

在了解三件事之前，不要開始撰寫投影片。 直接詢問使用者，或者 — 如果他們已經提供了豐富的內容 — 提出一個合適的預設選項並確認。

  1. 內容與觀眾。 簡報主題是什麼？大約幾頁？觀眾是誰（工程師 / 高階主管 / 小紅書讀者 / 學生 / VC）？
  2. 風格 / 主題。 36 種主題中哪一種最適合？如果不確定，根據調性推薦 2–3 個候選：
    • 商業 / 投資提案 → pitch-deck-vc, corporate-clean, swiss-grid
    • 技術分享 / 工程 → tokyo-night, dracula, catppuccin-mocha,
      terminal-green, blueprint
    • 小紅書圖文 → xiaohongshu-white, soft-pastel, rainbow-gradient,
      magazine-bold
    • 學術 / 報告 → academic-paper, editorial-serif, minimal-white
    • 前衛 / 科技 / 發表 → cyberpunk-neon, vaporwave, y2k-chrome,
      neo-brutalism
  3. 起點。 使用 14 種全 deck 模板之一，還是從頭開始？指向最接近的 templates/full-decks/<name>/ 並詢問是否合適。如果使用者的內容暗示了明顯的選擇（例如「我要做產品發布會」→ product-launch），請自信地提出，而不是盲目詢問。

一個好的開場訊息範例：

我可以幫你做這份 PPT！先確認三件事：

  1. 大致內容 / 頁數 / 觀眾是誰？
  2. 風格偏好？我建議從這 3 個主題裡選一個：tokyo-night（技術分享預設好看）、xiaohongshu-white（小紅書風）、corporate-clean（正式匯報）。
  3. 要不要用我現成的 tech-sharing 全 deck 模板打底？

只有在這些問題釐清之後，才開始搭建 deck 並撰寫內容。

快速開始

  1. 建立一個新的 deck。 從 repo 根目錄執行：
    ./scripts/new-deck.sh my-talk
open examples/my-talk/index.html
  2. 選擇一個主題。 開啟 deck 後按 T 循環切換。或直接寫死：
    <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
    目錄在 references/themes.md。
  3. 選擇版面。 從 templates/single-page/ 中的檔案複製 <section class="slide">...</section> 區塊到你的 deck 中。取代示範資料。
    目錄在 references/layouts.md。
  4. 加入動畫。 在任何元素上加上 data-anim="fade-up"（或 class="anim-fade-up"）。在 <ul>/網格上，使用 anim-stagger-list 實現序列化顯示。對於 Canvas FX，使用 <div data-fx="knowledge-graph">...</div> 並包含 <script src="../assets/animations/fx-runtime.js"></script>。
    目錄在 references/animations.md。
  5. 使用全 deck 模板。 將 templates/full-decks/<name>/ 複製到 examples/my-talk/ 作為起點。每個資料夾都是自包含的，帶有限定 CSS。目錄在 references/full-decks.md，畫廊在 templates/full-decks-index.html。
  6. 渲染為 PNG。
    ./scripts/render.sh templates/theme-showcase.html       # 單頁
./scripts/render.sh examples/my-talk/index.html 12      # 12 頁

製作規則（重要）

  • 務必從模板開始。 不要從頭撰寫投影片 — 先從 templates/single-page/ 複製最接近的版面，然後取代內容。
  • 使用 token，不要使用字面顏色。 每個顏色、圓角、陰影都應來自 assets/base.css 中定義並由主題覆寫的 CSS 變數。正確：color: var(--text-1)。錯誤：color: #111。
  • 不要發明新的版面檔案。 優先組合現有的版面。只有在 30 種版面都不適用時，才新增 templates/single-page/*.html。
  • 尊重 chrome 插槽。 .deck-header、.deck-footer、.slide-number 和進度條由 assets/base.css + runtime.js 提供。
  • 鍵盤優先。 務必包含 <script src="../assets/runtime.js"></script>，以便 deck 支援 ← → / T / A / F / S / O / hash 深層連結。
  • 每個邏輯頁面一個 .slide。 runtime.js 讓 .slide.is-active 可見；其他全部隱藏。
  • 提供備註。 將演講者備註包在每張投影片內的 <div class="notes">…</div> 中。按 S 開啟覆蓋層。
  • 絕對不要將僅供演講者使用的文字放在投影片本體上。 像是「這一頁展示了……」或「Speaker: 這裡可以補充……」或針對演講者的小型說明文字，必須放在 <div class="notes"> 內，而不是放在投影片上可見的 <p> / <span> 元素中。.notes class 預設為 display:none — 它只會在 S 覆蓋層中出現。投影片應僅包含面向觀眾的內容（標題、項目符號、資料、圖表、圖片）。

撰寫指南

詳見 references/authoring-guide.md 的逐步說明：檔案結構、命名方式、如何將大綱轉換為 deck、如何根據觀眾選擇版面與主題、如何製作中英文 deck，以及如何匯出。

目錄（需要時載入）

檔案結構

html-ppt/
├── SKILL.md                 （本檔案）
├── references/              （詳細目錄，需要時載入）
├── assets/
│   ├── base.css             （token + 基本樣式 — 請勿針對個別 deck 編輯）
│   ├── fonts.css            （網頁字型匯入）
│   ├── runtime.js           （鍵盤 + 演講者模式 + 總覽 + 主題循環）
│   ├── themes/*.css         （36 種 token 覆寫，每種主題一個檔案）
│   └── animations/
│       ├── animations.css   （27 種具名 CSS 進場動畫）
│       ├── fx-runtime.js    （投影片進入時自動初始化 [data-fx]）
│       └── fx/*.js          （20 種 Canvas FX 模組：粒子/圖表/煙火…）
├── templates/
│   ├── deck.html                  （最小 6 頁入門範本）
│   ├── theme-showcase.html        （36 頁，每種主題 iframe 隔離展示）
│   ├── layout-showcase.html       （所有 31 種版面的 iframe 導覽）
│   ├── animation-showcase.html    （20 種 FX + 27 種 CSS 動畫投影片）
│   ├── full-decks-index.html      （全部 14 種全 deck 模板的畫廊）
│   ├── full-decks/<name>/         （14 種限定多頁 deck 模板）
│   └── single-page/*.html         （31 種版面檔案，附示範資料）
├── scripts/
│   ├── new-deck.sh                （從 deck.html 建立 deck）
│   └── render.sh                  （無頭 Chrome → PNG）
└── examples/demo-deck/            （完整的運作範例 deck）

渲染為 PNG

scripts/render.sh 使用位於 /Applications/Google Chrome.app/Contents/MacOS/Google Chrome 的無頭 Chrome。對於多頁捕捉，runtime.js 暴露了 #/N 深層連結，render.sh 會迭代 1..N。

./scripts/render.sh templates/single-page/kpi-grid.html        # 單頁
./scripts/render.sh examples/demo-deck/index.html 8 out-dir    # 8 頁，自訂目錄

鍵盤快速參考

←  →  Space  PgUp  PgDn  Home  End    導航
F                                       全螢幕
S                                       開啟演講者視窗（磁吸卡片：目前/下一頁/逐字稿/計時器）
N                                       快速備註抽屜（底部覆蓋層）
R                                       重設計時器（在演講者視窗中）
?preview=N                              URL 參數 — 強制僅預覽模式（單頁，無 chrome）
O                                       投影片總覽網格
T                                       循環主題（讀取 data-themes 屬性）
A                                       在目前投影片上循環示範動畫
URL 中的 #/N                            深層連結到第 N 頁
Esc                                     關閉所有覆蓋層

授權與作者

MIT。版權所有 (c) 2026 lewis <sudolewis@gmail.com>。