Brooke Wright
Brooke Wright · @wright_mode
FREE SKILL FILE

Stop using boring carousel templates.

Get the complete Claude Code carousel maker skill — brand config wizard, custom HTML templates, and automatic PNG export. Just drop it in and start creating.

Complete .skill file Brand wizard included No code required Works in minutes
Something went wrong. Please try again.

No spam. Unsubscribe anytime.

Wright Mode — Free Resource

Build a Claude Code Carousel Maker From Scratch

Everyone's talking about AI carousel makers. No one's showing you exactly how to build one. Here's the full blueprint — brand config, HTML template, PNG export pipeline, and the complete skill file.

Copy-paste skill file included No coding experience needed Works with any brand Claude Code desktop app Step-by-step walkthrough

What's inside

There's no shortage of carousel tools. Canva has templates. There are dozens of SaaS tools that'll generate slides from a prompt. So why build your own system inside Claude Code?

Because generic tools produce generic carousels. And generic carousels don't stop anyone from scrolling.

Generic Carousel Tools

  • Same templates everyone else uses
  • Limited to their font and colour options
  • Copy sounds like AI wrote it (because it did, with zero context)
  • Export, download, upload — manual every time
  • Monthly subscription for "Pro" features

Your Own Claude Code Skill

  • Template designed to YOUR brand aesthetic
  • Your exact fonts, colours, and voice baked in
  • Copy that sounds like you because it knows your voice
  • One prompt → branded PNGs on your desktop
  • Free forever — it's your file

The real advantage

When your carousel maker knows your brand voice, your banned phrases, and your visual style, the output doesn't need heavy editing. You go from "create a carousel about X" to export-ready slides in under two minutes. That's not a time-saving — it's a workflow transformation.


This is genuinely one of the lowest-barrier Claude Code projects you can build. Here's everything required — and what you can safely ignore.

Claude Code (desktop app)
Your brand colours (hex codes)
A Google Font for headlines
A Google Font for body text
Your social handle
20 minutes of setup time
Coding or developer skills
Design software or Canva Pro
HTML or CSS knowledge
A monthly subscription

Don't know your brand colours?

If you don't have a brand style guide, the setup wizard offers a clean default palette you can start with. You can always update your colours later — it takes about 30 seconds to change them in your config file.


The first time you run the carousel maker, a setup wizard walks you through a series of questions. Your answers get saved to a brand-config.json file, and every carousel you generate from that point forward automatically uses your brand settings.

Here's what the wizard asks — and why each piece matters.

1

Brand name and social handle

Your name (or business name) appears on cover slides and CTAs. Your handle (@yourname) shows on every content slide as subtle attribution.

2

Brand colours (5 values)

Primary (cover slides, dark backgrounds), secondary (accent buttons, emphasis), accent (highlights, tags), background (light slides), and text (body copy). These map directly to CSS variables in your template.

3

Headline and body fonts

Pick any two Google Fonts. The skill loads them dynamically, so they render perfectly in every export. Montserrat + DM Sans is a solid default if you're unsure.

4

Style inspiration

This is the most important step. Describe carousel styles you love, name accounts you admire, or pick a vibe: Clean & Minimal, Bold & Punchy, Soft & Editorial, Playful & Colourful, or Dark & Moody. Claude uses this to generate a unique HTML template that matches your aesthetic.

5

Voice description and banned phrases

Describe how you talk: "casual and direct, a bit cheeky, Australian English." Then list any words you never want to see: "game-changer, unlock, level up, slay." Claude checks every slide against these rules.

What the config file looks like

Once you've answered the wizard, your brand-config.json is saved in your working directory. It looks something like this:

{
  "brand_name": "Wright Mode",
  "handle": "@wright_mode",
  "colors": {
    "primary": "#396a6b",
    "secondary": "#f17a51",
    "accent": "#97d3b4"
  },
  "voice": {
    "description": "Direct, warm, slightly cheeky",
    "banned_phrases": ["game-changer", "slay"]
  }
}

