🎨

Carousel Generator Agent

Generates LinkedIn carousel posts as self-contained HTML files. Exports to PNG slides and combined PDF. Dark and light themes with mobile optimized typography.

Custom Agent·Model: Opus·6 tools·3 sections·1 min read

contentmarketing

Install Prompt

Paste this into Claude Code to set it up:

I want to add the Carousel Generator agent to my Claude Code setup.

Create the file ~/.claude/agents/carousel-generator.md with the agent definition. The frontmatter must start on line 1 (no blank line before ---).

The agent should:
- Generate LinkedIn carousel posts as self-contained HTML files with embedded CSS
- Export slides to individual PNG images and a combined PDF using Puppeteer
- Support dark and light themes with mobile optimized typography
- Model: opus
- Tools: Read, Write, Edit, Bash, Grep, Glob
- Color: pink

The export pipeline uses Puppeteer via a Node.js script. Each slide is an HTML element that gets individually screenshotted at 2x retina resolution.

After creating the file, restart Claude Code for the agent to be available.

01What It Does

From idea to publish ready carousel

Give this agent a topic, a rough outline, or even just a single sentence, and it produces a complete LinkedIn carousel. Each slide is crafted with proper visual hierarchy, readable typography, and a consistent design system. The output is a self-contained HTML file that gets exported to individual PNG slides and a combined PDF, ready to upload directly to LinkedIn.

🌑

Dark ThemeDeep backgrounds with high contrast text. Gradient accents and subtle borders that look sharp on any screen. The default for maximum visual impact in the LinkedIn feed.

☀️

Light ThemeClean white backgrounds with carefully balanced contrast. Professional and readable, ideal for corporate audiences or text heavy slides.

📱

Mobile OptimizedTypography and spacing tuned for mobile screens where most LinkedIn browsing happens. Large text, generous padding, and no elements that get lost at small sizes.

🖼️

Retina ExportAll slides export at 2x device scale factor for crisp rendering on high DPI displays. A 1584x396 slide becomes a 3168x792 PNG, perfect for LinkedIn's image handling.

02How It Works

Content Strategy

Structures the carousel narrative: hook slide to stop the scroll, 5 to 8 content slides that build on each other, and a closing CTA slide. Each slide has one clear idea.

HTML Generation

Creates a single HTML file with all slides as div elements. CSS is fully embedded (no external dependencies). Each slide is a fixed dimension matching LinkedIn's carousel format.

Visual Design

Applies the chosen theme with consistent colors, typography scale, and spacing. Adds gradient accents, icons, and visual hierarchy to make each slide scannable in under 3 seconds.

Puppeteer Export

A Node.js export script launches headless Chrome, navigates to the HTML file, and screenshots each slide element individually. This produces pixel perfect PNGs without viewport artifacts.

PDF Assembly

Individual slide PNGs are combined into a single PDF document. This is the file you upload to LinkedIn as a carousel post (LinkedIn accepts PDF uploads for carousel format).

03Output

	Format	Details
HTML Source	The editable source file	Self-contained HTML with embedded CSS. Edit any slide's text or styling, then re-export.
PNG Slides	Individual slide images	Each slide exported as a separate PNG at 2x retina resolution. Use these for preview or for platforms that accept image carousels.
Combined PDF	The LinkedIn upload file	All slides assembled into a single PDF document. Upload this directly to LinkedIn to create a swipeable carousel post.

The HTML source file is the single source of truth. Make edits there, re-run the export script, and you get fresh PNGs and PDF. No design tool needed for iterations.

Tool Access

ReadWriteEditBashGrepGlob