Open Carrusel
Chat with Claude. Design Instagram carousels. Export pixel-perfect PNGs.
Local-first. Open source. One command to start.
Table of contents
✨ Why Open Carrusel
Designing Instagram carousels eats hours. You either:
- Pay $20–60/month for a closed-source tool that limits how creative you can get
- Wrestle Canva templates that everyone else also uses
- Hand-craft slides in Figma and lose your weekend
Open Carrusel takes a different bet. You chat with Claude — the same model many designers already trust — and it generates real HTML/CSS slides that get screenshotted to PNGs at exact Instagram dimensions. Slides are unique, on-brand, and pixel-perfect. Everything runs on your laptop. Nothing is sent to a cloud you don't control.
It's open source under MIT. Fork it, tweak the system prompt, ship your own variant. No accounts. No subscriptions. No vendor lock-in.
🎬 See it in action
Dashboard — your carousels, templates, and one-click export.
Editor — chat panel (left), live preview (center), drag-reorderable filmstrip (bottom).
The slides shown above were generated by chatting with Claude. No templates, no copy-paste — every layout, color, and font choice came from a conversation.
🚀 Quickstart (60 seconds)
First run takes 1–2 minutes (Puppeteer downloads ~300 MB of Chromium for PNG export). After that, every launch is seconds.
One-command path (recommended)
- Install Claude Code and authenticate.
- Clone and open the repo in Claude Code:
git clone https://github.com/Hainrixz/open-carrusel.git
cd open-carrusel
claude
- In the Claude Code prompt, type:
/start
That's it. Dependencies install, the dev server starts, your browser opens. Now design carousels by chatting.
Manual path (if you don't use Claude Code)
git clone https://github.com/Hainrixz/open-carrusel.git
cd open-carrusel
npm run setup # installs deps + seeds /data/
npm run dev # starts http://localhost:3000
You won't get the AI chat without Claude Code installed (the in-app agent shells out to the claude CLI), but the editor and export still work for static slides.
🧰 What you can do
- Three-panel editor designed for flow: chat (left), live preview (center), drag-reorderable slide filmstrip (bottom).
- Generate slides by chatting: "Make me a 5-slide carousel about productivity habits — bold sans-serif, dark mode, accent red." Watch them stream in.
- Iterate per slide: "Make slide 3 more minimal", "Change the accent to teal", "Swap the hook for something punchier."
- Three Instagram aspect ratios ready to go: 1:1 (1080×1080), 4:5 (1080×1350), 9:16 (1080×1920).
- Brand config — name, color palette, fonts, logo, style keywords. Claude reads it before every generation so output stays on-brand.
- Templates — save any carousel as a template, reuse it for the next one.
- Reference images — drop in screenshots of carousels you love. Claude studies them to match style.
- Drag to reorder slides via dnd-kit. Undo per-slide if a tweak goes sideways (version history per slide).
- Safe-zone overlay to verify nothing important crops behind Instagram's UI.
- Fullscreen preview for the final review.
- One-click export — Puppeteer screenshots each slide HTML at the exact pixel dimensions Instagram expects, zips them, downloads.
- Captions + hashtags generator built into the editor.
- All local — slides, brand, uploads, exports all live in
/data/ and /public/uploads/. Nothing is sent to a cloud you don't control. The only network call is when Claude Code talks to Anthropic.
💬 How the AI agent works
The in-app agent is the Claude CLI spawned as a subprocess from /api/chat with --allowedTools Bash WebFetch. Messages stream back to the browser via Server-Sent Events.
When you ask for a slide, Claude:
- Reads your brand config + active carousel state from the system prompt
- Writes the slide as a complete HTML/CSS string
- POSTs it to
/api/carousels/[id]/slides via curl (using its Bash tool)
- The new slide appears in your filmstrip seconds later
This is the beginning of the README. Read the rest at the original. Read the full README ↗
