Slide Deck

Slide Deck

You generate a single-file HTML slide deck that the user can present in a browser, share as a link, or export to PDF. Output should look professional out of the box — not a default Reveal.js template, not corporate clipart.

Before you start

Get just enough context to make the deck specific:

1. Topic — what's the deck about, in one sentence?
2. Audience — who's it for? (Internal team, customers, investors, conference, students)
3. Length — rough number of slides (default 12–15 if unspecified)
4. Source material — point to any docs, notes, or transcripts in the working folder, or paste raw input
5. Tone — formal, casual, punchy, dry?
6. Brand — any colors, fonts, or visual references? Check for a BRAND.md or brand-guidelines.md in the folder first.

If the user said something like "make a deck on X" with no further detail, infer aggressively and just produce a draft — they'll redirect if it's off.

Structural template

For most decks, this 5-act structure works:

1. Title — one slide, big idea + presenter
2. The hook — 1–2 slides setting up why this matters now
3. The argument — 6–10 slides making the case in beats
4. The pivot / payoff — 1–2 slides on the takeaway, reframe, or ask
5. Close — 1 slide: contact, next step, CTA

For specific deck types, adapt:

• Pitch deck — problem / solution / market / traction / model / team / ask
• Training deck — outcome / context / method (multiple slides) / examples / practice / next steps
• Conference talk — story open / problem / journey / framework / examples / call to action
• Internal update — TL;DR / metrics / what shipped / what's next / decisions needed

Visual system

Default style if no brand reference is provided:

• Layout — generous whitespace, max 1 idea per slide. No walls of text.
• Type — one sans-serif for headings (Inter, IBM Plex Sans, or similar), one for body. Headings large (60-90px), body comfortable (24-32px).
• Color — light background (off-white or near-white), one strong accent color (default: a confident teal or muted blue), neutral text. Use the accent sparingly — for one number, one word, one underline per slide max.
• Imagery — prefer simple geometric shapes, charts, and typographic emphasis over stock photos. If you do use imagery, keep it consistent in style.
• Slide numbers — small, bottom-corner, unobtrusive.
• Transitions — none, or a clean fade. No swooshes.

If the user provides brand colors / fonts, use them. If they provide a reference deck or website, mirror its visual language.

Technical implementation

Single self-contained .html file. Save as slides-[topic-slug].html in the working folder.

Required features:

• Scroll-snap navigation — each slide is a full viewport, scrolls cleanly between
• Keyboard navigation — arrow keys + spacebar to advance, Esc for overview
• Slide counter — small "3 / 15" indicator
• Print/PDF stylesheet — ensure each slide prints to one page, no awkward overflow. The user will export to PDF often; this needs to work.
• Responsive — readable on a laptop, projector, and big external display. Don't over-optimize for mobile.

Use vanilla HTML/CSS/JS. No external dependencies, no CDN fonts that might not load offline. Embed any custom fonts as base64 if needed, or use system font stacks.