Carousel Designer

Generate a 7-slide LinkedIn carousel as a single self-contained HTML file using Tailwind CSS CDN. Export to PDF + PNGs via Playwright.

Output structure

<project>/
  src/slides.html      ← single file, all 7 slides
  dist/carousel.pdf
  dist/slides/01.png … 07.png
  package.json         ← { "type": "module", "dependencies": { "playwright": "^1.52" } }

Workflow — follow in order, skip nothing

Phase 1: Design Intelligence (before writing any HTML)

Read references/REFERENCES.md — extract layout patterns, type choices, color moments, spacing ratios from listed references. Note which patterns apply to each slide type.
Read references/layout-rules.md — internalize all 12 rules. These override any general instincts about layout.
Read references/design-standards.md — lock in the typography scale + quality checklist.
Read the brief — map each key point to a slide type and select the right primitive.

Phase 2: Build

Read assets/linkedin-base.html — use as skeleton (fonts, tokens, grid/grain, slide counter all pre-wired)
Read assets/components/primitives.html — copy-paste the right building block per slide
Build src/slides.html:
- Start from base template, fill 7 slides
- Apply layout-rules.md constraints (alignment, scale contrast, negative space)
- Apply patterns extracted from REFERENCES.md
- Every element left-aligned unless explicitly specified otherwise
- Slide counter "0N / 07" on every slide

Phase 3: Render & QA

Run npm install then node scripts/render.mjs
Run full quality checklist from references/design-standards.md
If any check fails: fix and re-render (do not skip)
Print: RENDER_COMPLETE: dist/carousel.pdf + dist/slides/01-07.png

Slide map

| # | Type | Components to use | |---|-------------|-------------------------------------| | 1 | Cover | kicker, hero-headline, subtitle, badge-row | | 2 | Problem | kicker, section-headline, subtitle | | 3 | Stat / Math | kicker, section-headline, metric-card OR equation-block | | 4 | Stat / Math | kicker, section-headline, metric-card OR equation-block | | 5 | System | kicker, section-headline, checklist | | 6 | Solution | kicker, section-headline, stack-grid | | 7 | CTA | kicker, section-headline, ordered-list, closing-line |

Fonts (v2 — always include in <head>)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

Brand tokens (always inline in the `<script>` block)

tailwind.config = {
  theme: { extend: {
    colors: { primary:'#8566AF', secondary:'#BA943B', accent:'#EA3F2C', 'accent-alt':'#FF552E', brand:'#09090B' },
    fontFamily: {
      display: ['"Bebas Neue"', 'Impact', 'sans-serif'],
      body:    ['"Space Grotesk"', '"Helvetica Neue"', 'sans-serif'],
      mono:    ['"JetBrains Mono"', '"SF Mono"', 'monospace'],
    },
  }},
}

Hard rules

Fonts: Bebas Neue + Space Grotesk + JetBrains Mono via Google Fonts CDN — never Arial/Inter/Roboto as display
Use Tailwind CDN (<script src="https://cdn.tailwindcss.com"></script>) — no build step
Every slide: class slide, id slide-0N, 1080×1350 via CSS
Black border: border-left:12px; border-right:12px; border-top:14px; border-bottom:14px; all #09090b
Grid overlay via ::before, grain via ::after (see base template)
chrome div: position:relative; z-index:1; padding:78px 76px; display:flex; flex-direction:column
Slide counter "0N / 07" on every slide: absolute bottom-[28px] right-[32px] z-index:2
The Unforgettable Rule: slide 1 must pass — one element works as a standalone viral image
1 idea per slide — no walls of text
Accent color (#EA3F2C) on ≤1 element per slide
No placeholder text — real content from brief only
Print RENDER_COMPLETE only after PDF + all PNGs verified to exist

Reference files — read ALL in Phase 1 before writing HTML

| File | What it contains | When to use | |------|-----------------|-------------| | references/REFERENCES.md | Design inspiration + brand DNA | Extract layout/type/color patterns before designing | | references/layout-rules.md | 12 explicit design rules | Alignment, scale contrast, spacing, card style, narrative arc | | references/design-standards.md | Typography scale, color rules, quality checklist | Type sizes, color assignments, QA after render |

Asset files — copy-paste when building

| File | What it contains | |------|-----------------| | assets/linkedin-base.html | Skeleton: fonts, Tailwind config, grid/grain, slide counter wired up | | assets/components/primitives.html | All primitives: kicker, hero-headline, bleed-headline, section-headline, subtitle, metric-card, equation-block, terminal-block, data-table, stack-grid, checklist, asymmetric-layout, badge-row, closing-line+CTA | | scripts/render.mjs | Playwright render → PDF + PNGs (copy to project root) |