HTML PPT Generator
Overview
Generate presentation decks as ONE self-contained .html file — all CSS and JS inlined, zero external dependencies, opens in any browser and presents immediately. Built-in navigation: arrow keys / space / click zones, progress bar, and slide counter. Print-friendly CSS included so the deck can be exported to PDF via browser print.
Workflow
Step 1: Clarify the brief (quickly)
Collect, in at most one round of questions (skip if already provided):
- 主题与受众 — what the deck is about, who it is for
- 页数与结构 — target slide count or an outline; if the user gives raw material (doc/notes), draft the outline yourself and proceed
- 风格 — pick a theme: 商务深色 / 商务浅色 / 学术 / 可爱活泼 / 极简. Default: 商务浅色. If the user has expressed aesthetic preferences earlier in the conversation (e.g. "可爱一点"), honor them without asking again.
Do not over-ask. For casual requests, infer and go.
Step 2: Build the deck from the template
- Read
assets/slide-template.html— it is the canonical base. It contains the full layout engine (16:9 stage auto-scaled to viewport), navigation JS, progress bar, counter, print styles, and demo slides showing every layout pattern. - Copy the template to the output path, then replace:
- Theme tokens in:root(colors, fonts) to match the chosen style
- The demo<section class="slide">blocks with real content, reusing the layout classes demonstrated in the template (.layout-cover,.layout-section,.layout-content,.layout-twocol,.layout-stats,.layout-quote,.layout-end) - Keep ALL of the
<script>block, the navigation chrome (progress bar / counter), and the stage-scaling logic untouched unless fixing a bug.
Step 3: Content quality rules
- One idea per slide. Title states the conclusion, not the topic ("Token 成本下降 60%" 而非 "成本分析").
- Max ~6 bullet lines per slide, each ≤ 20 characters where possible. Dense text belongs in speaker notes or an appendix slide.
- Prefer visuals over text: use inline SVG for diagrams/charts (no external chart libraries — the file must stay self-contained). Follow the visual rules in
references/design-guidelines.md. - Numbers that matter get the
.layout-statstreatment (big number + short label). - Cover slide: title + subtitle + date/presenter. Final slide: 谢谢 / Q&A / call-to-action.
Step 4: Verify and present
- Open the generated file mentally against the checklist in
references/design-guidelines.md(contrast, overflow risk, consistent spacing). - Check for text overflow on slides with lots of content — split into two slides instead of shrinking font below the minimum sizes in the guidelines.
- Call
present_fileswith the.htmlfile — it opens in the live preview panel automatically. This step is mandatory.
Design & Layout Reference
Read references/design-guidelines.md before writing slide content. It defines:
- Typography scale (minimum font sizes for projection)
- Color token system and theme palettes (including 可爱活泼 style)
- Layout spacing rules and common anti-patterns (walls of text, orphan bullets, low-contrast text)
- Inline SVG chart/diagram conventions for self-contained decks
Output Conventions
- File name:
<主题拼音或英文缩写>-slides.html(e.g.tokease-intro-slides.html), saved in the current workspace unless the user says otherwise. - Language of slide content follows the user's language (default 简体中文).
- Never use external CDNs, web fonts, or remote images. Icons = inline SVG or emoji (only if the user likes emoji). Charts = inline SVG.
