How to Use Claude for Brand-Consistent Mockups: An 8-Step Workflow

Most teams using Claude for design work hit the same wall. First batch of mockups looks promising. Third batch starts drifting. By the fifth round, you’re back to explaining the brand rules again, pasting the same hex codes, retyping the same tone guidelines. The AI didn’t forget. You just never gave it a system to remember.

This post covers an 8-step workflow that turns brand rules into reusable mockups without the repetitive prompting. We’ve used this with design teams and founders shipping client work. Setup drops from 20 minutes per project to under 2.

What This Workflow Solves

Why Most AI Mockups Feel Generic

Three problems keep showing up:

No brand context. You describe the project but never define the visual language. Claude responds to what you said, not what you meant. Generic prompts get generic output.

Too much prompting. Each new chat starts from zero. You re-explain the brand, re-share the colors, re-state the tone. Every new screen is a fresh negotiation.

No reusable structure. There’s no single source of truth for brand rules. The brand lives in your head, not in a file Claude can read.

Who This Is For

• Founders shipping MVPs and client decks
• Designers needing quick mockups to hand off to developers
• Marketing teams building campaign assets
• Agencies managing multiple brand identities

If you’ve seen AI mockups that look “fine but not quite right,” this workflow fixes that.

What You Need Before You Start

Before setting up the workflow, gather the brand assets. You need five things:

1. Logo files (SVG and PNG, light and dark variants)
2. Colors (primary, secondary, accent, and background hex codes)
3. Fonts (primary and secondary typefaces with weights)
4. Tone of voice (2-3 sentences describing how the brand sounds)
5. UI references (3-5 screenshots of designs that match the brand)

Save Reference Examples

Gather two sets:

3 good examples. Screenshots that represent exactly what you want. annotate each with specific elements that work: the button style, the spacing, the color usage.

3 bad examples. Designs that fail your brand, even if they’re technically correct. annotate each with why they miss: wrong typography hierarchy, inconsistent spacing, wrong emotional tone.

These negative examples matter more than you’d think. Claude learns faster from what to avoid than from what to aim for.

Step 1 - Open the Right Claude Setup

Choose the Right Model for Complex Design Work

We use Claude Sonnet 4.6 for this workflow. The reasons:

• Holds context across longer sessions (critical when working through 5-10 screens)
• Actually reasons through visual decisions, not just recalls patterns
• Remembers brand rules from prompt to prompt

Haiku is faster. Opus is more capable. Sonnet hits the sweet spot for design work that needs both speed and structure.

Define the Outcome Clearly

Start with a specific deliverable, not a vague request:

Bad: “Give me some design ideas for a fintech app.”

Good: “Create a homepage mockup for a fintech app targeting millennials. Primary color #0066FF. Tone: trustworthy but modern. Include hero, three feature cards, and CTA. Output as ASCII wireframe with annotations.”

The second version tells Claude what to deliver, what colors to use, and the format. You get something usable. The first gets you 400 words of design philosophy nobody asked for.

Step 2 - Build a Screening Folder

Create a folder in your workspace called design-screening/. This is your quality control center.

Save Designs You Like

Drop in screenshots of interfaces that work. Tag each with a short filename:

• like-fintech-hero-clean.png
• like-saas-dashboard-dark.png
• like-mobile-nav-bottom.png

The filename itself becomes a tag. When you reference this folder later, Claude knows which patterns to reuse.

Save Designs You Reject

Equally important: save examples of what fails:

• reject-cluttered-checkout.png (too many form fields above the fold)
• reject-generic-gradient.png (cheap looking background effect)
• reject-mismatched-buttons.png (inconsistent button styles across screens)

Negative examples train Claude on your taste. This sounds obvious, but most teams skip this step entirely.

Step 3 - Create the Brand Folder

Create one folder per brand. Structure it like this:

/brand-acme/
  brand.md
  colors.svg
  fonts/
  components/
  screenshots/

What to Include

