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) |