Workflow · Claude

Build your own
carousel studio.

Create your own branded carousel slide tool with Claude: one prompt, one HTML file, running entirely in your browser.

Jump to the steps ↓ Watch on YouTube ↗

Fig. 01 · Tutorial Claude · One prompt · One HTML file

Workflow · 3 Steps

Step by step.

01Drop the prompt into Claude

How to use it

Open Claude with Artifacts enabled, then paste the full prompt below. You don't need to change anything in it, just add your brand one of these two ways:

Easiest: attach your brand guideline or corporate design file together with the prompt. Claude reads your colors, fonts and name straight from it.
No brand file? Simply type your brand details into the prompt where the placeholders are. Either way works.

That's it: the prompt runs perfectly as it is.

Note: The prompt also works in ChatGPT or Gemini. In the tutorial I'm showing it in Claude.

02Copy & paste this into Claude

The Master Prompt

Paste the entire prompt below, including the feature list. Then attach your brand file (or fill in the placeholders) and send.

Master Prompt · FullClick to copy

Build me a Carousel Studio — a single-file HTML tool for creating branded social media carousel slides. The tool runs 100% in the browser with no backend. Use html2canvas (CDN) for PNG export.
My brand:
Brand name: [YOUR BRAND NAME]
Tagline: [YOUR TAGLINE]
Primary accent color: [YOUR PRIMARY COLOR]
Secondary accent color: [YOUR SECONDARY COLOR]
Third accent color (optional): [YOUR THIRD COLOR]
Dark/ink color: [YOUR DARK COLOR]
Background color: [YOUR BACKGROUND COLOR]
Display font: [YOUR DISPLAY FONT] (from Google Fonts)
Body font: [YOUR BODY FONT] (from Google Fonts)
Utility/mono font: [YOUR MONO FONT] (from Google Fonts)
Signature/handle: [YOUR HANDLE]
The tool must have these features:
Left panel (sticky controls):
§01 FORMAT
Segmented buttons for aspect ratios: IG 3:4 (2160×2880), LI 4:5 (2160×2700), 1:1 (2160×2160), 9:16 (2160×3840)
§02 IMAGE FOR THIS SLIDE
Drag & drop / click upload zone for images
Image scale slider (100%–220%)
Image position horizontal slider (0%–100%)
Image position vertical slider (0%–100%)
§03 LAYOUT & TEXT
Slide type selector: Cover, Big Number, Numbered, Free, Outro
Text position toggle: Center / Bottom
Kicker field (small text, top — hidden on Big Number type)
Number field (only visible on Numbered type)
Big Number fields (only visible on Big Number type): number, suffix (superscript), label under number
Title field (main headline — supports word for serif italic)
Body field (optional paragraph text)
Signature field (only visible on Outro type)
§04 STYLE
Accent color swatches (for numbers + kicker) — use my brand colors
Label color swatches — use my brand colors
Gradient overlay selector: Bottom / Full / None
§05 EXPORT
"This slide as PNG" button (exports at full resolution)
"Export all slides" button (batch downloads all slides)
Privacy note: "Images stay local in your browser, nothing is uploaded."
Right side (stage area):
Preview label with slide navigation (prev/next/add/delete)
Live preview of the current slide inside a checkerboard shell
Preview width: 432px, height calculated from aspect ratio
Slide rendering rules:
Images must use <div> with background-image and background-size: cover (NOT <img> with object-fit) for reliable html2canvas export
Scale via transform: scale() with transform-origin matching background-position
Gradient scrim overlay for text legibility (bottom-only or full gradient)
All text sizing must use container query units (cqw/cqh) so it scales perfectly at any resolution
The slide element needs container-type: size
Title text: large, bold, with text-shadow for legibility
Body text: medium, slightly transparent white
Kicker: small, uppercase, letter-spaced, in accent color
Number: large, bold, in accent color
Big Number: very large (26cqw), positioned at top-left with optional superscript suffix
Support *word* syntax in titles to render as serif italic (use the display font's italic or a serif companion)
Export function requirements:
Create an off-screen container at full resolution (e.g. 2160×2880)
Clone the slide HTML into it with container-type: size
Wait for fonts to load (document.fonts.ready)
Use html2canvas with {width, height, scale:1, useCORS:true, backgroundColor:null}
Download as PNG with naming: carousel_slide_01.png, carousel_slide_02.png, etc.
For "export all": sequential export with small delay between slides
Data model (per slide):
{
  img: null,          // base64 data URL
  imgScale: 100,      // 100–220
  imgPosX: 50,        // 0–100
  imgPosY: 50,        // 0–100
  type: 'cover',      // cover | bignum | numbered | plain | outro
  textPos: 'center',  // center | bottom
  kicker: '',
  num: '',
  title: '',
  body: '',
  sig: '@yourhandle',
  bignum: '',
  bigsuffix: '',
  toplabel: '',
  accent: '#PRIMARY',
  labelColor: '#SECONDARY',
  scrim: 'full'       // bottom | full | none
}
Design guidelines for the tool UI itself:
Clean, professional control panel with grouped sections
Mono font for labels and section headers
Subtle borders, rounded corners
Active states for buttons (dark background, white text)
Color swatches with active border indicator
Responsive: stacks to single column below 980px
Toast notifications for actions (slide added, export done, etc.)
Footer with brand name and font credits
Output everything as a single self-contained HTML file. All CSS inline in a <style> block, all JavaScript inline in a <script> block. Only external dependency: html2canvas from cdnjs and Google Fonts.

03Refine until it's perfect

Test & Iterate

Once Claude generates the file: download it, open it in your browser, and test the flow. Upload an image, adjust its position, add text, export a PNG. Check that the exported PNG matches the preview.

If something's off, just tell Claude what to fix. Common follow-ups:

"Make the title font bigger"
"Add a new slide type called [X]"
"Change the accent color swatches to [these colors]"
"Add a logo watermark option"
"The exported image doesn't match the preview, fix the export function"

Pro TipKeep it to 2 or 3 fonts, pick bold brand colors so numbers and kickers pop on dark photos, and wrap a *word* in asterisks in any title to render it in serif italic.

Free Newsletter · 1,000+ Creators

Join the
Newsletter.

Get new AI tutorials, workflows and tool tips first, plus the free Image to Prompt Analyzer and the Top Creative AI Tools list.

Build your owncarousel studio.