You can edit this file manually anytime, or just tell Claude "change my primary colour to #2a4a5a" and it'll update for you.


The carousel maker runs a five-stage pipeline. You interact with the first two stages (giving a topic and approving copy). The rest happens automatically.

1

Topic Input

Give it a topic, an angle, a transcript, or even pre-written slide content. "Create a carousel about why AI won't replace you" is all it needs.

2

Copy Generation

Claude writes 5-9 slides in your brand voice, following your style rules and avoiding your banned phrases. You review and approve before anything gets built.

3

HTML Build

Approved copy gets injected into your custom HTML template with your brand colours, fonts, and layout. Each slide is a styled HTML element.

4

PNG Export

Claude spins up a local server, opens each slide in a browser, and captures them as high-res 1080×1350 PNGs. Instagram-ready, 4:5 aspect ratio.

5

Ready to Post

PNGs land in a local folder on your machine. Optional: auto-upload to Google Drive for easy scheduling in your favourite social media tool.

The approval gate matters

The skill always pauses after generating copy and waits for your approval. This isn't a limitation — it's the most important design decision. Your voice matters more than speed. Tweak a headline, swap a phrase, reorder slides. Then say "looks good" and the rest is automatic.


The skill follows a strict set of rules for each slide type. Understanding these helps you give better briefs and make faster edits at the approval stage.

Slide 1: The Cover (Scroll-Stopper)

5-8 words maximum. This is a hard rule — Claude counts before outputting. The cover renders in uppercase on a bold primary-colour background. Its entire job is to earn a thumb-pause. Curiosity gaps, relatable questions, and bold claims work best.

Example: "You Don't Need More Tools" or "Stop Posting Without A System"

Slides 2-6: Content (The Arc)

5-20 words per slide. One idea per slide. Content slides alternate between light and dark backgrounds for visual rhythm. They should build an arc: problem → insight → solution, or curiosity → reveal → action.

Don't try to cram three points onto one slide. If a thought needs explaining, give it its own slide. That's what swiping is for.

Final Slide: CTA

Shows your name, handle, and a call-to-action button (default: "Follow for more"). You can customise the button text per carousel — "Save this post", "DM me CAROUSEL", whatever fits the content.

Total slide count: 5-9

Never exceed 9 slides. Instagram allows up to 20, but engagement data consistently shows that 5-9 is the sweet spot. If your topic needs more, split it into a Part 1/Part 2 series.


This is where the magic happens — and where most people assume you need to be technical. You don't. The skill handles everything automatically. But understanding what's happening under the hood helps you troubleshoot and customise.

What happens when you say "looks good"

After you approve the slide copy, the skill kicks off a fully automated export:

Local Server

Starts a Python HTTP server on your machine to serve the HTML file to a browser

Browser Render

Opens each slide one at a time and waits for fonts and layout to fully load

Canvas Capture

Uses html2canvas at 3x scale to capture each slide as a crisp, high-resolution PNG

File Save

Decodes and saves each PNG to a local folder. Kills the server when done

Output dimensions: 1260 × 1575px (4:5 aspect ratio at 3x scale). These are Instagram feed-optimised and look sharp on every device.

Where your files end up

Exported PNGs go to .tmp/carousel-exports/ in your working directory. The HTML source file is kept at .tmp/carousel-[slug].html in case you want to re-export or tweak something manually. Both are regenerated each time — nothing accumulates.


This is what makes the carousel maker genuinely different from every other tool. During setup, Claude doesn't just pick a template from a library — it generates a unique HTML template based on your style inspiration.

The five style vibes

