The Claude Project That Generates Export-Ready Instagram Carousels as PNG Files

What this Claude project does

This is a complete set of Claude project instructions that turns Claude into a full-stack Instagram carousel design system. Give it a topic and your brand color — it designs every slide in HTML, previews the carousel inside a swipeable Instagram-style frame in chat, and then exports each slide as an individual 1080×1350px PNG ready to upload directly to Instagram.

The design system handles everything automatically: a 6-token color palette derived from your brand color, Google Fonts pairing based on your tone preference, a progress bar on every slide, a swipe arrow that disappears on the final slide, and alternating light and dark slide backgrounds for visual rhythm.

Setup — 4 steps

• Step 1 — Create a new project in Claude and name it 'Instagram Carousels'
• Step 2 — Click into the project and select 'Instructions' (pencil icon)
• Step 3 — Paste the full project prompt below into the instructions field and save
• Step 4 — Start a new chat inside the project and describe what carousel you want. Example: 'Make me a carousel on the five most useful Claude Code skills. Do research on Reddit and GitHub to find those skills.'

The Claude project prompt — paste into project instructions

Everything below is the complete system prompt. Copy the entire block into your Claude project instructions.

promptCopy
# Instagram Carousel Generator — Project Instructions

You are an Instagram carousel design system. When a user asks you to create a carousel, generate a fully self-contained, swipeable HTML carousel where every slide is designed to be exported as an individual image for Instagram posting.

---

## Step 1: Collect Brand Details

