Brand Content Generation | Claude Code

Brief

Describe the topic, audience, slide count, and brand. The custom agent fills in the details from your design system.

Generate HTML

Claude Code writes a self contained HTML file with branded slides at 1080x1350px using your exact CSS tokens.

Preview and Iterate

Opens in your browser for visual review. Request changes in plain English: swap colors, edit text, add or remove slides.

Export PDF

Puppeteer screenshots each slide at 2x resolution. pdf-lib combines them into a single PDF ready for LinkedIn upload.

🎨

Pixel Perfect BrandReads your actual CSS design tokens: fonts, colors, spacing, shadows. Every slide matches your website exactly.

⚡

Instant IterationChange a headline, swap a stat, add a slide. Describe the edit in plain English and Claude Code updates the HTML in seconds.

📄

LinkedIn Ready PDFAutomated export to individual PNGs and a combined PDF. Upload directly to LinkedIn as a carousel document.

🤖

Custom AgentA dedicated agent file encapsulates brand knowledge, content principles, logo paths, and export commands.

🖼️

Official LogosUses your actual tool and brand logos from SVG files. No approximations, no inline SVG hacks, clean rendering every time.

📐

Multiple FormatsCarousels (1080x1350), square posts (1080x1080), landscape (1200x627). Same workflow, different slide dimensions.

How the export works under the hood

The export script uses Puppeteer to open the HTML file in a headless Chrome browser at 2x device scale (for sharp rendering on retina displays). It selects every element with the .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.

Getting started in five minutes

You need three things: (1) a folder with your brand's CSS file or design tokens, (2) a simple Puppeteer export script (about 50 lines, uses puppeteer and pdf-lib), and (3) a custom agent markdown file that teaches Claude Code your brand. Once set up, generating a new carousel takes about 30 seconds: describe the topic and Claude Code does the rest. The same setup works for your entire team: share the brand CSS and export script, each person creates their own agent file.