Video walkthroughs · Claude Code Club

Three Levels Of Claude Design: From A Basic Carousel To A Branded System

13 minute read · Companion guide to “Claude Fable 5.1 + Claude Design = INSANE Instagram Carousels!”

Most people ask a model for a carousel and get a carousel. Then they ask again next week and get a completely different one. Same account, same person, two looks that share nothing. That is not a model problem. Nothing ever wrote the rules down, so the model invents a brand from scratch on every single run. This page is the fix, built as three levels you can climb in one afternoon: probe the model's taste, make it save the rules to a file, then split the layers that should be generated from the layers that have to stay editable.

Watch the full build: three levels of Claude Design, from a plain slide set to branded carousels with generated backgrounds.

The worked example running through this whole guide is deliberately silly. The topic is how to drink milk. A dumb topic is the right test, because there is no subject matter to hide behind. If the slides look good on milk, the system is doing the work and not the topic.

Level 1: Let the model invent a look before you constrain it

Claude Design used to live only in the browser. It now runs inside Claude Code in the desktop app through the design command, which means the design canvas and your files sit in the same place. You pick a folder to work in, choose your model, type the design command, and describe what you want made.

The first prompt should be almost empty. Name the format, name the topic, tell it to ignore any design rules or files you already have, and tell it to think creatively. That is it. No palette, no fonts, no reference. What comes back on that first run is a taste probe, not a deliverable.

On the milk run the copy was the surprise. Slide one read like a safety card: please review this card before drinking, even if you have done this before. Then locate the milk, select a vessel, pour, assume the position, drink. The last slide said in case of mustache, remain calm, wipe with sleeve, continue drinking. That is genuinely funny, and funny is the thing models are usually worst at. The graphics were average. The writing was better than we would have written.

That split is the whole point of level 1. You are not shipping this. You are finding out what the model reaches for when nothing is holding it back, so you can keep the parts you would never have thought of and replace the parts you can do better.

Level 2: Fence the run before you start it

The single most expensive mistake on a creative run is an open scope. A creative model with a vague brief will keep finding more work to do, and it will believe every bit of it is helpful.

Three fences go in every prompt from here on:

• Name the deliverable and close the door. Generate the slide images and nothing else. Without that sentence the run drifts into supporting work you never asked for.
• Say what to ignore. If you already have design rules or a project instruction file, an experimental run has to be told to skip them, or you will be judging a result that was quietly steered by old rules.
• Say where the output goes. Point at the folder you opened. It costs you six words and removes a whole category of confusion.

The real run on this video went sixteen minutes before it produced anything usable. Partway through it went looking for Google fonts, spun up a helper agent nobody asked for, and started opening directories that had nothing to do with the slides. None of that was wrong exactly. It was the model being creative about the process instead of the product.

Level 2: Decide how much reasoning effort the run deserves

Claude Code lets you set the level of effort for a run. Turning it up buys you more thinking, more self-checking, and more time and tokens. It is a real trade and it should be a decision, not a default.

Turn effort up when the brief is open, when there is no reference image, when you want to be surprised, and when this is a one-off. Turn it down when you already have a design system, when the layout is settled, when you are regenerating a batch you have made before, and when wall clock time matters more than novelty.

There is a specific behaviour to watch for at high effort. On the branded run the model opened every finished slide in a browser, looked at them, decided some were not good enough, and regenerated them without being asked. The output was better for it. It also cost more time and more tokens. That push and pull between how good you want the result and how much you want to spend is the actual dial, and turning effort up is you choosing a side of it.

Level 2: Make the model write the design rules down first

This is the step that changes everything downstream, and it takes about four minutes.

Start with a reference. Go to a site like Pinterest, search for social media posts, and find one you would be happy to be compared to. You are not copying it. You are giving the model a target so it stops guessing. Copy the image, paste it into Claude, and ask for two things in one prompt: create a design system HTML file based on the attached reference, then regenerate the carousel in that style. Add the scope fence from the last section so it only produces slides.

What lands in your folder is a design system file you can open in a browser and read. A good one covers everything an asset needs to inherit:

• The full colour palette, with the actual hex values, not adjectives
• Typography: the display face, the body face, sizes, weights, and how headlines are treated
• Component treatments: highlight styles, call to action pills, buttons, badges
• Effects: the glow, the grain, the shadow rules, whatever gives the look its signature
• Structure: the grid, the spacing scale, and the background elements

The second milk run came back on brand. Warm glowing orange, big confident graphics, crisp type, every slide clearly a sibling of the others. Same model, same topic, same afternoon. The only difference was that the rules existed as a file instead of as a vibe.

The design system file is the real asset, not the carousel

This is the idea worth taking away even if you never make a carousel. Most people prompt for an output. You should prompt for the rules that produce the output, then keep those rules.

A carousel is one week of content. A design system file is a permanent artifact the model can re-read forever, and it changes four things at once:

• Every future asset inherits the brand for free. Carousels, a landing page, thumbnails, slide decks, and animations can all point at the same file and come out as a family.
• Your prompts get shorter. You stop describing the look every time and start describing only what is different about this asset.
• Feedback becomes editable. If the orange is wrong, you change one value in one file instead of re-explaining it to the model on every run.
• Taste becomes transferable. A file can be handed to a teammate, a contractor, or a skill. A vibe in your head cannot.

The model stops reinventing the brand the moment the brand exists somewhere it can read. That is the mechanism, and it is the same mechanism behind level 3. Once you can see your work as layers, you can decide which layers a model should regenerate and which ones must stay under your hand.

