UI UX Design Prompts for Claude: Copy-Paste Templates

The best UI/UX design prompts for Claude read like a brief you'd hand a contractor: who the users are, what the screen has to do, which constraints apply (brand, platform, accessibility), and what "done" looks like. Anthropic's prompting guidance for current models says the same thing in fewer words: be specific about the behavior you want, request animations and interactive elements explicitly, and add modifiers that ask for detail instead of a bare "create a dashboard".

Below are three templates to start from (page layout, design system, critique), the system prompt snippet from Anthropic's docs that steers Claude away from the generic "AI slop" look, and the mistakes that produce bland output. Fill in the brackets, run the result, and iterate on the parts that missed.

What a design brief for Claude needs to contain#

Claude fills gaps with the most common choice. If you don't name a font, you'll likely get Inter. If you don't describe the users, you get a layout for nobody in particular. The fix isn't a longer prompt, it's a complete one. Each of these fields removes one class of generic output:

The docs' migration advice applies directly here. Instead of "Create an analytics dashboard", write "Create an analytics dashboard. Include as many relevant features and interactions as possible. Go beyond the basics to create a fully-featured implementation." That one modifier sentence changes how much the model builds.

Prompt template for a page layout#

This is the general-purpose layout brief. It asks for rationale first so you can push back on the hierarchy before reading 300 lines of CSS.

You are designing the [screen name] for [product], used by [who] to [job to be done].

Content that must appear, in priority order:
1. [primary action or data]
2. [secondary content]
3. [tertiary: filters, metadata, help]

Constraints:
- Platform: [responsive web / iOS / Android]; design at [1280px] and [390px]
- Brand: [tone words]; colors [hex list]; font: [name, or "pick one, not Inter, Roboto, Arial or system fonts"]
- Accessibility: WCAG AA contrast, keyboard reachable, visible focus states
- Must not: [no modals / no carousel / no infinite scroll]

Deliver, in this order:
1. One paragraph on the hierarchy you chose and why
2. A region-by-region layout description with widths at both breakpoints
3. Semantic HTML and CSS for the page, with CSS variables for color, spacing and type
4. Motion only for [the page-load reveal and hover states]; nothing else

Before you finish, verify the output against the accessibility constraints and the must-not list.

Two notes on that last line. Anthropic recommends appending a self-check like "Before you finish, verify your answer against [test criteria]" because it reliably catches errors. The exception is Claude Opus 5, which the docs say verifies its own work well without being told, and where leftover verification instructions cause over-verification. If you're on that model, drop the line.

For a variant that produces a spec instead of code, replace item 3 with "a written spec: components, states, spacing in 4px units, and copy for empty and error states". Same brief, different deliverable.

Prompt template for a design system#

A design system prompt is less about layout and more about naming and scales. Ask for tokens, not just colors, so the output drops into CSS variables or a tokens file. The W3C Design Tokens format is a reasonable target if you want JSON that other tools can read.

Create a design system foundation for [product], a [B2B / consumer] [web app / mobile app] for [users].

Direction: [two or three adjectives, e.g. "dense, calm, editorial"]. Draw from [a concrete reference: a specific IDE theme, a print tradition, a cultural aesthetic], not from generic SaaS.

Produce:
1. Color roles as CSS variables: background, surface, text, muted text, primary, primary-contrast, danger, success, border, focus ring. One dominant color with sharp accents; no evenly spread palette. Include a dark theme with the same role names.
2. Type: one display face and one text face (not Inter, Roboto, Arial or system fonts), a six-step size scale in rem, line heights, and where each step is used.
3. Spacing: an 8-step scale in px, and the rule for when to use each.
4. Radius, border and elevation tokens.
5. Component specs for button, input, card and table: every state (default, hover, focus-visible, disabled, error) using only the tokens above.
6. The same tokens as a JSON object.

Then list every text/background pair and its contrast ratio, and flag any below 4.5:1.

The "draw from a concrete reference" line comes straight from Anthropic's frontend aesthetics guidance, which tells the model to look to IDE themes and cultural aesthetics for inspiration and to commit to a cohesive theme with CSS variables. Naming the reference yourself works better than leaving it open.

Prompt template for a design critique#

Critiques fail when the ask is "what do you think?". Give Claude the same bar you'd give a reviewer: specific heuristics, a severity scale, and a requirement that every finding has a fix. Paste the markup or attach a screenshot, then:

Review this [screen] against these criteria, in order of importance:
1. Can [the primary user] complete [the primary task] without reading instructions?
2. Visual hierarchy: does the eye land on the primary action first?
3. Consistency with the tokens below: [paste variables]
4. Accessibility: contrast, target size, focus states, labels, reading order
5. Copy: clarity of labels, empty and error states

For each finding give: severity (blocker / major / minor), where it is, why it matters for [user], and the smallest change that fixes it.
Do not redesign the screen. Do not list things that already work. Cap the list at 10.

[paste HTML/CSS or describe the screen region by region]

The caps matter. Without them you get a wall of positives followed by a full rewrite. With them you get a list you can turn into tickets.

Steering Claude away from the generic look#

Anthropic's docs are blunt about this: without guidance, models "default to generic patterns that create what users call the 'AI slop' aesthetic". They publish a system prompt snippet to counter it. Here's the core of it; the full version lives on the Claude prompting best practices page.

<frontend_aesthetics>
You tend to converge toward generic, "on distribution" outputs. In frontend design, this
creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive
frontends that surprise and delight.

