Carousel Designer

Transform any idea into a visually stunning social media carousel using a paper/editorial design aesthetic.

Trigger

Invoked when the user says something like:

• "make a carousel about X"
• "create slides for X"
• "turn this into a carousel"
• "carrossel sobre X"

Design System — Paper Aesthetic

Every carousel must feel like a beautifully designed editorial piece, as if printed on paper. Core rules:

Typography

• Display font: serif with character (Playfair Display, DM Serif Display, Cormorant Garamond, Libre Baskerville)
• Body font: clean sans (DM Sans, Plus Jakarta Sans, Outfit)
• Use dramatic size contrast — huge headline, small body
• Mix weights aggressively: ultra-bold display + light body

Color Palette (pick one per carousel)

• Paper Warm: #F5F0E8 bg, #1A1208 text, #C8A96E accent
• Paper Cool: #EFF2F0 bg, #0D1B2A text, #4A7C6F accent
• Paper Ink: #FAFAF8 bg, #111111 text, #E63946 accent
• Paper Dusk: #F0EBE3 bg, #2D2320 text, #8B5E3C accent
• Paper Night: #1C1917 bg, #F5F0E8 text, #D4A853 accent (dark variant)

Visual Elements

• Thin rule lines (1px, border-top) as decorative dividers
• Small ALL CAPS labels above headlines (letter-spacing: 0.15em, font-size: 11px)
• Issue/slide numbers styled as editorial pagination: 01 / 07
• Subtle paper texture via CSS background-image: url("data:image/svg+xml,...") or noise overlay
• Generous padding (48–64px sides)
• Asymmetric layouts — text not always centered
• Optional: torn edge effect at bottom of some slides using SVG clip-path

Slide Structure

Every carousel has:

1. Cover slide — bold hook headline, subhead, slide count teaser
2. Content slides (3–7) — one key idea per slide, always with: label + headline + body + visual element
3. CTA slide — call to action, brand name, next step

Content Rules

• One idea per slide — no walls of text
• Headline: max 8 words, punchy
• Body: max 40 words, clear and direct
• Always include a "slide X of Y" counter
• Cover must have a hook that creates curiosity or urgency

Output Format

Render as an interactive React artifact:

• Horizontal carousel with prev/next navigation
• Keyboard arrow key support
• Slide counter (e.g. "2 / 6")
• Each slide is 1080×1080px (square, Instagram-native) scaled to fit viewport
• Smooth slide transition (CSS transform translateX)
• Download hint: "Right-click each slide → Save image" (or note about screenshot)

Process

1. Receive the idea/topic from the user
2. Plan: define number of slides, one-line content per slide
3. Choose palette and font pair that matches the topic tone
4. Build the React carousel artifact
5. Ask if user wants to adjust copy, colors, or number of slides

Example Topics & Tone Mapping

Topic	Palette	Tone
Marketing tips	Paper Ink	Bold, direct
Product launch	Paper Night	Premium, exciting
Educational content	Paper Warm	Friendly, approachable
Finance/business	Paper Cool	Clean, trustworthy
Lifestyle/wellness	Paper Dusk	Warm, personal