Level 3: Split the generated layers from the editable ones

Level 2 slides look designed. Level 3 slides look photographed. The move is to replace flat backgrounds with fully rendered AI images while keeping every word, pill, button, and logo as a live element on the canvas.

The brief is short. Ask it to generate the background images for the carousel in your reference style, big and beautiful and full bleed, and to keep the text and other elements editable. Those last four words are the whole instruction.

Something quietly clever happens when you ask for a background instead of a poster. On the mustache slide the model generated an image with a shadowed top half and open space in the lower half, because it knew type had to sit there. It composed for the layout it was feeding. Ask for a finished slide and you get artwork that fights your copy. Ask for a background and you get artwork that makes room for it.

Never let a model bake your headline into a generated image. A typo then costs a whole regeneration instead of a keystroke. The type will not match your design system, because an image model approximates fonts rather than using them. You cannot resize, translate, or reflow it. And the moment you need a second version of that slide, you are back to the slot machine.

Level 3: Connect an image model to Claude Code

To generate backgrounds inside the same run, Claude Code needs access to an image model. Higgsfield is the route used in the video because one connection gives you the current image and video models, including Nano Banana and GPT Image 2.

1. In Higgsfield, open the MCP and CLI section and copy the MCP link.
2. In Claude Code, click the plus button and go to connectors.
3. Choose manage connectors, then add, then add custom connector.
4. Name it Higgsfield, paste the URL, and click continue.
5. Sign in when prompted. The image and video models are now callable from inside your runs.

Generated backgrounds are not automatically the right call. Use them when the slide is doing emotional or atmospheric work, when a flat panel would look thin, or when you want the carousel to stop reading as a template. Use flat colour when the slide is dense with type, when the message is instructional rather than atmospheric, or when you need the set produced fast and cheap. A mixed set, where a few hero slides carry generated art and the rest stay flat, usually looks more intentional than a set where every slide shouts.

Fix a slide by hand or fix it in the system

Everything on a Claude Design canvas stays editable. You can click any element, open the side panel, and change the weight, the alignment, the spacing, the size, or the font. You can move things and delete things. All of it inside Claude Code, without exporting to another tool.

So you get a fork on every imperfect slide: fix it with your mouse, or fix it with another prompt. The rule we use is simple. If the problem lives on one slide and touches one property, use your hands. If the problem repeats across slides, or you would have to fix it again next time, change the design system file and re-run.

The tell is durability. A hand fix is invisible to the next run, so anything you correct by hand is something you have volunteered to correct forever. That is fine for a one-off crop. It is a bad deal for a font size that is wrong on every headline you will ever make.

The failure modes we hit on this exact run

These are not hypothetical. Every one of them happened while making the milk carousels.

• The sixteen minute wander. An open scope sent the run hunting for Google fonts and spinning up a helper agent nobody asked for. Fix: generate the slides and nothing else, stated in the prompt.
• The self-check loop. At high effort the model opened every slide in a browser, judged them, and regenerated the ones it disliked. Better output, more time, more tokens. Fix: keep it when the result matters, lower the effort when you are iterating.
• The silent hijack. Existing design rules in the folder got blended into an experiment that was supposed to be unconstrained. Fix: tell it what to ignore, by name.
• Text baked into a generated image. Uneditable, off brand, and unfixable without a full regeneration. Fix: ask for backgrounds, and say keep the text editable every time.
• Style drift between slides. Slides that do not look related came from a run with no reference and no system file. Fix: never generate a set from a description alone once you have a design system.

Notice the shape of that list. Four of the five are scope problems, not quality problems. The model was capable the whole time. It just was not told where the edges were.

Package the working pipeline as a repeatable skill

Once level 3 works twice in a row, the process has stopped being an experiment and become a procedure. That is the moment to encode it, so the next carousel is a topic and a wait instead of an afternoon.

A carousel skill has to hold five things, and they are all things you already decided while climbing the levels:

• The path to the design system file, so every run inherits the brand
• The slide structure: how many slides, what the first one does, what the last one does
• The scope fence, so the model produces slides and stops
• The layer split: which layers get generated, which stay editable
• The image model and the aspect ratio, so the output is always feed ready

Then the whole system runs from a topic. That is the level the club builds at, and the installable skill and the exact prompts behind it live inside the Claude Code Club for nine dollars a month at https://www.skool.com/claudecodeclub/about. Everything above this line you can run by hand today, and it will work.

The path from reading this to having a carousel

The shortest honest sequence from finishing this page to having something you would post. One sitting, no skill required.

1. Make a folder for this project and open it in Claude Code in the desktop app.
2. Run the design command with an almost empty brief on a topic you do not care about. Add the scope fence. Look at what the model reaches for.
3. Find one reference image you would be happy to be compared to and copy it.
4. Paste it in and ask for a design system HTML file based on that reference, then a regenerated carousel in that style, slides only.
5. Open the design system file in a browser and read it. Change any hex value or type choice you disagree with, by hand, in the file.
6. Connect an image model, then ask for full bleed backgrounds in your reference style with the text kept editable.
7. Fix the last few slides in the side panel. Anything you fix more than once, push back into the design system file instead.
8. Save the design system file somewhere permanent and point your next asset at it, whether that is a carousel, a thumbnail, or a landing page.

Step eight is the one people skip, and it is the one that compounds.

Read this online at claudecodeclub.ai