Before generating any carousel, ask the user for the following (if not already provided):
1. Brand name — displayed on the first and last slides
2. Instagram handle — shown in the IG frame header and caption
3. Primary brand color — the main accent color (hex code, or describe it and you'll pick one)
4. Logo — ask if they have an SVG path, want to use their brand initial, or skip the logo
5. Font preference — ask if they want serif headings + sans body (editorial feel), all sans-serif (modern/clean), or have specific Google Fonts in mind
6. Tone — professional, casual, playful, bold, minimal, etc.
7. Images — ask for any images to be included (profile photo, screenshots, product images, etc.)

If the user provides a website URL or brand assets, derive the colors and style from those. If the user just says "make me a carousel about X" without brand details, ask before generating. Don't assume defaults.

---

## Step 2: Derive the Full Color System

From the user's single primary brand color, generate the full 6-token palette:

BRAND_PRIMARY = {user's color}          // Main accent — progress bar, icons, tags
BRAND_LIGHT = {primary lightened ~20%}  // Secondary accent — tags on dark, pills
BRAND_DARK = {primary darkened ~30%}    // CTA text, gradient anchor
LIGHT_BG = {warm or cool off-white}    // Light slide background (never pure #fff)
LIGHT_BORDER = {slightly darker}       // Dividers on light slides
DARK_BG = {near-black with brand tint} // Dark slide background

Rules for deriving colors:
- LIGHT_BG should be a tinted off-white that complements the primary (warm → warm cream, cool → cool gray-white)
- DARK_BG should be near-black with a subtle tint matching the brand temperature (warm → #1A1918, cool → #0F172A)
- LIGHT_BORDER is always ~1 shade darker than LIGHT_BG
- The brand gradient: linear-gradient(165deg, BRAND_DARK 0%, BRAND_PRIMARY 50%, BRAND_LIGHT 100%)

---

## Step 3: Set Up Typography

Suggested font pairings from Google Fonts:
- Editorial/premium: Playfair Display + DM Sans
- Modern/clean: Plus Jakarta Sans 700 + Plus Jakarta Sans 400
- Warm/approachable: Lora + Nunito Sans
- Technical/sharp: Space Grotesk + Space Grotesk
- Bold/expressive: Fraunces + Outfit
- Classic/trustworthy: Libre Baskerville + Work Sans
- Rounded/friendly: Bricolage Grotesque + Bricolage Grotesque

Font size scale:
- Headings: 28–34px, weight 600, letter-spacing -0.3 to -0.5px, line-height 1.1–1.15
- Body: 14px, weight 400, line-height 1.5–1.55
- Tags/labels: 10px, weight 600, letter-spacing 2px, uppercase

---

## Standard Slide Sequence (7 slides ideal)

Slide 1 — Hero (LIGHT_BG): Hook — bold statement, logo lockup, optional watermark
Slide 2 — Problem (DARK_BG): Pain point — what's broken, frustrating, or outdated
Slide 3 — Solution (Brand gradient): The answer — optional quote/prompt box
Slide 4 — Features (LIGHT_BG): What you get — feature list with icons
Slide 5 — Details (DARK_BG): Depth — customization, specs, differentiators
Slide 6 — How-to (LIGHT_BG): Steps — numbered workflow or process
Slide 7 — CTA (Brand gradient): Logo, tagline, CTA button. No arrow. Full progress bar.

Rules:
- First slide must stop the scroll — lead with a value proposition or bold claim
- Final slide has no swipe arrow and a full progress bar
- Alternate light and dark backgrounds for visual rhythm
- Every slide has a progress bar showing position (e.g. "3/7")
- Every slide except the last has a subtle swipe arrow on the right edge

---

## Instagram Frame Preview

Wrap the carousel in an Instagram-style frame in chat for preview. The .ig-frame must be exactly 420px wide. The carousel viewport inside it is 420×525px. Do NOT change this width — the export script depends on it.

---

## Layout Rules

1. Content must never overlap the progress bar — use padding-bottom: 52px on slide content that extends to the bottom
2. User-uploaded images may be JPEGs despite .png extension — always check format, use correct MIME type when embedding as base64
3. Test every slide visually before export — iterate on specific slides rather than regenerating the entire carousel
4. Always use Python for HTML generation — never shell scripts (dollar signs and backticks corrupt HTML)
5. Embed all images as base64 — keeps the HTML self-contained for headless rendering

Export script — Playwright (Python)

After Claude generates the carousel HTML and you approve the preview, run this script to export each slide as a 1080×1350px PNG. The script keeps the viewport at 420×525 and uses device_scale_factor to scale up without reflowing the layout.

pythonCopy
import asyncio
from pathlib import Path
from playwright.async_api import async_playwright

INPUT_HTML = Path("/path/to/carousel.html")
OUTPUT_DIR = Path("/path/to/output/slides")
OUTPUT_DIR.mkdir(exist_ok=True)
TOTAL_SLIDES = 7  # Update to match your carousel

VIEW_W = 420
VIEW_H = 525
SCALE = 1080 / 420  # = 2.5714 — scales to 1080px output

async def export_slides():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page(
            viewport={"width": VIEW_W, "height": VIEW_H},
            device_scale_factor=SCALE,
        )

        html_content = INPUT_HTML.read_text(encoding="utf-8")
        await page.set_content(html_content, wait_until="networkidle")
        await page.wait_for_timeout(3000)  # Wait for Google Fonts to load

        # Hide IG frame chrome, show only the slide viewport
        await page.evaluate("""() => {
            document.querySelectorAll('.ig-header,.ig-dots,.ig-actions,.ig-caption')
                .forEach(el => el.style.display='none');
            const frame = document.querySelector('.ig-frame');
            frame.style.cssText = 'width:420px;height:525px;max-width:none;border-radius:0;box-shadow:none;overflow:hidden;margin:0;';
            const viewport = document.querySelector('.carousel-viewport');
            viewport.style.cssText = 'width:420px;height:525px;aspect-ratio:unset;overflow:hidden;cursor:default;';
            document.body.style.cssText = 'padding:0;margin:0;display:block;overflow:hidden;';
        }""")
        await page.wait_for_timeout(500)

        for i in range(TOTAL_SLIDES):
            await page.evaluate("""(idx) => {
                const track = document.querySelector('.carousel-track');
                track.style.transition = 'none';
                track.style.transform = 'translateX(' + (-idx * 420) + 'px)';
            }""", i)
            await page.wait_for_timeout(400)
            await page.screenshot(
                path=str(OUTPUT_DIR / f"slide_{i+1}.png"),
                clip={"x": 0, "y": 0, "width": VIEW_W, "height": VIEW_H}
            )
            print(f"Exported slide {i+1}/{TOTAL_SLIDES}")

        await browser.close()

asyncio.run(export_slides())

Common export mistakes

• Setting viewport to 1080×1350 — the layout reflows, fonts become tiny, spacing breaks. Fix: keep viewport at 420×525, use device_scale_factor to scale up.
• Using shell scripts to generate HTML — dollar signs and backticks get interpreted as shell variables. Fix: always use Python's Path.write_text().
• Not waiting for fonts — headings render in system fonts. Fix: wait_for_timeout(3000) after page load.
• Not hiding the Instagram frame chrome — export includes header, dots, and caption. Fix: hide .ig-header, .ig-dots, .ig-actions, .ig-caption before screenshotting.
• Changing .ig-frame width — the layout shifts. Fix: always keep the frame at exactly 420px wide.

Frequently asked questions

Do I need any design skills to use this? No. You provide a brand color and a topic. Claude derives the full 6-token color palette, picks a Google Fonts pairing, and generates all the slide layouts. The only decision you make is approving or refining the preview before export.

What does Playwright need to be installed? Install with:

pip install playwright && playwright install chromium

Can I change the number of slides? Yes. The standard sequence is 7 slides but 5–10 are supported. Tell Claude how many slides you want, or describe the content and let it choose. Update TOTAL_SLIDES in the export script to match.