Step 1: Brief
Describe the topic, audience, slide count, and brand. The custom agent fills in the details from your design system.
Step 2: Generate HTML
Claude Code writes a self contained HTML file with branded slides at 1080x1350px using your exact CSS tokens.
Step 3: Preview and Iterate
Opens in your browser for visual review. Request changes in plain English: swap colors, edit text, add or remove slides.
Step 4: Export PDF
Puppeteer screenshots each slide at 2x resolution. pdf-lib combines them into a single PDF ready for LinkedIn upload.
Pixel Perfect Brand
Reads your actual CSS design tokens: fonts, colors, spacing, shadows. Every slide matches your website exactly.
Instant Iteration
Change a headline, swap a stat, add a slide. Describe the edit in plain English and Claude Code updates the HTML in seconds.
LinkedIn Ready PDF
Automated export to individual PNGs and a combined PDF. Upload directly to LinkedIn as a carousel document.
Custom Agent
A dedicated agent file encapsulates brand knowledge, content principles, logo paths, and export commands.
Official Logos
Uses your actual tool and brand logos from SVG files. No approximations, no inline SVG hacks, clean rendering every time.
Multiple Formats
Carousels (1080x1350), square posts (1080x1080), landscape (1200x627). Same workflow, different slide dimensions.
How the export works under the hood
.slide class and takes an individual screenshot of each one as a PNG. Then pdf-lib creates a new PDF document and embeds each PNG as a full page at its original resolution. The result is a multi-page PDF where each page is one carousel slide, exactly the format LinkedIn expects for document uploads.| Approach | Brand consistency | Speed to iterate | Team scalability | |
|---|---|---|---|---|
| Claude Code + HTML | Claude Code + HTML | Exact match (reads your CSS) | Seconds (describe in English) | Any team member with Claude Code |
| Figma templates | Figma templates | Manual (designer maintains) | Minutes (manual edits) | Requires design skills |
| Canva | Canva | Approximate (import brand kit) | Minutes (drag and drop) | Anyone, but limited control |
| Manual design | Manual design (Photoshop, etc.) | Depends on designer | Hours | Requires professional designer |
Setting up the carousel agent
Create a file at ~/.claude/agents/carousel-generator.md that teaches Claude Code your brand's design system and export workflow:
---
name: carousel-generator
description: "Generates LinkedIn carousel posts as HTML, exports to PNG + PDF."
model: opus
tools: Read, Write, Edit, Bash, Grep, Glob
---
# LinkedIn Carousel Generator
You generate LinkedIn carousel posts as self-contained HTML files.
## Brand Design System
- Link your brand.css or inline the design tokens
- List available component classes (cards, badges, stats)
- Reference official logo SVG paths
## Slide Structure
Every slide must be:
```html
<div class="slide carousel"> <!-- 1080x1350 -->
<div class="slide-inner between">
<!-- content -->
</div>
</div>
```
## Export Command
```bash
node export.js posts/topic.html output/topic
```
Generates individual PNGs + combined PDF.Once the agent file exists, Claude Code automatically uses it when you ask for carousel generation. The agent handles everything from content planning to final export.