The Exact Prompt I Use to Generate Carousels with Claude

This is a production-ready Claude skill prompt. Copy it, drop it into your Claude project instructions or system prompt, and watch it generate pixel-perfect 1080×1080px LinkedIn carousel slides — complete with PNG files and a compiled PDF.

What This Does

Feed Claude a topic, blog post, URL, or image — and it outputs:

• Individual PNG slide files (1080×1080px, LinkedIn-ready)
• A compiled PDF of the full deck
• A LinkedIn caption with hook, teaser, and hashtags

No Canva. No Figma. No manual layout work.

The slides render server-side via Playwright with Google Fonts loaded, so what you get is exactly what you post.

The Prompt

Copy everything between the --- dividers below:

---
name: carousel
description: Generate LinkedIn carousel slide decks as ready-to-post visual images from a topic, blog post, article text, URL, or attached infographic/image. Use this skill whenever the user mentions "carousel", "slides", "LinkedIn post", "swipe post", "slide deck for social", wants to repurpose content into slides, or asks to turn a blog/article/URL/image into a carousel. Trigger even if the user just says things like "make me a carousel about X" or "turn this into slides". This skill produces individual PNG files (one per slide) AND a compiled PDF — all ready to post on LinkedIn.
---

# Carousel Skill

Generates **premium editorial carousel slides** — each slide renders at 1080×1080px with Stremit.io branding. Output is individual **PNG files per slide** + a **combined PDF**, rendered server-side via Playwright for pixel-perfect font and layout fidelity.

## Default Parameters
- **Platform**: LinkedIn
- **Slide dimensions**: 1080×1080px
- **Slide count**: 5–7 slides
- **Style**: Claude picks based on topic energy

---

## Input Types

Detect automatically:
1. **Topic/idea** → generate content from scratch
2. **Pasted content** → extract key insights → slides
3. **URL** → `web_fetch` the page → treat as pasted content
4. **Image/infographic** → visually read all text, data, charts → extract 5–7 insights → slides (do NOT describe the image, convert its content)

---

## Workflow

1. Analyze input, pick content style
2. Plan all slide copy internally (headline + bullets per slide)
3. Write the HTML file using the Visual Spec — save to `/home/claude/carousel_slides.html`
4. Write the render script using the Render Pipeline — save to `/home/claude/render_carousel.py`
5. Run: `python3 /home/claude/render_carousel.py`
6. Present all PNG files + PDF from `/mnt/user-data/outputs/` with `present_files`
7. Output the LinkedIn caption in chat

---

## Content Style Guide

**Bold & Punchy** → hot takes, tips, personal wins. Short declarative headlines. Power words ("stop", "nobody tells you", "the truth about").

**Educational & Structured** → frameworks, how-tos, steps, tool lists. Numbered bullets. Concrete examples with names/numbers.

**Storytelling** → founder journey, case study, before/after. First-person. Emotional specificity. Arc: problem → decision → what broke → what unlocked → lesson.

---

## Visual Spec — Design System

### Fonts (Google Fonts)

Display/Headlines: Bebas Neue (dramatic weight, condensed editorial) Body/Bullets: DM Sans 300/400/500/600 Accent/Italic: Instrument Serif italic (subtext, quotes)

### Brand Colors

Accent Blue: #0F52FF (primary — headlines, numbers, rules, dots) Gradient: #0F52FF → #6B3FFF (used on dark slides for depth) White: #ffffff Dark bg: #111118 Navy bg: #06081A Light bg: #F5F3EE (warm off-white — alternates with dark) CTA bg: #0F52FF (last slide only — full bleed blue)

### Slide Themes (alternate per deck)
- **Slide 1** — `#0a0a0f` left half + `#0F52FF` right color-block with diagonal clip
- **Dark slides** — `#111118` background, white text, blue accent
- **Light slides** — `#F5F3EE` background, dark text, blue accent
- **Navy slides** — `#06081A` background, white/blue text
- **CTA slide** — `#0F52FF` full bleed, white text, grid-line texture, white pill button

### Every Slide Must Have
1. **Top stripe** — 6px full-width `#0F52FF` bar (white/semi on blue bg)
2. **Counter** — top-left `01 / 06`, 15px DM Sans 500, muted
3. **Tag pill** — top-right, section name, ALL CAPS, 13px, 0.2em spacing, blue border pill on light slides, plain text on dark
4. **Eyebrow** (on dark/navy slides) — blue uppercase label, 15px, 0.2em tracking
5. **Rule line** — 80–100px × 4px blue bar between headline and bullets
6. **Headline** — Bebas Neue, large, tight line-height (0.88–0.95)
7. **Accent word** — key word in headline wrapped in `<em>` → blue or gradient color
8. **Numbered bullets** — `01 02 03` in Bebas Neue blue, body text DM Sans 30px
9. **stremit.io badge** — bottom-left: small blue dot + muted `stremit.io` label

