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", "slideshow", "幻灯片", "演讲稿", "分享稿", "小红书图文", "talk slides", "pitch deck", "tech sharing", "technical presentation".
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", "slideshow", "幻灯片", "演讲稿", "分享稿", "小红书图文", "talk slides", "pitch deck", "tech sharing", "technical presentation".
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.
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
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 <aside class="notes">.
Each card is draggable by its header and resizable by the bottom-right corner handle. Card positions/sizes persist to localStorage per deck. A "Reset layout" button restores the default arrangement.
Why the previews are pixel-perfect: each preview is an <iframe> that loads the actual deck HTML with a ?preview=N query param; runtime.js detects this and renders only slide N with no chrome. So the preview uses the same CSS, theme, fonts, and viewport as the audience view — colors and layout are guaranteed identical.
Smooth navigation: on slide change, the presenter window sends postMessage({type:'preview-goto', idx:N}) to each iframe. The iframe just toggles .is-active between slides — no reload, no flicker. The two windows also stay in sync via BroadcastChannel.
Only presenter-mode-reveal is designed from the ground up around the feature with proper example 逐字稿 on every slide.
Keyboard in presenter window: ← → navigate (syncs audience) · R reset timer · Esc close popup.
Keyboard in audience window: S open presenter · T cycle theme · ← → navigate (syncs presenter) · F fullscreen · O overview.
House default style: academic-report (settled 2026-07-21)
Unless the user asks for something else, start every new deck from this
style — it was converged over many review rounds on the REACH-ADHD NIH
program-officer briefing (reference deck:
REACH-SPACE/collaborations/Event-JHU-ADHD-NIH-Team/po-update-deck/html-ppt/).
Rule
Value
Background
pure white #ffffff — page AND cards
Font
Times New Roman on every element (code spans too)
Type scale
normal-PPT sizes: titles ~33pt, body ~15-18pt; trim content rather than shrink type
Chrome
NO kicker above titles · NO rule under titles · NO page index
Body text
bullets, ONE SENTENCE PER LINE (.blt list)
Layout
slides fill the page (flex column, space-between)
Palette
ink/grays + navy accent #1f5aa8 + amber warn #b45309 only
Placeholders
dashed amber .todo pill — unfilled content is visible, never presentable by accident
themes/academic-report.css = tokens; academic-report-extras.css = the
component conventions (.blt bullets, .todo pill, kicker-off, page-fill,
table styles). For per-slide SVG / PPTX / PDF export of such a deck, use the
sibling html-to-svg skill — same contract, plus native-shapes pptx.
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.
Content & audience. What's the deck about, how many slides, who's
watching (engineers / execs / 小红书读者 / 学生 / VC)?
Style / theme. DEFAULT to academic-report (house style above) unless
the user signals otherwise; for other tones recommend 2-3 candidates:
Business / investor pitch → pitch-deck-vc, corporate-clean, swiss-grid
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.
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.
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.
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.
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.
Respect chrome slots..deck-header, .deck-footer, .slide-number
and the progress bar are provided by assets/base.css + runtime.js.
Keyboard-first. Always include <script src="../assets/runtime.js"></script>
so the deck supports ← → / T / A / F / S / O / hash deep-links.
One .slide per logical page.runtime.js makes .slide.is-active
visible; all others are hidden.
Supply notes. Wrap speaker notes in <div class="notes">…</div> inside
each slide. Press S to open the overlay.
NEVER put presenter-only text on the slide itself. Descriptive text like
"这一页展示了……" or "Speaker: 这里可以补充……" or small explanatory captions
aimed at the presenter MUST go inside <div class="notes">, NOT as visible
<p> / <span> elements on the slide. The .notes class is display:none
by default — it only appears in the S overlay. Slides should contain ONLY
audience-facing content (titles, bullet points, data, charts, images).
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.
html-ppt/
├── SKILL.md (this file)
├── references/ (detailed catalogs, load as needed)
├── assets/
│ ├── base.css (tokens + primitives — do not edit per deck)
│ ├── fonts.css (webfont imports)
│ ├── runtime.js (keyboard + presenter + overview + theme cycle)
│ ├── themes/*.css (36 token overrides, one per theme)
│ └── animations/
│ ├── animations.css (27 named CSS entry animations)
│ ├── fx-runtime.js (auto-init [data-fx] on slide enter)
│ └── fx/*.js (20 canvas FX modules: particles/graph/fireworks…)
├── templates/
│ ├── deck.html (minimal 6-slide starter)
│ ├── theme-showcase.html (36 slides, iframe-isolated per theme)
│ ├── layout-showcase.html (iframe tour of all 31 layouts)
│ ├── animation-showcase.html (20 FX + 27 CSS animation slides)
│ ├── full-decks-index.html (gallery of all 14 full-deck templates)
│ ├── full-decks/<name>/ (14 scoped multi-slide deck templates)
│ └── single-page/*.html (31 layout files with demo data)
├── scripts/
│ ├── new-deck.sh (scaffold a deck from deck.html)
│ └── render.sh (headless Chrome → PNG)
└── examples/demo-deck/ (complete working deck)
Rendering to PNG
scripts/render.sh wraps headless Chrome at
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome. For multi-slide
capture, runtime.js exposes #/N deep-links, and render.sh iterates 1..N.
./scripts/render.sh templates/single-page/kpi-grid.html # single page
./scripts/render.sh examples/demo-deck/index.html 8 out-dir # 8 slides, custom dir
Keyboard cheat sheet
← → Space PgUp PgDn Home End navigate
F fullscreen
S open presenter window (magnetic cards: current/next/script/timer)
N quick notes drawer (bottom overlay)
R reset timer (in presenter window)
?preview=N URL param — force preview-only mode (single slide, no chrome)
O slide overview grid
T cycle themes (reads data-themes attr)
A cycle demo animation on current slide
#/N in URL deep-link to slide N
Esc close all overlays
