/graphic-slide-deck

name: graphic-slide-deck
description: Generates a professionally designed HTML slide deck from a brief or content. Outputs a single-file presentation + optional PDF. Supports 13 layout types and 8 style presets. Trigger when user says "create a slide deck", "make a presentation", "build a pitch deck", "make slides", "convert my notes to slides".
compatibility: [claude-code, gemini-cli, github-copilot]
author: OpenDirectory
version: 1.0.0

Graphic Slide Deck

Generate a professionally designed HTML slide deck from a brief, content notes, or an existing file. Output is a single self-contained HTML file -- opens in any browser, no build tools.

---

**Critical rules -- non-negotiable:**

1. Every slide MUST fit within 100vh. No scrolling inside slides. Content overflows → split into two slides. 2. ALL font sizes and spacing MUST use `clamp()`. Never fixed px/rem on anything that scales. 3. Single self-contained HTML: all CSS/JS inline. Zero external dependencies except font CDN link. 4. Never dump HTML in chat. Save to file, show summary only. 5. No generic AI slop aesthetics -- check against the DO NOT USE list in `references/style-presets.md`.

---

Step 1: Brief Intake

Need three things to start. If all three present in the message: skip to Step 2.

If any missing, ask exactly:

> "To get started, I need three things: > 1. **Purpose** -- what is this deck for? (investor pitch / sales call / conference talk / internal presentation / onboarding / other) > 2. **Audience** -- who will see it? (VCs, prospects, your team, executives, conference room, LinkedIn) > 3. **Topic or content** -- paste notes, a URL, a brief description, or upload a file"

Wait for all three before continuing.

---

Step 2: Complete Intake

Ask all questions in one message, grouped by category. User can skip any -- defaults apply.

> "A few questions before I start: > > **Content** > 1. **Key message** -- single sentence the audience must remember after leaving > 2. **Slide count** -- Short (5-10) / Medium (10-20) / Long (20+)? > 3. **Content source** -- All content ready / Rough notes (I'll structure) / Topic only (I'll draft)? > 4. **Existing assets** -- Any images, screenshots, or logos to include? (yes + paths / no) > > **Design** > 5. **Style** -- midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "show me options" > 6. **Aspect ratio** -- 16:9 (1920×1080, default) / 1:1 (1080×1080, LinkedIn) > 7. **Inline editing** -- should text be editable in-browser after export? (Yes / No) > > **Output** > 8. **Output format** -- HTML only / HTML + PDF / HTML + PDF + deploy to URL > 9. **Deck name** -- slug for file/folder naming (e.g. "q2-investor-pitch"); I'll derive if skipped"

**Defaults if skipped:**

| Question | Default | |---|---| | Key message | derived from purpose + topic | | Slide count | 12 | | Content source | topic only | | Existing assets | none | | Style | clean-slate | | Aspect ratio | 16:9 | | Inline editing | No | | Output format | HTML + PDF | | Deck name | derived from topic slug |

**If style = "show me options":** Generate 3 single-slide HTML previews (one for each of 3 different style presets that fit the deck's purpose). Save to `.claude-design/previews/style-a.html`, `style-b.html`, `style-c.html`. Open each: `open .claude-design/previews/style-a.html` etc. Ask user to pick before Step 3.

---

Step 2.5: Internal Design Direction (not shown to user)

From Step 2 answers, determine before Step 3:

**Visual character** (derived from style, or inferred if not specified):

• midnight-editorial or magazine-red → `dark-editorial`
• clean-slate or product-minimal → `light-minimal`
• matt-gray → `neutral-professional`
• brutalist → `bold-expressive`
• mint-pixel-corporate or soft-cloud → `fresh-corporate`
• Style not specified: investor pitch → midnight-editorial; sales → clean-slate; conference → brutalist or midnight-editorial; internal → matt-gray

**ONE unmissable slide** -- identify before Step 3:

• Investor pitch → stat-highlight (traction/metrics slide)
• Sales deck → stat-highlight (ROI/results slide)
• Conference talk → quote-callout or stat-highlight (key insight)
• Internal presentation → closing-cta (decision/recommendation slide)

**Layout selection bias** -- note the 2-3 most relevant layouts for this deck type to prioritize in Step 3.

Never ask the user for design direction -- derive it entirely from their answers.

---

Step 3: Structure Design

Read `references/layout-library.md` before planning.

Plan the full slide sequence. Assign a layout type from the 13 in `references/layout-library.md` to each slide.

**Deck type → typical structure:**

**Investor pitch (12 slides):** 1. [title-hero] Company + tagline 2. [section-divider] The Problem 3. [text-full] Problem detail 4. [text-left-image-right] Solution overview 5. [image-full] Product screenshot 6. **[stat-highlight] Traction -- unmissable slide** 7. [comparison-table] vs. competitors 8. [timeline] Roadmap 9. [text-full] Team 10. [stat-highlight] Market size 11. [text-left-image-right] Business model 12. [closing-cta] The ask

**Sales deck (8-10 slides):** 1. [title-hero] 2. [quote-callout] Prospect pain point 3. [text-left-image-right] Solution 4. [image-grid] Product screenshots 5. **[stat-highlight] ROI/results -- unmissable** 6. [comparison-table] vs. alternatives 7. [text-full] Implementation / next steps 8. [closing-cta]

**Conference talk (15-20 slides):** title-hero → section-dividers → text-full slides → image-full → **stat-highlight or quote-callout (unmissable)** → timeline → closing-cta

**Internal presentation (8-12 slides):** title-hero → text-full (context) → stat-highlight (current state) → two-column-text (options) → comparison-table → text-full (recommendation) → **closing-cta (the decision -- unmissable)**

Output the proposed structure as a numbered list with `[layout-type]` in brackets. Example:

Proposed structur