| 1 | # html-ppt — HTML PPT Studio |
| 2 | |
| 3 | > A world-class AgentSkill for producing professional HTML presentations in |
| 4 | > **36 themes**, **15 full-deck templates**, **31 page layouts**, |
| 5 | > **47 animations** (27 CSS + 20 canvas FX), and a **true presenter mode** |
| 6 | > with pixel-perfect previews + speaker script + timer — all pure static |
| 7 | > HTML/CSS/JS, no build step. |
| 8 | |
| 9 | **Author:** lewis <sudolewis@gmail.com> |
| 10 | **License:** MIT |
| 11 | **中文文档:** [README.zh-CN.md](README.zh-CN.md) |
| 12 | |
| 13 |  |
| 14 | |
| 15 | > One command installs **36 themes × 20 canvas FX × 31 layouts × 15 full decks + presenter mode**. Every preview above is a live iframe of a real template file rendering inside the deck — no screenshots, no mock-ups. |
| 16 | |
| 17 | ## 🎤 Presenter Mode (new!) |
| 18 | |
| 19 | Press `S` on any deck to pop open a dedicated presenter window with four |
| 20 | draggable, resizable **magnetic cards**: current slide, next slide preview, |
| 21 | speaker script (逐字稿), and timer. Two windows stay in sync via |
| 22 | `BroadcastChannel`. |
| 23 | |
| 24 |  |
| 25 | |
| 26 | **Why previews are pixel-perfect:** each card is an `<iframe>` that loads the |
| 27 | same deck HTML with a `?preview=N` query param. The runtime detects this and |
| 28 | renders only slide N with no chrome — so the preview uses the **same CSS, |
| 29 | theme, fonts and viewport** as the audience view. Colors and layout are |
| 30 | guaranteed identical. |
| 31 | |
| 32 | **Smooth (no-reload) navigation:** on slide change, the presenter window |
| 33 | sends `postMessage({type:'preview-goto', idx:N})` to each iframe. The iframe |
| 34 | just toggles `.is-active` between slides — **no reload, no flicker**. |
| 35 | |
| 36 | **Speaker script rules (3 golden):** |
| 37 | 1. **Prompt signals, not lines to read** — bold the keywords, separate |
| 38 | transition sentences into their own paragraphs |
| 39 | 2. **150–300 words per slide** — that's the ~2–3 min/page pace |
| 40 | 3. **Write it like you speak** — conversational, not written prose |
| 41 | |
| 42 | See [`references/presenter-mode.md`](references/presenter-mode.md) for the |
| 43 | full authoring guide, or copy the ready-made template at |
| 44 | `templates/full-decks/presenter-mode-reveal/` which ships with full 150-300 |
| 45 | word speaker scripts on every slide. |
| 46 | |
| 47 | ## Install (one command) |
| 48 | |
| 49 | ```bash |
| 50 | npx skills add https://github.com/lewislulu/html-ppt-skill |
| 51 | ``` |
| 52 | |
| 53 | That registers the skill with your agent runtime. After install, any agent |
| 54 | that supports AgentSkills can author presentations by asking things like: |
| 55 | |
| 56 | > "做一份 8 页的技术分享 slides，用 cyberpunk 主题" |
| 57 | > "turn this outline into a pitch deck" |
| 58 | > "做一个小红书图文，9 张，白底柔和风" |
| 59 | |
| 60 | ## What's in the box |
| 61 | |
| 62 | | | Count | Where | |
| 63 | |---|---|---| |
| 64 | | 🎤 **Presenter mode** | **NEW** | `S` key / `?preview=N` | |
| 65 | | 🎨 **Themes** | **36** | `assets/themes/*.css` | |
| 66 | | 📑 **Full-deck templates** | **15** | `templates/full-decks/<name>/` | |
| 67 | | 🧩 **Single-page layouts** | **31** | `templates/single-page/*.html` | |
| 68 | | ✨ **CSS animations** | **27** | `assets/animations/animations.css` | |
| 69 | | 💥 **Canvas FX animations** | **20** | `assets/animations/fx/*.js` | |
| 70 | | 🖼️ **Showcase decks** | 4 | `templates/*-showcase.html` | |
| 71 | | 📸 **Verification screenshots** | 56 | `scripts/verify-output/` | |
| 72 | |
| 73 | ### 36 Themes |
| 74 | |
| 75 | `minimal-white`, `editorial-serif`, `soft-pastel`, `sharp-mono`, `arctic-cool`, |
| 76 | `sunset-warm`, `catppuccin-latte`, `catppuccin-mocha`, `dracula`, `tokyo-night`, |
| 77 | `nord`, `solarized-light`, `gruvbox-dark`, `rose-pine`, `neo-brutalism`, |
| 78 | `glassmorphism`, `bauhaus`, `swiss-grid`, `terminal-green`, `xiaohongshu-white`, |
| 79 | `rainbow-gradient`, `aurora`, `blueprint`, `memphis-pop`, `cyberpunk-neon`, |
| 80 | `y2k-chrome`, `retro-tv`, `japanese-minimal`, `vaporwave`, `midcentury`, |
| 81 | `corporate-clean`, `academic-paper`, `news-broadcast`, `pitch-deck-vc`, |
| 82 | `magazine-bold`, `engineering-whiteprint`. |
| 83 | |
| 84 |  |
| 85 | |
| 86 | Each is a pure CSS-tokens file — swap one `<link>` to reskin the entire deck. |
| 87 | Browse them all in `templates/theme-showcase.html` (each slide rendered in an |
| 88 | isolated iframe so theme ≠ theme is visually guaranteed). |
| 89 | |
| 90 |  |
| 91 | |
| 92 | ### 15 Full-deck templates |
| 93 | |
| 94 | Eight extracted from real-world decks, seven generic scenario scaffolds: |
| 95 | |
| 96 | **Extracted looks** |
| 97 | - `xhs-white-editorial` — 小红书白底杂志风 |
| 98 | - `graphify-dark-graph` — 暗底 + 力导向知识图谱 |
| 99 | - `knowledge-arch-blueprint` — 蓝图 / 架构图风 |
| 100 | - `hermes-cyber-terminal` — 终端 cyberpunk |
| 101 | - `obsidian-claude-gradient` — 紫色渐变卡 |
| 102 | - `testing-safety-alert` — 红 / 琥珀警示风 |
| 103 | - `xhs-pastel-card` — 柔和马卡龙图文 |
| 104 | - `dir-key-nav-minimal` — 方向键极简 |
| 105 | |
| 106 | **Scenario decks** |
| 107 | - `pitch-deck`, `product-launch`, `tech-sharing`, `weekly-report`, |
| 108 | `xhs-post` (9-slide 3:4), `course-module`, |
| 109 | **`presenter-mode-reveal`** 🎤 — complete talk template with full 150-300 |
| 110 | word speaker scripts on every slide, designed around the `S` key presenter mode |
| 111 | |
| 112 | Each is a self-contained folder with scoped `.tpl-<name>` CSS so multiple |
| 113 | decks can be previewed side-by-side without collisions. Browse the full |
| 114 | gallery in `templates/full-decks-index.html`. |
| 115 | |
| 116 |  |
| 117 | |
| 118 | ### 31 Single-page layouts |
| 119 | |
| 120 | cover · toc · section-divider · bullets · two-column · three-column · |
| 121 | big-quote · stat-highlight · kpi-grid · table · code · diff · terminal · |
| 122 | flow-diagram · timeline · roadmap · mindmap · comparison · pros-cons · |
| 123 | todo-checklist · gantt · image-hero · image-grid · chart-bar · chart-line · |
| 124 | chart-pie · chart-radar · arch-diagram · process-steps · cta · thanks |
| 125 | |
| 126 | Every layout ships with realistic demo data so you can drop it into a deck |
| 127 | and immediately see it render. |
| 128 | |
| 129 |  |
| 130 | |
| 131 | *The big iframe is loading `templates/single-page/<name>.html` directly and cycling through all 31 layouts every 2.8 seconds.* |
| 132 | |
| 133 |  |
| 134 | |
| 135 | ### 27 CSS animations + 20 Canvas FX |
| 136 | |
| 137 | **CSS (lightweight)** — directional fades, `rise-in`, `zoom-pop`, `blur-in`, |
| 138 | `glitch-in`, `typewriter`, `neon-glow`, `shimmer-sweep`, `gradient-flow`, |
| 139 | `stagger-list`, `counter-up`, `path-draw`, `morph-shape`, `parallax-tilt`, |
| 140 | `card-flip-3d`, `cube-rotate-3d`, `page-turn-3d`, `perspective-zoom`, |
| 141 | `marquee-scroll`, `kenburns`, `ripple-reveal`, `spotlight`, … |
| 142 | |
| 143 | **Canvas FX (cinematic)** — `particle-burst`, `confetti-cannon`, `firework`, |
| 144 | `starfield`, `matrix-rain`, `knowledge-graph` (force-directed physics), |
| 145 | `neural-net` (signal pulses), `constellation`, `orbit-ring`, `galaxy-swirl`, |
| 146 | `word-cascade`, `letter-explode`, `chain-react`, `magnetic-field`, |
| 147 | `data-stream`, `gradient-blob`, `sparkle-trail`, `shockwave`, |
| 148 | `typewriter-multi`, `counter-explosion`. Each is a real hand-rolled canvas |
| 149 | module auto-initialised on slide enter via `fx-runtime.js`. |
| 150 | |
| 151 | ## Quick start (manual, after install or git clone) |
| 152 | |
| 153 | ```bash |
| 154 | # Scaffold a new deck from the base template |
| 155 | ./scripts/new-deck.sh my-talk |
| 156 | |
| 157 | # Browse everything |
| 158 | open templates/theme-showcase.html # all 36 themes (iframe-isolated) |
| 159 | open templates/layout-showcase.html # all 31 layouts |
| 160 | open templates/animation-showcase.html # all 47 animations |
| 161 | open templates/full-decks-index.html # all 14 full decks |
| 162 | |
| 163 | # Render any template to PNG via headless Chrome |
| 164 | ./scripts/render.sh templates/theme-showcase.html |
| 165 | ./scripts/render.sh examples/my-talk/index.html 12 |
| 166 | ``` |
| 167 | |
| 168 | ## Keyboard cheat sheet |
| 169 | |
| 170 | ``` |
| 171 | ← → Space PgUp PgDn Home End navigate |
| 172 | F fullscreen |
| 173 | S open presenter window (magnetic cards) |
| 174 | N quick notes drawer (bottom) |
| 175 | R reset timer (in presenter window) |
| 176 | O slide overview grid |
| 177 | T cycle themes (syncs to presenter) |
| 178 | A cycle a demo animation on current slide |
| 179 | #/N (URL) deep-link to slide N |
| 180 | ?preview=N (URL) preview-only mode (single slide, no chrome) |
| 181 | ``` |
| 182 | |
| 183 | ## Project structure |
| 184 | |
| 185 | ``` |
| 186 | html-ppt-skill/ |
| 187 | ├── SKILL.md agent-facing dispatcher |
| 188 | ├── README.md this file |
| 189 | ├── references/ detailed catalogs |
| 190 | │ ├── themes.md 36 themes with when-to-use |
| 191 | │ ├── layouts.md 31 layout types |
| 192 | │ ├── animations.md 27 CSS + 20 FX catalog |
| 193 | │ ├── full-decks.md 14 full-deck templates |
| 194 | │ └── authoring-guide.md full workflow |
| 195 | ├── assets/ |
| 196 | │ ├── base.css shared tokens + primitives |
| 197 | │ ├── fonts.css webfont imports |
| 198 | │ ├── runtime.js keyboard + presenter + overview |
| 199 | │ ├── themes/*.css 36 theme token files |
| 200 | │ └── animations/ |
| 201 | │ ├── animations.css 27 named CSS animations |
| 202 | │ ├── fx-runtime.js auto-init [data-fx] on slide enter |
| 203 | │ └── fx/*.js 20 canvas FX modules |
| 204 | ├── templates/ |
| 205 | │ ├── deck.html minimal starter |
| 206 | │ ├── theme-showcase.html iframe-isolated theme tour |
| 207 | │ ├── layout-showcase.html all 31 layouts |
| 208 | │ ├── animation-showcase.html 47 animation slides |
| 209 | │ ├── full-decks-index.html 14-deck gallery |
| 210 | │ ├── full-decks/<name>/ 14 scoped multi-slide decks |
| 211 | │ └── single-page/*.html 31 layout files with demo data |
| 212 | ├── scripts/ |
| 213 | │ ├── new-deck.sh scaffold |
| 214 | │ ├── render.sh headless Chrome → PNG |
| 215 | │ └── verify-output/ 56 self-test screenshots |
| 216 | └── examples/demo-deck/ complete working deck |
| 217 | ``` |
| 218 | |
| 219 | ## Philosophy |
| 220 | |
| 221 | - **Token-driven design system.** All color, radius, shadow, font decisions |
| 222 | live in `assets/base.css` + the current theme file. Change one variable, |
| 223 | the whole deck reflows tastefully. |
| 224 | - **Iframe isolation for previews.** Theme / layout / full-deck showcases all |
| 225 | use `<iframe>` per slide so each preview is a real, independent render. |
| 226 | - **Zero build.** Pure static HTML/CSS/JS. CDN only for webfonts, highlight.js |
| 227 | and chart.js (optional). |
| 228 | - **Senior-designer defaults.** Opinionated type scale, spacing rhythm, |
| 229 | gradients and card treatments — no "Corporate PowerPoint 2006" vibes. |
| 230 | - **Chinese + English first-class.** Noto Sans SC / Noto Serif SC pre-imported. |
| 231 | |
| 232 | ## License |
| 233 | |
| 234 | MIT © 2026 lewis <sudolewis@gmail.com>. |
| 235 |