Pitch Deck Walkthrough

A standalone prompt for generating pitch decks as single-file HTML artefacts. Same shell mechanics as the Presentation Template — drawer, keyboard, single-file output — but with a narrative spine baked in.

Every slide is tagged with its role in the pitch arc: Problem, Insight, Solution, Proof, Ask, or Appendix. The drawer groups slides by role so a reviewer can see the logic of the deck at a glance, not just the slide order. A reader who skips to “Proof” sees only the slides arguing the case.

Useful when sending a deck to investors, clients, or internal stakeholders who want to interrogate the structure of the argument as much as the content.

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

View sample →

The narrative spine

Every pitch deck is built around the same six-part arc:

Problem — what’s broken, who hurts, why it matters now
Insight — the non-obvious thing you’ve seen that others haven’t
Solution — what you’re proposing, concretely
Proof — evidence it works (data, case studies, prototypes, testimonials)
Ask — what you want from the audience (investment, buy-in, sign-off)
Appendix — supporting detail for follow-up questions

Slides without a clear role are usually filler. The drawer’s role grouping makes filler obvious.

Visual style

As with the other templates, this follows a priority order: a design.md file in the same folder takes precedence, otherwise use any reference URL provided in the prompt, and if neither is available, fall back to the default Playbook style.

Prompt A — Shell bootstrap

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

OUTPUT:
- One file: pitch.html
- Inline CSS in a <style> block, inline JS in a <script> block
- No external dependencies
- Must work from file:// and as an email attachment

VISUAL STYLE — resolve in this order:
1. design.md in this folder, if present
2. Reference URL below, if provided
3. Default: system fonts, neutral palette, single accent colour

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

SHELL REQUIREMENTS:

1. Side drawer navigation
   - Hamburger top-left toggles open/closed
   - Slides grouped under role headings: Problem, Insight, Solution,
     Proof, Ask, Appendix
   - Empty role groups are hidden
   - Active slide highlighted; active role group is also visually marked
   - Clicking a slide jumps to it and closes the drawer

2. Slide container
   - Slides are <section data-slide data-role="..."> elements
   - One slide visible at a time, centred in viewport
   - Vertical scroll WITHIN a slide if it overflows
   - Page itself never scrolls

3. Keyboard navigation
   - Left / Right / Page Up / Page Down / Space
   - Home / End
   - Escape closes drawer
   - 'M' toggles drawer
   - 'R' cycles to the next slide in the same role (skip-by-section)

4. Role indicator
   - Top-left of every slide (outside the content area), small monospace
     label showing the current role: "PROBLEM 2 / 3"

5. Step indicator
   - Bottom-right: "7 / 18" overall counter

6. Progress bar
   - Top edge of page, but segmented by role — each role gets a coloured
     section of the bar proportional to its slide count

SLIDE LAYOUTS — implement as CSS classes:

- .slide-title       Big centred title + subtitle. Used for deck open
                     and role dividers.
- .slide-statement   One short, declarative sentence centred on the
                     slide. Used for headline insights or the core ask.
- .slide-stat        Big number + label. For market size, growth rates,
                     conversion rates.
- .slide-bullets     Heading + 3-5 short bullets. Bullets reveal one at
                     a time when data-progressive="true".
- .slide-two-col     Heading + two columns. Default use: "before / after",
                     "without us / with us", "today / tomorrow".
- .slide-quote       Large pull-quote with attribution. For customer
                     testimonials and validating quotes.
- .slide-chart       Heading + a chart area. Implement a simple bar or
                     line chart in inline SVG from data attributes —
                     no chart libraries.
- .slide-logo-wall   Heading + grid of logo placeholders. For "trusted
                     by" and "press coverage" slides.
- .slide-team        Heading + grid of team member cards (photo
                     placeholder, name, role, one-line bio).
- .slide-roadmap     Heading + horizontal stages (e.g. Q1, Q2, Q3, Q4)
                     with bullet points under each.
- .slide-blank       Free-form, centred.

ROLE STYLING:

Each role gets a subtle visual signature so it's recognisable in
peripheral vision — a different accent colour or a small role glyph
in the top corner. Keep it restrained; the role label does the
heavy lifting.

PLACEHOLDER CONTENT:

Generate a 12-slide placeholder deck covering the full arc:

  PROBLEM
    1. Title slide ("Pitch Deck Template")
    2. The problem (slide-statement)
    3. Who feels it (slide-bullets)
    4. Why now (slide-stat — a "growing X% per year" stat)

  INSIGHT
    5. The insight (slide-statement)
    6. What others miss (slide-two-col — "Conventional view / Our view")

  SOLUTION
    7. What we're building (slide-bullets)
    8. How it works (slide-two-col or slide-blank)

  PROOF
    9. Early traction (slide-chart)
    10. Customer voice (slide-quote)

  ASK
    11. What we need (slide-statement or slide-bullets)

  APPENDIX
    12. Team (slide-team)

Each placeholder slide should make the layout legible — use lorem-style
filler that's the right shape for the layout, not generic prose.

CODE QUALITY:

- Semantic HTML
- CSS custom properties for palette and spacing
- Vanilla JS, commented sections (drawer, keyboard, role state, progress)

WHEN DONE:

Save as pitch.html. Confirm file size (under 60KB without images).
Tell me the slide count and the role distribution.

Prompt B — Rough content dump

Replace the placeholder slides in pitch.html with the real pitch from
the rough content dump below. Do not change the shell — drawer, keyboard,
role grouping, visual style stay as is.

RULES:

- Each ## heading in the rough content dump becomes one slide.
- Group slides under role headings using # ROLE: <name> markers.
  Available roles: PROBLEM, INSIGHT, SOLUTION, PROOF, ASK, APPENDIX.
- A slide's role is whichever # ROLE marker most recently preceded it.
- Slides can be tagged with a layout in square brackets after the
  heading: "## Market is huge [stat]" → use slide-stat.
- If untagged, pick the layout from content shape:
    Single sentence → slide-statement
    Bullet list → slide-bullets
    Quote in quotation marks → slide-quote
    A number + a label → slide-stat
    Two parallel ideas → slide-two-col
    Quarterly milestones → slide-roadmap
- Update drawer to reflect new slide titles, grouped by role.
- Update slide count and progress bar segments.
- Don't add slides I didn't write. Don't shuffle role order.
- Keep my voice. Tighten typos and casual phrasing only.
- If a role section has zero slides, hide it from the drawer.

ROUGH CONTENT DUMP:

[paste below this line. Use # ROLE: markers and ## for slides.]

---

# ROLE: PROBLEM

## [first slide title]

[content]

## [second slide title]

[content]

# ROLE: INSIGHT

## [slide title]

[content]

[...continue through SOLUTION, PROOF, ASK, APPENDIX...]

---

WHEN DONE:

Save the updated pitch.html. Tell me the slide count per role and flag
any roles that came out empty or thin (1 slide).

design.md — optional style brief

Same shape as other templates. See 12-template-presentation.md for the schema.

Recurring patterns

Tighten the arc. If a role has too many slides, ask Claude Code to propose which to merge or move to Appendix. The role labels make this conversation easy to have at the structural level rather than slide-by-slide.

Reorder for a different audience. Investor decks lead with Problem; client pitches sometimes lead with Insight or Proof. Ask Claude Code to reorder the roles in the drawer and progress bar without touching slide content.

Strip to a one-pager. Ask for a version that flattens the deck into a single scrolling page, one section per role. Useful for follow-up emails after the live pitch.