Build a branded carousel studio in Claude Design, ship it in Claude Code

{
  "primary": "#0a0a0d",
  "accent": "#FF4F00",
  "background": "#0a0a0d",
  "ink": "#ffffff",
  "mutedInk": "rgba(255,255,255,0.6)",
  "fonts": { "display": "Inter Tight", "mono": "JetBrains Mono" },
  "handle": "@yourhandle",
  "radius": "24px",
  "borderColor": "rgba(255,255,255,0.08)",
  "logoSrc": "data:image/svg+xml;base64,…"
}

Build a multi-page web app called Carousel Studio for creating and editing Instagram carousels. The app is brand-agnostic: instead of hard-coded colors and fonts, it ingests a user-uploaded design file / brand kit and themes every slide from it.

BRAND INGESTION (the core idea)
- On first load, show an "Upload your brand" dropzone. Accept a logo/wordmark image (SVG/PNG), an optional brand photo or texture, and either a brand.json design-token file or a simple form the user fills in.
- Parse the uploaded file into a design-token object: { primary, accent, background, ink, mutedInk, fonts: { display, mono }, logoSrc, handle, radius, borderColor }. If a token file is provided, read it directly; if a logo image is dropped, sample its dominant colors to auto-suggest a palette the user can accept or override.
- Store uploaded assets as base64 in localStorage (no backend) so they persist and can be embedded in exports.
- Use {{PLACEHOLDER}} tokens throughout the slide templates that resolve from the brand kit at render time, e.g. {{brand.logo}}, {{brand.handle}}, {{brand.primary}}, {{brand.accent}}, {{brand.background}}, {{brand.font.display}}, {{brand.photo}}. Unfilled placeholders render as visible, styled empty slots ("Drop logo", "Add handle") rather than breaking layout.

STRUCTURE
- index.html — landing: a brand-kit summary bar (logo, palette swatches, fonts) plus a card grid, one card per carousel, each showing a live thumbnail of its first slide themed by the current brand. Cards link to the editor.
- carousel.html?id=… — per-carousel editor: a horizontally-scrollable row of slide frames.
- shared/data.js (carousel content as data with {{placeholders}}), shared/brand.js (upload parsing, token store, color sampling), shared/engine.js (rendering, editing, export), shared/styles.css (token-driven components).

SLIDES
- Each slide is a 1080x1350 portrait frame (Instagram 4:5), rendered at true size and scaled down with CSS transform: scale() for thumbnails.
- A library of reusable templates driven by a tpl field: cover (with logo slot), headline, checklist, chips, numbered steps, big-quote, quote-card, image slide with a user-photo placeholder slot, tip, recipe grid, stacked-text.
- Every slide footer shows the brand logo/handle placeholder + an editable page-number counter (03 / 07) + a "Swipe" pill.
- Seed 5 starter carousels of neutral demo copy so the user immediately sees their brand applied.

EDITING
- Click any text on a slide to edit inline (contenteditable); Enter/Escape commit. Page-number counters are editable too.
- Image and logo slots are drag-and-drop — user drops an image and it fills the slot (persisted as base64).
- Persist edits to localStorage (per-carousel override objects merged over base data by field path, including nested items.0.title). No backend.
- Global Brand panel (slide-in): re-upload logo, edit palette swatches, swap display/mono fonts, edit handle, tweak radius/borders — applied via CSS variables across all slides and thumbnails instantly.
- "+ Add carousel" button creates a new carousel from a template, pre-themed by the brand kit.
- Drag-to-reorder slides (and carousels), auto-renumbering the page counters after a reorder.
- Per-carousel "Reset edits"; global "Reset brand".

EXPORT
- "Export ZIP" renders every slide to a 2x PNG at 1080x1350 and downloads a single ZIP (folder named per carousel, files 01-…png…). Use JSZip plus a DOM-to-image library. Render each slide into a visible on-document stage behind a progress modal so computed styles, fonts, and embedded brand assets all resolve — offscreen or hidden stages yield blank PNGs. Resolve all CSS variables and placeholders to concrete values on the stage, embed uploaded images as base64, wait for document.fonts.ready plus two animation frames before each capture, show a progress bar.
- Also offer "Export brand.json" so the user can save and re-import their kit.

Keep code split across the shared files, canonical HTML, no build step (plain script tags). The guiding principle: the app is a blank, professional template system; the uploaded brand file is the single source of truth for all visual identity.

cd ~/Downloads/carousel-studio
claude

Look at this project. Give me a two-paragraph summary of the architecture — where the carousel data lives, how the brand kit flows through, and what would break if I wanted to deploy this to Vercel.

Deploy this to Vercel. Set up the project, push to a new GitHub repo under my account, and give me the live URL.

Rewrite carousel 3 in a punchier tone — every headline should be six words or less, present tense, no adverbs. Keep the slide structure the same, only change the copy in shared/data.js.

Swap all slide 1 hooks across every carousel for a question that names the reader's pain. Show me the diff before writing.

Add a new template called "myth-vs-truth" — two stacked cards, red and green accents from the brand kit, editable myth and truth text. Wire it up so I can select it from the "+ Add carousel" flow.

Add a "Generate carousel from topic" button. It calls the Anthropic API with a system prompt that returns JSON matching the shared/data.js schema, then drops the result in as a new carousel themed by the current brand kit.