Cindy Zhu.
Free guides
Design Claude

Design a full brand concept with Claude

Hey, it's Cindy ๐ŸŒฑ You commented MOCKUP, so here is the full prompt stack from the reel: one paragraph about your product goes in, and a rendered brand board comes out.
btw the waitlist for AI System Club is now open! If you're keen on using AI to automate your content, video editing, job search, business or build AI agents, feel free to sign up (only if you want to hehe). Ps. the waitlist gets first dibs:)
โš ๏ธ What Claude does here, honestly. Claude is doing two things well: the strategy and naming layer, and writing the code that renders your brand board as a real web page with live fonts, exact hex values and type marks drawn in SVG. It does not generate photoreal mockups of your product on a shelf. If you want those images later, generate them in an image tool such as Reve and drop them into the board. Knowing that split up front is what keeps this from feeling like a bait and switch halfway through.

the setup

Two minutes of setup

  1. ๐Ÿ’ป Open Claude. Use claude.ai in a browser or the desktop app. The whole flow works on the free plan, though a longer plan gives you more room to iterate in one sitting before you hit limits.
  2. ๐Ÿ—‚๏ธ Make a project for the brand. Create a project called "Brand: [your product]". Everything you decide stays in one place, so the naming round and the palette round can see each other. Projects are on every plan and free accounts get up to five, per Anthropic's projects documentation.
  3. ๐Ÿ–ผ๏ธ Check that artifacts are on. The brand board renders in an artifact, the side panel where Claude shows a live page instead of a code block. Artifacts are available on Free, Pro, Max, Team and Enterprise, and Anthropic's artifacts article covers turning them on if your side panel stays empty.
  4. ๐Ÿ“Ž Feed it anything you already have. Competitor screenshots, a moodboard, three brands you love, your existing logo. Upload them to the project. Claude reads images, and a concept built against real references beats one built from nothing.

prompt one

Turn your paragraph into a real brief

Most brand concepts come out generic because the input was generic. This prompt makes Claude interrogate you before it decides anything, which is what a studio does on the kickoff call.

๐Ÿง  the product brief
You are acting as the strategy lead on a small brand studio. I am going to describe my product in one paragraph, and your first job is to turn it into a proper brief, not to start designing.

Here is the product: [one paragraph, plain language, what it is, who it is for, what it costs, and what makes it different].

Ask me the six questions you most need answered before any naming or visual work would be sound. Ask them one at a time and wait for my answer, and go after the things I have probably not decided yet rather than the easy ones. If an answer is vague, say so and ask again in a narrower way.

When we are done, write the brief back to me in under 400 words with these headings: what we are making, who it is for, the one job it does for them, what we are deliberately not doing, and the three words the brand should feel like. Flag any assumption you made that I never actually confirmed.

prompt two

The strategy layer, before anything visual

Positioning first, because the palette is downstream of it. A calm, premium palette on a brand positioned as loud and cheap is going to feel wrong no matter how pretty the hex codes are.

๐ŸŽฏ audience, positioning, names
Using the brief we agreed, write the strategy layer for this brand.

Start with the audience: two short profiles of the people most likely to buy, each one covering what they currently do instead of buying this, what they are afraid of getting wrong, and the sentence that would make them stop scrolling. Keep them grounded in the brief rather than inventing demographics.

Then the positioning: one sentence in the form "for [audience] who [situation], [brand] is the [category] that [benefit], unlike [the obvious alternative]". Give me three versions of that sentence taking genuinely different angles, and tell me which one you would defend and why.

Then three name options. For each, give me the name, what it means or where it came from, how it sounds said out loud, the tagline that would sit under it, and one honest risk (hard to spell, already crowded, ages badly). Avoid invented words made by dropping vowels, and avoid anything that needs a paragraph of explanation to make sense.
๐Ÿ’ก Before you fall in love with a name, search it. Check the exact word on a trademark register such as the USPTO search or IP Australia, then check the domain and the social handles. Five minutes here saves a rebrand later, and Claude cannot check availability for you.

prompt three

The visual identity, with real values

The trick in this one is forcing specifics. Ask for "a nice palette" and you get adjectives. Ask for hex values with defined roles and contrast ratios and you get something a developer or designer can build with tomorrow.

๐ŸŽจ palette, type, logo directions
Now the visual identity for the direction we picked. Give me exact values I could hand to a developer, not descriptions.

Palette: six colours with hex codes and a defined role for each (page background, surface, primary text, secondary text, primary accent for buttons and emphasis, and one supporting accent). For every text and background pair I would realistically use, give me the contrast ratio and say whether it passes WCAG AA at normal body size. Explain in one line each why these colours suit the positioning, and include a hover or pressed variant for the accent.