Focus on:
- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic
fonts like Arial and Inter; opt instead for distinctive choices that elevate the
frontend's aesthetics.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency.
Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw
from IDE themes and cultural aesthetics for inspiration.
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only
solutions for HTML. Use Motion library for React when available. Focus on high-impact
moments: one well-orchestrated page load with staggered reveals (animation-delay)
creates more delight than scattered micro-interactions.
- Backgrounds: Create atmosphere and depth rather than defaulting to solid colors.

Avoid generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character
</frontend_aesthetics>

Put it in the system prompt if you're calling the API, or at the top of the conversation in a chat. The docs also warn that the model still converges on common choices across generations (they name Space Grotesk), so if you run the same brief ten times and see the same font, add it to your must-not list.

One caveat: this snippet is written for products with character. For an internal admin tool, "surprise and delight" is the wrong brief. Keep the typography and color discipline, drop the atmosphere lines, and say "dense and quiet" in your direction field.

Checking the output before you ship it#

Don't take generated contrast ratios on trust. Two small scripts cover the checks that matter most. The first takes the text/background pairs from a generated palette and computes WCAG contrast the way browsers do.

function luminance(hex) {
  const [r, g, b] = hex.replace('#', '').match(/../g)
    .map(h => parseInt(h, 16) / 255)
    .map(c => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
function contrast(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}
const pairs = [
  ['--text on --bg', '#1b1f23', '#f6f1e9'],
  ['--primary on --bg', '#b7410e', '#f6f1e9'],
  ['--muted on --surface', '#8a8a8a', '#ffffff'],
];
for (const [name, fg, bg] of pairs) {
  const r = contrast(fg, bg);
  const grade = r >= 7 ? 'AAA' : r >= 4.5 ? 'AA' : r >= 3 ? 'AA large text only' : 'fail';
  console.log(`${name.padEnd(22)} ${r.toFixed(2)}:1  ${grade}`);
}

Swap in the hex values Claude gave you. Anything that prints "fail" goes back into the next prompt as a finding, with the number. The formula and thresholds are from the WCAG contrast guidance.

The second script generates a type and spacing scale from a base and ratio, so you can hand Claude exact values instead of "a nice scale" and compare its answer against yours.

base_px = 16
ratio = 1.25
names = ["sm", "base", "md", "lg", "xl", "2xl"]

print("/* type scale */")
for step, name in enumerate(names, start=-1):
    px = base_px * ratio ** step
    print(f"--font-size-{name}: {px / 16:.4g}rem; /* {px:.1f}px */")

print("/* spacing scale, 4px grid */")
for i, mult in enumerate((1, 2, 3, 4, 6, 8, 12, 16), start=1):
    print(f"--space-{i}: {mult * 4}px;")

Paste the printed block into the design system prompt under "Spacing" and "Type" and ask Claude to use those values. Fixed inputs give you comparable outputs across runs.

Common mistakes with UI/UX prompts for Claude#

• One-line briefs. "Make a modern landing page" has no users, content or constraints, so every gap gets the median answer. Use the table above as a checklist.
• Expecting motion without asking. The docs say animations and interactive elements should be requested explicitly. If the hover state is missing, that's the prompt, not the model.
• Over-scripting the process. Anthropic recommends general instructions over prescriptive step-by-step plans for current models. A line like "think thoroughly about the hierarchy" tends to beat a 12-step procedure you wrote yourself. Prescribe the deliverable, not the thinking.
• Asking for reasoning in tags. On Claude Fable 5.1, Claude Fable 5, Claude Opus 5.5, Claude Opus 5 and Claude Sonnet 5.5, a prompt that asks the model to write out its reasoning in <thinking> tags may be declined. Rely on the model's own thinking instead, at a lower effort level if cost or latency matters.
• Carrying over "be thorough" nagging. Anthropic notes Claude 4.6 models are more proactive and may overtrigger on instructions that older models needed. If the output is bloated, remove the pushing before adding more.
• No success criteria. Anthropic's prompt engineering overview assumes you have a clear definition of success and a way to test it before you start tuning. For design that means a written done list, even if it's five bullets.
• Trusting the palette. Run the contrast check. A pleasant-looking muted gray on white fails more often than you'd expect.
• Critique with no bar. "Any feedback?" gets compliments. Heuristics, severity and a cap get a punch list.

Project ideas to practice the prompts on#

If you want to get good at briefing Claude before a real deadline, pick something with real constraints:

• A settings page for an app you use daily. Dense content, lots of states, obvious wrong answers. Good for the layout template.
• A token set for an existing open-source UI. Reverse-engineer the roles, then ask Claude to propose a dark theme with the same names. Good for the design system template.
• A critique of your own portfolio site. Give Claude the heuristics and let it find the things you've stopped seeing. Good for the critique template, and it doubles as portfolio work.
• The same brief, three directions. Run one layout brief with three different reference aesthetics and compare. This is the fastest way to learn which fields in the brief actually move the output.

Quick reference#

Before you send a design prompt to Claude, check:

1. Users and their job are named.
2. Content inventory is complete and ordered.
3. Platform, breakpoints and brand constraints are stated, with hex values.
4. Accessibility bar is explicit (contrast, focus, keyboard).
5. Must-not list covers defaults you've already rejected, fonts included.
6. Deliverable format is specified (code with CSS variables, spec, or findings list).
7. Motion and interaction are requested explicitly if you want them.
8. A self-check line is included (unless you're on Claude Opus 5).
9. The frontend aesthetics snippet is in the system prompt for product work.
10. You have a contrast check ready for whatever comes back.

Start with the layout template, keep whichever fields moved the output, and reuse that brief as your house style. More structure in the prompt means less editing afterward.

Quick answers