How I Built an IG carousel editor with AI

The original idea was simple: every time I published a blog post, I wanted a way to automatically generate Instagram carousels from the content. Repurpose the writing. Don't let a 2,000-word essay die on the blog ~ turn it into swipeable slides.

So I built a component that takes a pool of slides ~ cover, quote, stat, insight ~ and randomly picks a set to display at the bottom of each post. Hit “Regenerate” and you get a different combination. It worked great.

But then I kept thinking... what if I could edit the slides? What if I could add my own text, swap images, rearrange the order?

That “what if” turned into weeks of building.

It didn't happen overnight. I'd add a feature, break something else. Fix that, then realise the layout was wrong. Redesign the layout, then the export would stop working. Months of this.

The generator (the blog version) was working fine ~ it could pull random slides from a pool and display them. But turning that into a full editor meant building an entirely different interface: a slide list panel, a live preview, an edit form, drag-and-drop reordering, image uploads, format switching.

Each version took weeks, not hours. Start small, iterate endlessly, and don't pretend the messy middle didn't happen.

Let me be real: AI didn't build this alone. I'm a software engineer, and that mattered. A lot.

AI is incredible at generating boilerplate, scaffolding components, and turning vague descriptions into working code fast. But it also has a talent for overcomplicating the simplest things. I'd ask for a basic layout change and it would rewrite the entire component. I'd ask it to fix a bug and it would introduce three new ones.

Having engineering skills meant I could catch those moments, debug them, and steer things back on track. Without that? I'd probably still be stuck on version 2.

“I want a carousel slide that has a big number in the center, like '500%', with a small label underneath. The background should be creamy. The font should be bold and uppercase.”

And it built it. Just like that.

Then I said: “Make the number bigger. Add some spacing. Oh, and can you put a subtle grid pattern behind it?”

And it did that too.

AI is a speed multiplier, not a replacement. It handles the grunt work so you can focus on the decisions that matter. But someone still needs to make those decisions ~ and fix the mess when AI goes sideways.

Here's where most people stop. They build something functional but ugly. I wanted mine to look intentional.

So I told the AI about my brand: warm cream backgrounds, coral accents, a mix of bold uppercase headlines and soft serif italics. Basically, I described the vibes of my website and said “make the slides match.”

I applied these colors across all 9 slide types. Added a subtle grid background, my watermark in the corner, and consistent padding. Every slide looked like it belonged to the same family.

Think of it like giving your friend a mood board and saying 'make everything feel like this.' That's literally what I did.

The carousel system ~ from my brand guidelines page

Every slide type, spec, and example ~ documented so anyone on my team can create on-brand carousels without guessing.

Once the basics worked, I started adding features. Again ~ by just describing what I wanted:

• Drag-and-drop reordering

  "Let me drag slides around to change the order." Done.

• Image uploads with masks

  "I want to add photos to any slide and crop them in circles, arches, or blobs." Done.

• Terminal slides

  "Make a slide that looks like a code terminal ~ black background, green text, blinking cursor." Done.

• Pre-built templates

  "Give me 5 starter templates ~ Product Launch, Quote Series, Behind the Scenes, Tips & Tricks, Books I Read." Done.

• Format switching

  "Let me toggle between square (1:1) and portrait (4:5) Instagram formats." Done.

Each feature took about 5~10 minutes of conversation. Describe it, review it, tweak it, move on.

This was the part I was most nervous about. How do you turn something on a screen into an actual image file you can post on Instagram?

I said to the AI: “When I click Export, I want it to take each slide, turn it into a high-quality PNG, then bundle them all into a ZIP file I can download.”

Under the hood, it uses something called html-to-image (basically takes a screenshot of each slide at full resolution) and JSZip (puts all the screenshots into a zip file). But you don't need to know that. The AI handles the technical stuff.

I just said “make it downloadable” and it figured out the how.

Months of building this taught me more about working with AI than any tutorial. Here's what I wish someone told me:

The whole editor is live on my site right now. Free. No login. No catch.

Pick a template or start from scratch. Add your own text, images, and quotes. Drag slides around. Export the whole thing as a ZIP and post it on Instagram.