1 Clean & Minimal — Lots of white space, sharp edges, thin accent lines, left-aligned text. Think @chrisdo.
2 Bold & Punchy — Large uppercase headlines, strong colour blocks, high contrast, thick borders. Designed to shout.
3 Soft & Editorial — Serif fonts, muted tones, generous padding, elegant flourishes. Magazine-quality feel.
4 Playful & Colourful — Rounded corners, fun accents, gradient backgrounds, icons and emoji. Friendly and approachable.
5 Dark & Moody — Dark backgrounds, light text, neon accents, minimal ornamentation. Sleek and techy.

But you're not limited to these presets. You can describe exactly what you want: "I like rounded corners with a thin coral border, centered text, and a small geometric accent in the top-right corner." Claude takes that and builds it.

Layout & alignment Typography treatment Decorative elements Spacing & density Corner styles Colour blocking Divider lines Badge styles

Keep the technical contract

If you ever want to edit the HTML template directly, keep these things intact: CSS custom properties for colours/fonts (--color-primary, etc.), the .slide class on each slide, and #slideFrame as the export container at 420×525px. Everything else is fair game.

Regenerate anytime

Changed your mind about your style? Just say "I want my carousels to look more editorial" or "make my template darker and moodier." Claude will regenerate your template from scratch while keeping all your brand colours and fonts. Your config stays the same — only the visual design changes.


The entire carousel maker is packaged as a single .skill file. Download it, drop it in, done.

Download carousel-creator.skill

10 KB · Works with Claude Code desktop app

Installation in 3 steps

  1. Download the file above
  2. Drop it into your Claude Code skills directory or project folder
  3. Open Claude Code and say "create a carousel about [your topic]" — the setup wizard kicks in automatically on first run

That's genuinely it. The first run takes about 5 minutes because you're configuring your brand. Every carousel after that takes under 2 minutes from prompt to PNG.

📄

SKILL.md

The main instruction file. Contains all the logic for the setup wizard, copy generation, HTML building, and PNG export pipeline.

🎨

carousel-template.html

The structural reference template. Claude uses this as a base to generate your custom branded template during setup.

brand-config.example.json

An example config file showing the full schema. Your actual config gets generated automatically by the wizard.

🚀

Your custom template

Generated during first run based on your style preferences. Saved as my-carousel-template.html — unique to your brand.

Quick commands once you're set up

create a carousel about imposter syndrome as a founder
carousel slides for: "5 things I wish I knew before starting"
carousel about meal prep for busy parents --slides 7
change my brand colours to #2a4a5a primary, #e8734a secondary

Flags you can use

  • --cta "Save this post" — Custom CTA button text on the final slide
  • --count 3 — Generate 3 different carousels on the same topic (different angles)
  • --upload — Auto-upload exported PNGs to Google Drive
  • --slides 7 — Target a specific number of slides (default: auto 5-9)

Once your carousels are exported as PNGs, you still need to get them posted. Blotato is what I use — it connects directly to Claude as an MCP server, so you can schedule posts to Instagram, TikTok, LinkedIn and more without ever leaving your AI workflow.

Here's how to connect it depending on which Claude setup you're using.

Claude Desktop / Claude Cowork

  1. Go to Settings → Connectors → Add Custom Connector
  2. Name: Blotato
  3. URL: https://mcp.blotato.com/mcp
  4. Press Connect and approve access

Claude Code (Terminal)

Copy this command, paste it into a Claude Code session, and restart Claude Code:

claude mcp add --transport http blotato https://mcp.blotato.com/mcp --header "blotato-api-key: INSERT API KEY"

Replace INSERT API KEY with your Blotato API key from your account settings.

Claude Cowork (JSON config)

If you prefer to add it via your MCP config file:

{
  "mcpServers": {
    "blotato": {
      "type": "http",
      "url": "https://mcp.blotato.com/mcp",
      "headers": {
        "blotato-api-key": "INSERT API KEY"
      }
    }
  }
}

Don't have Blotato yet?

It's genuinely the best social media scheduler I've used — and it works natively with Claude. Sign up for Blotato here →


Ready to go deeper?

Take your skills to the next level with these resources.