Build a Slide Deck Generator with Claude Code

What You're Building

Every client pitch needs a custom deck. You're not going to open Google Slides and rearrange boxes for 2 hours every time. In this tutorial, you'll build a system that generates polished, 10-slide HTML presentations from a single command. Describe your client, get a finished deck. Dark theme, smooth transitions, responsive, ready to present.

By the end, you'll have a reusable /generate-deck command that reads your brand docs, asks about the client, and produces a custom pitch deck in minutes.

Milestone 1: Write Your Brand Voice Document

Your brand document is the source of truth. Without it, every generated deck sounds generic. With it, they sound like you wrote them yourself.

Prompt:

Create a brand-voice.md file. I'll describe my company and you turn it into a structured brand document.

My company: [describe what you do, who you serve, how you're different]

Include these sections:
- One-liner (what we do in one sentence)
- Who we serve (ideal customers, 2-3 bullet points each)
- Voice rules (how we write — short sentences, active voice, etc.)
- Words we use vs words we ban (table format)
- 3-5 proof points (concrete results — numbers, rankings, outcomes)
- Pricing (our plans and prices)

Replace the bracketed text with your actual business. Be specific. "We help small businesses" is too vague. "We help B2B SaaS companies rank on Google and AI search engines" gives Claude Code something to work with.

The quality of this document determines the quality of every deck you generate. Spend an extra minute making it specific. Tell Claude Code to revise anything that doesn't sound like you.

Try it: Open brand-voice.md. Read the voice rules and the "words we ban" table. If it captures how you actually talk to clients, you're good.

Milestone 2: Build Your First Slide Deck

Now you build one real deck. This becomes the design template for every future deck. You're not just creating a presentation. You're creating the visual system.

Prompt:

Read brand-voice.md. Then build a 10-slide HTML pitch deck for a client.

Client: [a real or example client name]
What they do: [their product/service]
Their audience: [who they sell to]
Our price: $[amount]/month
Pilot: 3 months

Single HTML file. Dark theme (#0a0a0a background, #141414 cards). Accent colors: pink #FF66C2, blue #95bcff, green #7dffb3. Fonts: DM Sans body, Instrument Serif headings (Google Fonts). Navigation: arrow keys, scroll, swipe, click. Progress bar at top. Slide counter bottom-right. Smooth horizontal transitions.

Slides: 1) Cover with stats 2) Challenge + audience cards 3) Solution pipeline 4) Deliverables in 4 cards 5) Channel strategy 6) Timeline 4 phases 7) Full checklist 8) Pricing with guarantee 9) Why us + team 10) Next steps

All content from brand-voice.md. Everything specific to this client.

This is the longest prompt in the tutorial. Everything after it is simpler. This is the only deck you build manually. Claude Code generates the complete HTML with CSS, JavaScript, slide transitions, and responsive layout. One file, no dependencies. Every deck after this one gets generated automatically from this design system.

Note the filename Claude Code creates. You'll need it in the next step.

Try it: Open the HTML file in your browser. Press the arrow keys to navigate. Resize the window. Every slide should have real, client-specific content, not placeholder text.

Milestone 3: Create the Custom Slash Command

One command. That's all it should take.

Prompt:

Create a Claude Code custom slash command at .claude/commands/generate-deck.md

The command should tell Claude to:
1. Read brand-voice.md for company voice and messaging
2. Read [your-first-deck].html as the visual design template
3. Ask the user for: client name, what they do, their audience, goals, pricing tier, channels to emphasize
4. Generate a new 10-slide HTML deck with the same design system but all content customized for the new client
5. Save as [client-name]-deck.html and open in browser

Only ask for info that wasn't already provided.

Replace [your-first-deck].html with the actual filename from Milestone 2.

Custom slash commands are markdown files that tell Claude Code what to do. The file lives at .claude/commands/generate-deck.md. Claude Code creates this folder automatically if it doesn't exist. When you type /generate-deck, Claude Code reads those instructions and follows them. Every time. No re-explaining.

Try it: Type /generate-deck in Claude Code. It should immediately start by reading your brand doc and reference deck, then ask you about the new client.

Milestone 4: Generate Your Second Deck

The real test. Pick a client that's completely different from your first one. Different industry, different audience, different goals.

Prompt:

/generate-deck

When Claude Code asks for client details, describe someone very different from the first deck. If your first was a tech startup, make this one a nonprofit. If your first was B2B, make this one B2C.

The second deck proves the system works. If it looks hand-made for a completely different client while keeping the same visual polish, you've built something real. Same design. Entirely different content. That's the point.

Try it: Open both decks side by side. The design should be identical. The content should be completely different. Every slide should reference the new client's specific product, audience, and goals.

Milestone 5: Layer Your Context

One slash command. One brand document. Now add a second.

Prompt:

Create pricing.md with my detailed pricing tiers:

[Tier 1]: $[price]/month — [what's included]
[Tier 2]: $[price]/month — [what's included]
[Tier 3]: $[price]/month — [what's included]

Add a comparison table and a "what every plan includes" section.

Then update .claude/commands/generate-deck.md to also read pricing.md in step 1.

Every context document you add makes the output smarter. Brand voice handles tone. Pricing handles deal structure. You could add case studies, objection handling, team bios. Each file layers more intelligence into every generated deck.

Try it: Run /generate-deck one more time. When you pick a pricing tier, the deck should include accurate plan details without you typing them out.

What You Built

A slide deck generator. Type /generate-deck, describe your client, get a polished 10-slide HTML presentation in minutes. Every deck matches your brand voice, uses your design system, and contains genuinely customized content.

The system has three layers:

• Brand documents control what you say
• Reference deck controls how it looks
• Slash command orchestrates the pipeline

No design software. No copy-pasting templates. No 2-hour slide sessions. One command.

Take It Further

• Add a case studies doc so the generator includes relevant proof points per industry
• Create different deck types — investor pitch, client proposal, partnership brief — each with its own slash command reading the same brand docs
• Add a /generate-one-pager command that produces a single-page summary using the same brand foundation