• brand.md: Core rules (covered in Step 4)
• colors.svg: Visual color palette with hex codes
• fonts/: Font files or links to typefaces
• components/: Reusable UI component references
• screenshots/: Brand-aligned design examples

Keep the Structure Simple

One folder per brand. One source of truth. Easy to reuse across projects.

Don’t over-engineer this. If the folder takes more than 5 minutes to set up, it’s too complex. The goal is reusability, not perfection.

Step 4 - Write the brand.md File

This is the most important file in the workflow. It’s Claude’s single source of truth.

Add Core Brand Rules

# Acme Brand Guidelines

## Colors

- Primary: #0066FF (blue)
- Secondary: #1A1A2E (dark navy)
- Accent: #FF6B35 (coral)
- Background: #FFFFFF
- Background alt: #F5F7FA

## Typography

- Headlines: Inter Bold, 700
- Body: Inter Regular, 400
- Scale: 16px base, 1.25 ratio

## Spacing

- Base unit: 8px
- Content padding: 48px
- Card gap: 24px

## Tone

- Voice: Confident but not aggressive
- Approach: Help users succeed, never talk down to them
- Avoid: jargon, filler words, false urgency

Add Taste References

## Brands to Resemble

- Stripe (clean, confident, minimal)
- Linear (dark mode sophistication)
- Vercel (developer-centric simplicity)

## Brands to Avoid

- Generic SaaS (blue gradients, stock photos)
- Over-complicated finance (too many numbers)
  -Startup cliché (rocket icons, "disrupt" language)

## Visual Direction

- Lean into white space over decoration
- Use illustrations sparingly, prefer icons
- Photography: real people, not stock posed shots

This file takes 10 minutes to write. It saves 20 minutes every time you start a new project.

Step 5 - Write One Opening Prompt

Here’s the master prompt template that starts every session:

Read the brand folder at ./brand-acme/ before responding.

I'm working on [project type]. Target audience: [1-2 sentences].
Goal: [specific outcome].
Deliverable format: [wireframe / mockup / prototype].

Before generating, ask me 3 clarifying questions about anything unclear from the brand rules.

This prompt does three things:

1. Tells Claude to read the brand folder first. It doesn’t guess. It reads your rules.
2. States the deliverable type up front. Wireframe, mockup, or prototype. Pick one.
3. Asks for clarification. This catches gaps in your brand rules before they become bad outputs.

Keep the Prompt Structured

Claude responds well to explicit formatting. Use clear sections, bullet points, and structured output requests. The clearer your input, the more usable your output.

Step 6 - Brief, Don’t Spec

The difference between a good brief and a bad spec:

Give Context, Not Micromanagement

Bad: “Place the logo in the top left at position (24px, 24px) from the edge using 40px height. The nav should have exactly 5 items spaced 32px apart with 14px medium Inter font.”

Good: “Homepage for a SaaS analytics tool. Audience: product managers at mid-size companies. Goal: show value in 5 seconds. Keep it clean, data-focused, professional.”

The first version micromanages every pixel. The second defines the problem and trusts Claude to make good decisions within the brand rules.

Let Claude Infer the System

This is the hardest part for designers: let go of control. Your brand.md handles consistency. Your prompt defines the goal. Let Claude figure out the execution.

If something is wrong in the output, fix the brand.md or the brief. Don’t spec every decision in the prompt.

We open-sourced this entire workflow at github.com/lightrainstech/claude-design-prompt-pack. It includes pre-built prompts, brand.md templates, and the screening folder structure. Clone it, tweak it, make it yours.

Step 7 - One Screen Per Prompt

Split large tasks into small outputs.

Split Large Tasks into Small Outputs

For a full website mockup:

• Prompt 1: Homepage wireframe
• Prompt 2: Navigation and footer
• Prompt 3: Feature section
• Prompt 4: CTA and footer
• Prompt 5: Mobile responsive view

Each prompt delivers one screen. Each output is reviewable. Fix one layer before moving to the next.

Review Before Moving On

Review each output against the brand rules before prompting the next. Catch drift early.