### Slide 1 — Hook Layout
- Left half dark (#0a0a0f), right half #0F52FF color block with diagonal clip path
- Tag top-left, counter top-right
- Headline constrained to left half (`right: 450px`), Bebas Neue 118px
- Key word in headline colored blue (`#0F52FF`)
- Italic subtext below headline in Instrument Serif
- No rule line or bullets

### Last Slide — CTA Layout
- Full `#0F52FF` background
- Subtle CSS grid-line texture: `background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, ...)`
- Bebas Neue 126px headline, white
- Italic serif subtext below
- White pill CTA button with blue text + blue arrow circle
- stremit.io badge bottom-left, white dot, bright label

### Font Sizes

Hook headline: 118px Bebas Neue Dark/Light headline: 104–108px Bebas Neue CTA headline: 126px Bebas Neue Rule line: 80px wide, 4px tall Bullet numbers: Bebas Neue 24–26px Bullet text: DM Sans 30px Tag/eyebrow: 13–15px DM Sans 600 Subtext: Instrument Serif italic 28–30px Counter/logo: 15–17px DM Sans 500

---

## Render Pipeline

After writing `carousel_slides.html`, write and run this Python script:

```python
import os, time
from pathlib import Path
from playwright.sync_api import sync_playwright
from PIL import Image

HTML_PATH = Path("/home/claude/carousel_slides.html")
OUT_DIR   = Path("/mnt/user-data/outputs")
SLIDE_IDS = ["s1", "s2", ...]  # match actual slide IDs
W, H      = 1080, 1080

def render_slides():
    OUT_DIR.mkdir(parents=True, exist_ok=True)
    png_paths = []
    with sync_playwright() as p:
        browser = p.chromium.launch(args=["--no-sandbox"])
        page = browser.new_page(viewport={"width": W, "height": H})
        page.goto(f"file://{HTML_PATH.resolve()}")
        page.wait_for_load_state("networkidle")
        time.sleep(2.5)  # wait for Google Fonts
        for sid in SLIDE_IDS:
            el = page.query_selector(f"#{sid}")
            el.scroll_into_view_if_needed()
            png_bytes = el.screenshot(type="png")
            out = OUT_DIR / f"stremit-slide-{sid}.png"
            out.write_bytes(png_bytes)
            png_paths.append(out)
        browser.close()
    return png_paths

def build_pdf(png_paths):
    imgs = [Image.open(p).convert("RGB") for p in png_paths]
    pdf_path = OUT_DIR / "stremit-carousel.pdf"
    imgs[0].save(pdf_path, "PDF", resolution=150, save_all=True, append_images=imgs[1:])
    return pdf_path

pngs = render_slides()
build_pdf(pngs)

Dependencies: playwright, Pillow (both available in Claude's environment)

HTML File Structure

<!DOCTYPE html>
<html><head>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Serif:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    .slide { width:1080px; height:1080px; position:relative; overflow:hidden; }
    /* Per-slide theme CSS using #s1, #s2 etc IDs */
  </style>
</head><body>
  <div class="slide" id="s1">...</div>
  <div class="slide" id="s2">...</div>
  ...
</body></html>

Use unique #sN IDs per slide. Each slide is a self-contained 1080×1080px div. All positioning is absolute within the slide.

Content Rules

• Headline: max 7 words, must work as standalone screenshot
• Body: max 3 bullets per slide, each 1 line
• Key word in EVERY headline gets accent color via <em>
• No filler phrases: ban "In today's world", "It's no secret"
• Every slide earns the next swipe — end non-CTA slides with an open loop
• Slide 1 = the thumbnail — make it impossible to scroll past
• stremit.io badge bottom-left on EVERY slide

Output Files

Present in this order:

1. stremit-slide-s1.png through stremit-slide-sN.png
2. stremit-carousel.pdf

Then output LinkedIn caption: hook line + 1–2 teaser lines + CTA + 3–5 hashtags.

Quality Checklist

• [ ] Bebas Neue + DM Sans + Instrument Serif loaded from Google Fonts
• [ ] All slides exactly 1080×1080px, overflow:hidden
• [ ] Top stripe on every slide
• [ ] Counter + tag on every slide
• [ ] stremit.io badge on every slide
• [ ] Slide 1 uses split color-block layout
• [ ] Last slide is full #0F52FF with pill CTA
• [ ] Key word in every headline has accent color
• [ ] Rule line separates headline from bullets on all non-hook slides
• [ ] Playwright render script uses time.sleep(2.5) for font loading
• [ ] PDF compiled from all PNGs via Pillow

How to Use It

Option A — Claude Project (recommended)

1. Open claude.ai → Projects → create or open a project
2. Go to Project Instructions
3. Paste the full prompt above
4. Now every conversation in that project has carousel superpowers

Option B — System Prompt / API

Paste it as your system prompt. Works with the Anthropic API and any Claude-powered app that accepts system instructions.

Triggering It

Once the skill is in place, just say:

Make me a carousel about [topic]
Turn this article into a carousel: [paste or URL]
Create slides from this infographic

Claude auto-detects input type and handles the rest.

What Makes This Different

Most AI carousel generators spit out flat, template-looking slides. This prompt uses:

• Playwright for server-side rendering — fonts actually load, layout is pixel-perfect
• A real design system — Bebas Neue headlines, DM Sans body, alternating dark/light themes, diagonal clip paths
• Editorial logic — Slide 1 is engineered to stop the scroll. Every slide creates an open loop that earns the next swipe. The CTA slide closes the arc.
• Content strategy baked in — bold/punchy, educational, and storytelling modes are all handled

Customization

Want to swap the branding? Change two things in the prompt:

Everything else — layout, typography, animation — adapts automatically.

Built by @benjamin · Published on Stremit — the social network for AI builders