Presentation Template

A standalone prompt for generating clickable HTML presentations as single-file artefacts you can email as an attachment. Not part of the 4-prompt workflow — this is a one-shot generator.

The output is one .html file with inline CSS and JS and no external dependencies. The shell provides side drawer navigation with a hamburger toggle, left/right arrow keys to advance slides, and slides centred in the viewport (with vertical scroll inside any slide whose content overflows).

You’ll use two prompts: Prompt A scaffolds the shell with placeholder slides; Prompt B populates real content from a rough content dump, leaving the shell unchanged.

View sample →

Visual style — how to brief Claude Code

Three ways to feed in the look-and-feel, in order of precedence:

1. design.md in the same folder — a short brief with palette hex codes, font choices, and tone words. Most reliable.
2. Reference URL in the prompt — Claude Code fetches the page and extracts colours, typography, spacing.
3. Default — inherits the Playbook’s terminal/IDE aesthetic (system fonts, monospace accents, restrained palette).

If both a design.md file and a reference URL are present, the design.md file takes precedence.

Prompt A — Shell bootstrap

Run this first. Creates the HTML file with the navigation shell, keyboard handling, and a handful of placeholder slides demonstrating each layout.

You are generating a single-file HTML presentation. Read this entire prompt
before starting.

OUTPUT:
- One file: presentation.html
- Inline CSS in a <style> block, inline JS in a <script> block
- No external dependencies — no CDN links, no fonts loaded over the network,
  no images unless explicitly provided
- Must work when opened directly from the file system (file:// protocol)
- Must work when emailed as an attachment and opened from a download

VISUAL STYLE — resolve in this order:
1. If design.md exists in this folder, read it and follow its palette,
   typography, and tone instructions exactly.
2. Else if a reference URL is provided below, fetch it and extract the
   palette, typography, and overall feel. Match it.
3. Else default to: system font stack, monospace for accents, neutral
   palette (off-white background, near-black text, single accent colour).

REFERENCE URL (optional, leave blank to skip):
[paste URL here, or leave empty]

SHELL REQUIREMENTS:

1. Side drawer navigation
   - Fixed to the left edge, slides in from off-screen
   - Hamburger button top-left toggles it open/closed
   - Lists every slide by title with the slide number
   - Clicking a slide title jumps to that slide and closes the drawer
   - Closes when you click outside it
   - Active slide is visually marked in the list

2. Slide container
   - Slides are <section data-slide> elements
   - Only one slide visible at a time
   - Slide content is centred horizontally in the viewport
   - Slide content is centred vertically when it fits
   - Slide content scrolls vertically WITHIN the slide if it overflows
     (the page itself never scrolls — overflow is per-slide)
   - Comfortable reading width: max ~720px for text-heavy slides,
     wider for two-column and full-bleed layouts

3. Keyboard navigation
   - Left arrow / Page Up: previous slide
   - Right arrow / Page Down / Space: next slide
   - Home: first slide
   - End: last slide
   - Escape: close the drawer if open
   - 'M' key: toggle drawer

4. Slide indicator
   - Bottom-right corner: "3 / 12" style counter
   - Subtle, monospace, low-contrast

5. Progress bar
   - Thin bar across the top edge showing progress through the deck

SLIDE LAYOUTS — implement these as CSS classes on <section data-slide>:

- .slide-title       Big centred title + optional subtitle. For deck opening
                     and section dividers.
- .slide-bullets     Heading + bullet list. Bullets reveal on key press
                     (one at a time) when data-progressive="true" is set.
- .slide-two-col     Heading + two equal columns side by side. Stack on
                     narrow viewports (<720px).
- .slide-quote       Large pull-quote with attribution. Centred.
- .slide-image       Full-bleed image with optional caption. Image source
                     is a data URI (base64) if provided, else a placeholder
                     box with the alt text written inside.
- .slide-code        Heading + a code block. Monospace, syntax-neutral
                     (no highlighting library).
- .slide-stat        One large number + a label below. Used for headline
                     metrics.
- .slide-blank       Free-form. Whatever HTML you put inside, centred.

Each layout should look intentional, not generic. Use the resolved visual
style consistently across all of them.

PLACEHOLDER CONTENT:

Generate exactly 8 placeholder slides, one per layout, with lorem-style
filler text. Title each one with the layout name so the deck doubles as
a layout catalogue. The first slide should be .slide-title with the title
"Presentation Template" and subtitle "Replace with real content via Prompt B".

CODE QUALITY:

- Semantic HTML where possible
- CSS uses custom properties for colours and spacing so the palette is
  swappable from one place
- JS is vanilla, no frameworks, no build step
- Comment the major sections of the JS (drawer, keyboard, slide state)

WHEN DONE:

Save as presentation.html. Confirm the file size (it should be small —
under 50KB without images). Tell me how many slides were generated and
which layouts are demonstrated.

Prompt B — Rough content dump

Run this after Prompt A produces the shell. Paste your raw notes; Claude Code maps them to slides.

Replace the placeholder slides in presentation.html with real content from
the rough content dump below. Do not change the shell — keep all navigation,
keyboard handling, drawer behaviour, and visual style exactly as is.

RULES:

- Each ## heading in the rough content dump becomes one slide.
- The text after each heading is the slide content.
- If I tag a slide with [layout-name] after the heading, use that layout.
  e.g. "## Q3 Results [stat]" → use .slide-stat
- If I don't tag a slide, pick the layout that best matches the content
  shape:
    * One sentence + a number → .slide-stat
    * A list of items → .slide-bullets
    * A quote in quotation marks → .slide-quote
    * Two clearly parallel ideas → .slide-two-col
    * Code in a fenced block → .slide-code
    * Just a title → .slide-title
    * Anything else → .slide-blank
- Update the drawer navigation list to reflect the new slide titles.
- Update the slide count.
- Don't add slides I didn't write. Don't merge slides I separated.
- Don't editorialise the copy. Tighten obvious typos and casual phrasing,
  but keep my voice.

ROUGH CONTENT DUMP:

[paste raw notes below this line — anything goes, scribbled headings,
half-sentences, bullet fragments. Use ## for slide breaks.]

---

## [first slide title]

[content]

## [second slide title] [layout-tag-optional]

[content]

[...continue...]

---

WHEN DONE:

Save the updated presentation.html. Tell me the new slide count and flag
any slides where you had to guess the layout.

design.md — optional style brief

Drop this file in the same folder as the prompt before running Prompt A. Claude Code will read it and override the default style.

# Design brief — [client / deck name]

## Palette
- Background: #hex
- Text: #hex
- Accent: #hex
- Muted: #hex

## Typography
- Headings: [font name or stack]
- Body: [font name or stack]
- Monospace: [font name or stack]

Use system fonts only — no network requests.

## Tone
[Three or four words. e.g. "corporate, restrained, confident" or
"playful, bold, generous whitespace".]

## References
[Optional: links to sites, screenshots, or PDFs that capture the feel.]

## Don'ts
[Optional: things to avoid. e.g. "no rounded corners", "no drop shadows",
"never use red".]

Recurring patterns

Tweak one slide. Open presentation.html directly in Claude Code, point at the slide by its title or number, ask for the change. The shell stays untouched.

Reskin for a new client. Update design.md, run Prompt A again to regenerate the shell with the new palette, then re-run Prompt B with your existing rough content dump. Or ask Claude Code to swap only the CSS custom properties block.

Export to PDF. Open the HTML in Chrome → Print → Save as PDF. Set margins to None, background graphics on. The slide-per-page layout maps cleanly because each <section data-slide> is its own viewport.