If you’re three screens in and the brand guidelines are still being followed, you’ve built a good system. If you’ve drifted, go back to Step 4 and strengthen brand.md.

Step 8 - Save Claude Memory

Store Brand Rules for Reuse

After each session, extract what worked and add it to brand.md:

• New tone rules that emerged
• Layout patterns that worked
• Color usage that felt right

This file becomes smarter over time. Your first project might take 30 minutes to set up. Your fifth takes 5.

Build a Repeatable System

Start with the same workflow every time:

1. Open brand folder
2. Paste the master prompt
3. Generate screen one
4. Review and iterate
5. Move to next screen
6. Save working elements back to brand.md

Reduce setup time. Increase output quality. That’s the goal.

Prompt Templates

Copy these into your workflow:

Master Opening Prompt

Read the brand folder at [path] before responding.
I'm working on [project type].
Target audience: [description].
Goal: [specific outcome].
Deliverable format: [format].
Ask me 3 clarifying questions about anything unclear.

Homepage Mockup Prompt

Create a homepage wireframe using [brand].
Include: hero with headline and CTA, 3 feature cards, social proof, footer.
Style: [clean/modern/minimal].
Output as annotated ASCII with color notes.

Landing Page Prompt

Design a [product type] landing page for [audience].
Primary goal: [conversion/action].
Include: hero, problem statement, solution, testimonials, pricing, FAQ.
Keep text to headlines and subheads only.
Output as wireframe with layout annotations.

Revision Prompt

Revise the previous output based on [specific change].
Keep everything else consistent with the brand rules.
Show the before and after as side-by-side ASCII.

Quality Check Prompt

Review this mockup against [brand]. Check:
- Color usage (primary, secondary, accent)
- Typography hierarchy
- Spacing consistency (8px grid)
- Tone of voice in copy
List any violations with specific fixes.

Common Mistakes

Too Much Detail

If your prompt is over 200 words, it’s too long. Break it into smaller prompts. Claude handles focused requests better than comprehensive specs.

No Negative Examples

Skip this and Claude repeats mistakes. Include bad examples in your screening folder.

Too Many Screens in One Chat

Three screens per conversation max. After that, context gets noisy. Start a new chat for the next set.

No Reusable Brand File

Every session from scratch wastes time. Invest 10 minutes in brand.md. Save hours on every project.

FAQ

Can Claude Replace Figma?

No. Claude outputs wireframes and mockup specifications. Figma is for detailed visual design. Use Claude to speed up exploration, Figma to finalize.

What Should Go in brand.md?

Colors, fonts, spacing rules, tone guidelines, and reference examples. Keep it to one page. Update as you learn.

How Many References Are Enough?

6 total: 3 you like, 3 you reject. Quality beats quantity. Better to have 6 well-chosen examples than 50 random ones.

What Makes Claude Better for This Workflow?

Memory and context. Sonnet 4.6 holds brand rules across sessions. Your brand.md becomes a persistent reference, not a one-time prompt.

How Do You Keep Outputs Consistent?

Three rules:

1. One brand.md per brand
2. One screen per prompt
3. Review before moving on

If consistency drifts, strengthen brand.md. That’s the lever.

Next Steps

Get the full skill config. We’ve bundled the complete workflow as a Claude skill. Clone or download the repo at github.com/lightrainstech/claude-design-prompt-pack.

To use it:

# Clone the repo
git clone https://github.com/lightrainstech/claude-design-prompt-pack.git

# Copy the skill to your Claude config
cp -r claude-design-prompt-pack/skills/design-workflow ~/.config/opencode/skills/

Need help building your AI design workflow? We work with AI development teams and consult on prompt engineering at scale. Talk to us with your current setup and we’ll suggest specific fixes.

Related reading:

• Deepseek Prompt Engineering: What Actually Works in Production
• Building AI Agents for Enterprise Workflows
• AI Prompt Engineering for Beginners
• Offshore AI Team Services

This article originally appeared on lightrains.com