技能概述
HTML-PPT 係 Open Design 最核心嘅簡報技能,可以生成專業級嘅靜態 HTML 簡報文件。一個主題文件 = 一個視覺風格,一個佈局文件 = 一種頁面類型,所有頁面共享統一嘅設計系統。
支援 36 套主題、15 套全 Deck 模板、31 種佈局、27 種 CSS 動畫 + 20 種 Canvas FX 動畫,仲有鍵盤導航、演講者模式(彈出式 4 卡片視窗:CURRENT / NEXT / SCRIPT / TIMER)同 PNG 導出功能。
觸發關鍵字
- ppt、deck、slides、presentation、keynote、reveal、slideshow
- 幻灯片、演讲稿、分享稿、小红书图文
- pitch deck、tech sharing、technical presentation
什麼時候用
- 做簡報 / PPT / Slides / Keynote
- 做小紅書圖文(3:4 豎版 810×1080)
- 做技術分享簡報
- 做團隊週報簡報
- 做產品發布簡報
- 需要逐字稿 / 演講者模式嘅分享
- 需要做線上課程 / 工作坊材料
使用方法
自然語言觸發
幫我整一份 seed round 嘅 pitch deck
做一個技術分享簡報,用 tokyo-night 風格
做一份小紅書圖文
做一份團隊週報
我要去做技術分享,要一份帶逐字稿嘅 PPT
指定技能
用 html-ppt 技能做簡報
標準工作流程
- 確認三件事:內容 / 頁數 / 受眾是誰?
- 揀主題:從 36 套主題揀 2-3 個候選
- 商務 / 融資 →
pitch-deck-vc、corporate-clean、swiss-grid - 技術分享 →
tokyo-night、dracula、catppuccin-mocha - 小紅書 →
xiaohongshu-white、soft-pastel - 學術 / 報告 →
academic-paper、editorial-serif - 賽博 / 前衛 →
cyberpunk-neon、vaporwave、neo-brutalism
- 商務 / 融資 →
- 揀起點:用全 Deck 模板定 scratch?
輸出格式
多文件 HTML 簡報(index.html + CSS/JS 資源文件),支援:
- 鍵盤導航(← → F S O T A)
- 演講者模式(S 鍵彈出 4 卡片視窗)
- 主題循環切換(T 鍵)
- PNG 導出(render.sh)
- 深度鏈接(#/N)
設計風格
36 套內置主題:
| 類別 | 主題 |
|---|---|
| 商務 | pitch-deck-vc, corporate-clean, swiss-grid, blueprint |
| 開發者 | tokyo-night, dracula, catppuccin-mocha, terminal-green |
| 柔和 | soft-pastel, minimal-white, editorial-serif, rose-pine |
| 前衛 | neo-brutalism, cyberpunk-neon, vaporwave, y2k-chrome |
| 復古 | retro-tv, midcentury, japanese-minimal |
| 小紅書 | xiaohongshu-white, rainbow-gradient |
| 其他 | aurora, bauhaus, glassmorphism, memphis-pop 等 |
實際例子
例子 1:融資路演
用戶:「帮我做一份 Seed Round 嘅 pitch deck,我間公司叫 AIFlow,做 AI 自動化工作流。」
Agent 確認三件事後,生成 10 頁簡報:
- 封面 → 問題 → 解決方案 → 市場機會 → 產品 → Traction → 商業模式 → 團隊 → Ask → Thank you
- 用
pitch-deck-vc模板打底 - 白色背景 + 藍紫漸變 hero 頁 + traction bar chart
例子 2:技術分享 + 逐字稿
用戶:「我要去給團隊做一個關於微服務遷移嘅技術分享,20 分鐘,要逐字稿。」
Agent 用 presenter-mode-reveal 模板:
- 每頁
<aside class="notes">寫 150-300 字逐字稿 - 演講者模式 S 鍵彈出 4 卡片(CURRENT / NEXT / SCRIPT / TIMER)
tokyo-night主題 + JetBrains Mono 代碼塊