Oct 17, 2025

Building Workshop Presentations with Claude Code & Slidev

After creating a 3-day workshop about OpenWebUI with over 100 slides, I discovered an incredibly efficient workflow: combining Claude Code with Slidev. Here’s why this combination is a game-changer for technical presentations.

Why Slidev?

Slidev is a presentation framework for developers that uses Markdown and Vue.js. Unlike traditional slide tools:

Markdown-based: Write slides in plain text with code syntax highlighting
Version control friendly: Git tracks every change cleanly
Developer-focused: Code blocks, diagrams, custom layouts all built-in
Live reload: See changes instantly during development
Export options: PDF, SPA, or present directly in browser

Why Claude Code?

Claude Code isn’t just an AI assistant—it’s a coding partner that understands project structure, maintains consistency, and can execute complex multi-step tasks. For presentation development, it excels at:

Content generation: Creating technical content with proper depth
Layout management: Applying custom layouts across 100+ slides consistently
Style debugging: Finding and fixing CSS issues across the entire presentation
Structural refactoring: Reorganizing content while maintaining coherence

The Workflow

1. Docker-Based Setup

No local Node.js installation needed. Here’s the docker-compose.yml:

services:
  slidev-day1:
    image: tangramor/slidev:latest
    container_name: workshop-slidev-day1
    ports:
      - "3031:3030"
    volumes:
      - ./slidev:/slidev
    command: slidev day1.md --host 0.0.0.0
    restart: unless-stopped

Benefits:

Isolated environment per presentation
No dependency conflicts
Works identically across machines
Easy to scale (I run 3 presentations simultaneously)

2. Custom Layouts

Slidev’s real power is custom layouts. For my workshop, I created:

Code-heavy layout (slidev/layouts/code-heavy.vue):

<template>
  <div class="slidev-layout code-heavy">
    <slot />
  </div>
</template>

<style scoped>
.code-heavy {
  padding-bottom: 7rem;
}
.code-heavy pre {
  max-height: 60vh;
  overflow-y: auto;
}
</style>

Definitions layout for terminology slides:

<template>
  <div class="slidev-layout definitions">
    <slot />
  </div>
</template>

<style scoped>
.definitions strong {
  color: #00d9ff;
  font-size: 1.3rem;
  display: block;
  margin-top: 1.5rem;
}
</style>

3. Applying Layouts

In your Markdown:

---
layout: code-heavy
---

# Docker Compose Example