Type: three font pairings, all of them fonts that exist on Google Fonts so I can actually use them for free. For each pairing give me the heading font, the body font, the weights to use, and a type scale with pixel sizes and line heights from h1 down to small print. Say what each pairing signals, and which one you would pick.

Logo: three directions I can build without an illustrator, described precisely enough to draw. Wordmarks, monograms and simple geometric marks only. For each, tell me the construction (what shape, what proportions, what the negative space does), how it behaves at 16 pixels for a favicon, and what it looks like in one colour on a dark background.
๐ŸŒฑ Verify the contrast rather than trusting the number Claude gives you. Paste your text colour and background into the WebAIM contrast checker, and confirm each font exists at Google Fonts. Both checks take under a minute and they are the two things most likely to be slightly wrong.

prompt four

Render it all as one brand board

This is the step that makes it look expensive. Instead of a chat full of hex codes, Claude writes a single page that displays the identity using the identity, so you are looking at the real fonts and the real colours rather than reading about them.

๐Ÿ‘ฉโ€๐Ÿ’ป build the brand board
Build the whole identity as a single self-contained HTML artifact called the brand board. One file, no external dependencies except the Google Fonts link, and it must render the brand using the brand.

Lay it out top to bottom as: the logo lockup large on the brand background, the name and tagline, the positioning sentence, the palette as labelled swatches showing each hex value and its role, the type scale rendered live in the actual fonts with a line of real sample copy at each size, the three logo directions drawn as inline SVG (primary, one colour, and a 16 pixel favicon version), a short do and do-not list for using the mark, and one example UI card built from the palette so I can see the system working.

Make it print and screenshot friendly at 1200 pixels wide, keep generous spacing, and add nothing decorative that is not part of the identity. Use the exact hex values and font names we agreed, with no substitutions. If any font fails to load, fall back to a system stack rather than silently changing the design.

What should be on the finished board, so you can check the output rather than hoping:

Colour with roles Not a rainbow of swatches. Six colours, each labelled with the job it does, so nobody has to guess which one is the button.
A type scale, rendered Heading and body fonts shown live at every size with real sample copy, plus the line heights. This is what stops a site looking homemade.
Logo at real sizes The mark large, in one colour, and at favicon size. Most concepts fall apart at 16 pixels and you want to find that out now.
Usage rules A short do and do-not list. Clear space, what never to recolour, what never to stretch. It is what turns a nice picture into a system.

the part most people miss

Three directions, then merge

One-shot prompts give you the average brand. The version that looks like someone was paid for it comes from generating options and combining them on purpose.

๐Ÿ’ก diverge, then merge
Before we finalise anything, give me three genuinely different creative directions from the same brief, and make them differ in strategy rather than only in colour.

Name each one, and for each give me the core idea in a sentence, the palette, the type pairing, the logo approach, and the kind of customer it would attract most. Push them apart deliberately: one warm and human, one precise and technical, one bold and loud. If two of them start converging, redo the closest one further from the others.

I will tell you which parts of each I want. Then merge my picks into one coherent direction rather than stapling them together, resolve anything that conflicts, tell me explicitly what you had to change to make the combination work, and rebuild the brand board artifact with the merged result.

get it out

Take the board somewhere useful

  1. ๐Ÿ“ธ Screenshot it into a deck. Open the artifact full screen, screenshot the sections you need, and drop them into your pitch deck or client proposal. This is the fastest path and it is what the reel showed.
  2. ๐Ÿ”— Publish the artifact. Claude lets you publish an artifact to a shareable link, which is a tidy way to send a concept to a client or a collaborator without attaching anything.
  3. ๐Ÿงพ Ask for the handover doc. Say: turn this board into a one-page brand guidelines document in plain text, with every hex value, font name, weight and size listed, so a developer or designer can build from it without opening the artifact.
  4. ๐Ÿ–ผ๏ธ Add real imagery last. Once the identity is settled, generate product or lifestyle images in an image tool such as Reve, using your palette and three words as the prompt direction, and paste the best ones into the board.

watch for these

Four things that make a concept look generic

Skipping the strategy round Going straight to colours produces a brand that could belong to anyone. The positioning sentence is what makes the visual choices defensible.
Accepting the first palette The first answer is usually the safest one in the training data. Ask for a version that a competitor would never pick and compare.
Fonts that are not real Claude occasionally names a font that is not on Google Fonts, and the board silently falls back to something default. Check each one.
No constraints on the mark Without the 16 pixel and one colour tests, you get a detailed illustration that turns to mush the second it becomes a favicon.

sources

The links used here

the waitlist is now open

AI System Club is launching soon

Build AI systems with me through recorded lessons you can follow at your own pace. Join the waitlist for first access and the founding price.

btw this list gets first dibs
the moment doors open :)