HTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻灯片", "演讲稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小红书 图文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal
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
CODEBLOCK0
One command, no build. Pure static HTML/CSS/JS with only CDN webfonts.
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.
Before you author anything — ALWAYS ask or recommend
Do not start writing slides until you understand three things. Either ask
the user directly, or — if they already handed you rich content — propose a
tasteful default and confirm.
1. Content & audience. What's the deck about, how many slides, who's
watching (engineers / execs / 小红书读者 / 学生 / VC)?
2. Style / theme. Which of the 36 themes fits? If unsure, recommend 2-3
3. Starting point. One of the 14 full-deck templates, or scratch? Point
to the closest templates/full-decks/<name>/ and ask if it fits. If the
user's content suggests something obvious (e.g. "我要做产品发布会" →
product-launch), propose it confidently instead of asking blindly.
3. Pick layouts. Copy <section class="slide">...</section> blocks out of
files in templates/single-page/ into your deck. Replace the demo data.
Catalog in references/layouts.md.
4. Add animations. Put data-anim="fade-up" (or class="anim-fade-up") on
any element. On <ul>/grids, use anim-stagger-list for sequenced reveals.
For canvas FX, use <div data-fx="knowledge-graph">...</div> and include
<script src="../assets/animations/fx-runtime.js"></script>.
Catalog in references/animations.md.
5. Use a full-deck template. Copy templates/full-decks/<name>/ into
examples/my-talk/ as a starting point. Each folder is self-contained with
scoped CSS. Catalog in references/full-decks.md
and gallery at templates/full-decks-index.html.
6. Render to PNG.
CODEBLOCK3
Authoring rules (important)
- Always start from a template. Don't author slides from scratch — copy the
closest layout from templates/single-page/ first, then replace content.
- Use tokens, not literal colors. Every color, radius, shadow should come
from CSS variables defined in assets/base.css and overridden by a theme.
Good: color: var(--text-1). Bad: color: #111.
- Don't invent new layout files. Prefer composing existing ones. Only add
a new templates/single-page/*.html if none of the 30 fit.
and the progress bar are provided by assets/base.css + runtime.js.
- Keyboard-first. Always include INLINECODE59
so the deck supports ← → / T / A / F / S / O / hash deep-links.
- One .slide per logical page.runtime.js makes INLINECODE62
visible; all others are hidden.
- Supply notes. Wrap speaker notes in <div class="notes">…</div> inside
each slide. Press S to open the overlay.
Writing guide
See references/authoring-guide.md for a
step-by-step walkthrough: file structure, naming, how to transform an outline
into a deck, how to choose layouts and themes per audience, how to do a
Chinese + English deck, and how to export.