\`\`\`yaml
services:
  open-webui:
    image: ghcr.io/open-webui/open-webui:main
    ports:
      - "3000:8080"
    volumes:
      - ./data:/app/backend/data
\`\`\`

Key points:
- Persistent storage with volumes
- Port mapping 3000→8080
- Latest image from GitHub registry
---

How Claude Code Accelerates Development

Content Creation

Prompt: “Write a slide explaining OpenWebUI’s vector database integration with examples”

Claude generates:

Technical accuracy (checks docs, code)
Proper structure
Code examples with syntax highlighting
Practical use cases

Bulk Operations

Prompt: “Apply code-heavy layout to all slides with code blocks in day2.md”

Claude:

Analyzes all 40+ slides
Identifies code-heavy content
Adds layout: code-heavy frontmatter
Maintains existing styling

This would take hours manually—Claude does it in seconds.

Debugging Across Files

Prompt: “Strong text appears gray on center layout slides”

Claude:

Searches through style.css
Identifies conflicting opacity rules
Fixes specificity issues
Tests across all three presentations

Documentation Sync

Prompt: “Update MCP integration slide with latest GitHub issue status”

Claude:

Fetches current issue state
Updates content truthfully (marks features as experimental)
Adds code references with line numbers
Maintains technical precision

Real-World Example: Workshop Evolution

My OpenWebUI workshop started as rough outlines. With Claude Code:

Day 1 (28 slides): Basic concepts → Claude added practical examples and proper terminology Day 2 (29 slides): Advanced features → Claude researched actual implementation details Day 3 (47 slides): Production setup → Claude cross-referenced documentation and code

Total development time: ~6 hours instead of days.

Best Practices

1. Clear Project Structure

workshop/
├── docker-compose.yml
├── slidev/
│   ├── day1.md
│   ├── day2.md
│   ├── day3.md
│   ├── style.css
│   └── layouts/
│       ├── code-heavy.vue
│       ├── content-dense.vue
│       └── definitions.vue
└── CLAUDE.md  # Project instructions for Claude

2. Document Your Conventions

Create CLAUDE.md in your project:

# Presentation Guidelines

- Use **strong text** for key terms
- Apply `code-heavy` layout when code exceeds 15 lines
- Keep bullet points to max 5 per slide
- Cite sources with GitHub issue numbers
- Use `tmp/` for temporary analysis files

Claude reads this and maintains consistency automatically.

3. Version Control Everything

git add slidev/
git commit -m "Add MCP integration slides with honest limitations"

Because everything is Markdown and text files, Git diffs are meaningful.

Don’t expect perfection immediately. My workflow:

Draft: “Create outline for Docker basics”
Refine: “Add error handling examples”
Style: “Apply proper layouts”
Review: “Check for technical accuracy”
Polish: “Fix spacing and formatting”

Claude handles each step reliably.

Getting Started

Step 1: Set Up Slidev with Docker

mkdir my-presentation
cd my-presentation

cat > docker-compose.yml <<EOF
services:
  slidev:
    image: tangramor/slidev:latest
    ports:
      - "3030:3030"
    volumes:
      - ./slidev:/slidev
    command: slidev slides.md --host 0.0.0.0
EOF

mkdir slidev
cd slidev

cat > slides.md <<EOF
---
theme: default
colorSchema: dark
---

# My First Slidev Presentation

Built with Claude Code

---

# Slide 2

- Point 1
- Point 2
- Point 3
EOF

Step 2: Start Presenting

docker-compose up -d

Open http://localhost:3030 in your browser.

Step 3: Use Claude Code

Create CLAUDE.md:

# Presentation Project

- Theme: Technical workshop
- Style: Minimal, code-focused
- Custom layouts in `slidev/layouts/`
- Use dark theme consistently

Then in Claude Code:

Add 5 slides about Docker basics with practical examples

Claude generates content, applies layouts, maintains your style.

Advanced Tips

Environment Variables

For workshop dates:

# .env
WORKSHOP_DATE=October 20, 2025

# Inject into slides
./scripts/inject-dates.sh

Claude can generate these scripts too.

PDF Export

docker exec -it slidev npx slidev export slides.md

Custom Themes

Slidev supports full theming. I use:

/* slidev/style.css */
:root {
  --slidev-theme-primary: #00d9ff;
  --slidev-theme-accents: #6366f1;
}

strong {
  color: var(--slidev-theme-primary);
}

Why This Matters

Traditional presentation tools (PowerPoint, Keynote, Google Slides) are:

Not version controllable: Binary formats or messy XML
Manual labor intensive: Every style change requires clicking through slides
Not developer-friendly: Code blocks look terrible

Slidev + Claude Code gives you:

Git-friendly: Every change is trackable
Automated consistency: Claude applies changes globally
Developer experience: Write slides like you write code
AI-assisted content: Focus on structure, Claude handles details

Conclusion

After building 100+ slides this way, I can’t go back. The combination of:

Slidev’s developer-first approach
Docker’s reproducibility
Claude Code’s intelligence

…creates a presentation workflow that’s faster, more maintainable, and more enjoyable than traditional tools.

If you’re a developer creating technical presentations, this workflow will change how you work.

Resources

Written with Claude Code, naturally.

Why Slidev?

Why Claude Code?

The Workflow

1. Docker-Based Setup

2. Custom Layouts

3. Applying Layouts

How Claude Code Accelerates Development

Content Creation

Bulk Operations

Debugging Across Files

Documentation Sync

Real-World Example: Workshop Evolution

Best Practices

1. Clear Project Structure

2. Document Your Conventions

3. Version Control Everything

4. Iterative Refinement

Getting Started

Step 1: Set Up Slidev with Docker

Step 2: Start Presenting

Step 3: Use Claude Code

Advanced Tips

Environment Variables

PDF Export

Custom Themes

Why This Matters

Conclusion

Resources