html-ppt — HTML PPT Studio
Author professional HTML presentations as static files. One theme file = one
look. One layout file = one page type. One animation class = one entry effect.
All pages share a token-based design system in
assets/base.css
.
Install
npx skills
add
https://github.com/lewislulu/html-ppt-skill
One command, no build. Pure static HTML/CSS/JS with only CDN webfonts.
What the skill gives you
36 themes
(
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 full-deck templates
(
templates/full-decks//
) — complete multi-slide decks with scoped
.tpl-
CSS. 8 extracted from real-world decks (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 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module,
presenter-mode-reveal
— 演讲者模式专用)
31 layouts
(
templates/single-page/.html
) with realistic demo data
27 CSS animations
(
assets/animations/animations.css
) via
data-anim
20 canvas FX animations
(
assets/animations/fx/*.js
) via
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
Keyboard runtime
(
assets/runtime.js
) — arrows, T (theme), A (anim), F/O,
S (presenter mode: magnetic-card popup with CURRENT / NEXT / SCRIPT / TIMER cards)
, N (notes drawer), R (reset timer in presenter)
FX runtime
(
assets/animations/fx-runtime.js
) — auto-inits
[data-fx]
on slide enter, cleans up on leave
Showcase decks
for themes / layouts / animations / full-decks gallery
Headless Chrome render script
for PNG export
When to use
Use when the user asks for any kind of slide-based output or wants to turn
text/notes into a presentable deck. Prefer this over building from scratch.
🎤 Presenter Mode (演讲者模式 + 逐字稿)
If the user mentions any of:
演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器
, or says things like "我要去给团队讲 xxx", "要做一场技术分享", "怕讲不流畅", "想要一份带逐字稿的 PPT" —
use the
presenter-mode-reveal
full-deck template
and write 150–300 words of 逐字稿 in each slide's