Getting good UI out of Claude Code is not about a magic prompt, it is a short stack of fixes that takes it from generic AI slop to something you would actually ship. This guide walks each one, with a copyable CLAUDE.md block, and is honest about where Claude Code needs help from a design layer it does not have on its own.
The core problem to understand first: Claude Code is a great front-end engineer and a blind designer. It can write flawless, accessible, responsive code, but with no direction it converges on the statistical average of its training data, which has a recognizable look (Inter font, a purple-to-indigo gradient, a centered hero, three rounded cards). Anthropic literally named this "distributional convergence" in their launch post. Everything below is about giving Claude the direction and the feedback it is missing.
How to get good UI from Claude Code, in order
Claude Code is a great front-end engineer and a blind designer. You fix that by stacking four things, cheapest first, and stopping when the output clears your bar:
Stack the fixes in this order
Install the frontend-design skill (free, 2 min)
Anthropic's frontend-design skill kills the worst defaults: banned generic fonts, forces a deliberate direction. The single highest-leverage free change.
Add a CLAUDE.md design block (free, 15 min)
Add a design-system block to your CLAUDE.md and wire shadcn via MCP, so every screen stays consistent instead of re-guessed each time.
Give Claude a real reference
For output that is actually good and not just consistent, hand it a prompt-library pattern, a captured component, or a direction generated on a design canvas.
Run the screenshot loop, always
Write the code, screenshot the result, paste it back with specific feedback, and repeat. The highest-leverage habit, and it costs nothing.
The rest of this guide is each step in depth, starting with why the defaults look the way they do.
Why does Claude Code produce generic UI?
Claude Code produces generic UI because, without explicit direction, a language model returns the highest-probability answer, and the highest-probability "nice button" is the one it saw most in training: Inter or Roboto type, a purple gradient, a card grid. It is not a capability gap. It is a defaults problem. The model is averaging millions of tutorials and starter templates, and the average has a face.
This is the same root cause behind AI slop everywhere, and we break it down in depth in why AI design looks generic. The short version for Claude Code specifically: the fix is never "make it look better" (a vague prompt gets a vague average), it is giving the model a deliberate aesthetic direction, a consistent system, and a reference to anchor against. The rest of this guide is those fixes, including the honest reason stacking more skills does not get you there on its own.
Why does it still look generic after I install the skill?
Because a skill tells Claude how to think about design, but it does not give Claude a concrete picture of what this product should look like. The frontend-design skill is a set of aesthetic heuristics (be distinctive, use deliberate typography, take an aesthetic risk) and that is useful guidance, not a visual source of truth. So the model follows the advice and still fills the gaps with the familiar layout archetypes it knows best. This is the single loudest complaint about it: people stack the skill plus extra prompt packs plus design tokens and still land on a flat, text-heavy page.
The teardown reviews reach the same conclusion. One competitor's own guide admits the skill plus a CLAUDE.md block plus shadcn "gets you 60% of the way and then plateaus" without a visual reference layer. Another, framed around what 565K installs fix and the things they do not, makes the same point: the skill clears the obvious font and color defaults and leaves the harder problems open.
So the fix people keep arriving at by hand is reference grounding: pick reference sites, screenshot them, turn those into rules and tokens, and constrain Claude to them. Prose loses to a picture, because a paragraph still leaves the model free to fall back on what it already knows. That manual chain (references, then tokens and rules, then a design brief, then Claude implements) is the real job, and it is what the next sections set up.
How do you install the Claude Code frontend-design skill?
You install Anthropic's official frontend-design skill, which they shipped on November 12, 2025 and which has passed 565,000 installs. It is a roughly 1,300-token SKILL.md that runs before Claude writes any code and forces deliberate aesthetic choices: it bans generic fonts by name ("NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts)"), makes Claude commit to a specific direction (brutalist, editorial, maximalist, luxury, and so on), and pushes intent in typography, color, spacing, and motion.
The official install is one click: visit claude.com/plugins/frontend-design and click "Install in Claude Code," or browse the open SKILL.md on GitHub first. Once installed, it activates automatically on front-end prompts.
This is the single highest-leverage change, and it is free. It will not make Claude a designer, but it stops the worst of the defaults. What it does not do, and Anthropic is clear about this, is give Claude taste or a reference. It nudges Claude off the exact center of the distribution. Steps two and three are what get you somewhere specific.
What should go in your CLAUDE.md for design?
Your CLAUDE.md (or a separate design-system.md it references) should encode the specific decisions you do not want Claude to re-guess every time: your fonts, your color variables, your spacing rhythm, and the patterns you forbid. The skill sets a general direction; this file makes it your direction, consistently, across every generation. Anthropic's own frontend aesthetics cookbook is the canonical reference for what to put here.
Here is a block you can drop in and edit:
## UI and Design Rules
Typography
- Never use Inter, Roboto, Open Sans, Lato, Arial, or system fonts.
- Display: a characterful font (e.g. Fraunces). Body: a clean grotesque. Mono: JetBrains Mono.
- Use weight extremes (200 vs 800), not 400 vs 600. Size jumps of 3x+, not 1.5x.
Color
- Commit to ONE dominant color plus one sharp accent. No evenly-distributed palettes.
- All colors live in CSS variables. Forbidden: purple-to-blue gradients on white.
Spacing and layout
- 8px spacing rhythm. Strong hierarchy via type and space, not borders everywhere.
- No three-rounded-card hero. No centered-everything default.
Components and motion
- Use shadcn/ui primitives as the foundation; do not hand-roll what exists.
- One well-orchestrated page-load animation beats scattered micro-interactions.
Verify
- After UI changes, screenshot the result and compare against the reference before calling it done.Two details that matter. Wire shadcn/ui in via MCP so Claude uses current component signatures instead of stale training data. And keep the rules operational: "make it modern" means nothing to a model, but "Fraunces display, 8px rhythm, one accent, no purple" is something it can execute.
How do you make Claude Code UI look good, not just consistent?
You give Claude a real visual reference to build against, because consistency and taste are different problems. The CLAUDE.md block makes every screen match; it does not make them good. The skill commits to a direction; it does not know what a great version of that direction looks like. The missing ingredient is a reference, and Claude Code's vision is genuinely good at reading one and reproducing its structure, spacing, and type pairings.
The hard part, as the better guides admit, is having a good reference in the first place. Three ways to get one:
- Pull a proven pattern from a prompt library. The free Superdesign prompt library is a large, curated set of styles, components, and full-page prompts you can copy into Claude Code as a starting point with taste already baked in, instead of describing a vibe from memory.
- Generate a reference with a design agent, then hand it to Claude Code. This is where a design layer earns its place: Superdesign generates and explores polished directions on a canvas, then hands clean React and Tailwind back to your agent. Claude Code does the engineering; the design agent supplies the taste it lacks.
- Capture a real site you admire. Superdesign's free Chrome Component Grab turns any live component into clean Tailwind you can feed Claude as a concrete reference. More on that in how to clone a website's design.
The pattern across all three: stop asking Claude to invent taste from a text prompt, and start handing it something polished to build against.
Is the frontend-design skill good for dashboards and app UI?
It is noticeably stronger on expressive marketing pages than on dense product UI, and that follows from its own instructions. The skill optimizes for a memorable hero, a typographic thesis, and an aesthetic risk, which is exactly right for a landing page and only half the story for a data table, a settings screen, a workflow builder, or an agent dashboard. Real app surfaces live or die on information density, state coverage, and consistency, not on a striking hero.
This is where a concrete reference matters most. A dashboard or a CRUD flow carries a hundred small decisions (row height, empty states, loading and error states, how a modal behaves, how it reflows on mobile) that a "be distinctive" heuristic never touches. Hand Claude a real reference for those surfaces, from a prompt library or a captured component, and it has something specific to match instead of inventing each one and hoping. If your work is real product UI rather than brand pages, this is the gap to close first.
What is the screenshot loop and why do you need it?
The screenshot loop is the habit of writing code, screenshotting the rendered result, pasting that image back into Claude Code, and giving specific visual feedback, repeated until it is right. You need it because Claude writes correct CSS but cannot evaluate its own visual output. That gap is the single biggest reason a technically-correct UI still looks off, and Anthropic's own best-practices guidance is explicit: verify UI changes visually and paste images directly.
The loop in practice, usually three rounds and under ten minutes:
The screenshot-compare-refine loop
- ✓Write the component, run it locally
- ✓Screenshot the rendered output
- ✓Paste the screenshot into Claude Code with SPECIFIC feedback (not 'make it better')
- ✓Point at concrete issues: 'the spacing here is too tight', 'the hierarchy is unclear'
- ✓Reload, screenshot again; round 2 usually pulls back round 1 overcorrection
- ✓Repeat until it matches the reference
The key move is replacing vague description with the actual output. "Make it look better" is an instruction to return the average again. "Here is the screenshot, the card padding is inconsistent and the heading is too small relative to the body" is something Claude can act on precisely.
The loop matters most for what a first glance hides. The opening render often looks fine, then the cracks show under inspection: awkward mobile breakpoints, a janky modal transition, long text overflowing, missing loading, error, and empty states. And do not lean on Claude to catch these by reviewing its own work, the same agent that wrote the code is not a reliable judge of it, so a real rendered screenshot (or a side-by-side diff against your reference) beats asking it "does this look good?" Claude Code's /run and /verify can confirm an app runs, but running is not the same as looking right across every state.
Skill vs design system vs design tool: what does what?
They solve different parts of the same problem, and you want the stack, not a single piece. Confusing them is why people install the skill, see a small improvement, and conclude AI design "does not work." Here is who does what:
| Layer | What it fixes | What it cannot do |
|---|---|---|
| frontend-design skill | The worst defaults (banned fonts, forces a direction) | Give taste or a reference; it only moves you off-center |
| CLAUDE.md / design-system file | Consistency: same fonts, colors, spacing everywhere | Decide whether the design is actually good |
| Visual reference (library, capture, agent) | Taste: a polished target to build against | Write your production code |
| Claude Code itself | Correct, accessible, responsive code | See its own output (hence the screenshot loop) |
Anthropic also now ships Claude Design, a separate conversational canvas for building prototypes and syncing a design system into Claude Code. It is a real option for the design phase. The honest framing for all of this is skill plus system plus reference plus a feedback loop, not any one of them alone.
Where does Superdesign fit in a Claude Code workflow?
Put it simply: frontend skills tell Claude how to design, Superdesign gives it something concrete to design from, and a way to check what it shipped. It is the design layer Claude Code does not have on its own: an AI design agent that explores several polished directions at once on a canvas and hands real React and Tailwind back to your agent. It runs as a skill inside Claude Code (or Cursor), so the design step lives where you already work:
npm install -g @superdesign/cli@latest
superdesign login
npx skills add superdesigndev/superdesign-skill
You trigger it with /superdesign and a plain-English request. It learns your project first (it creates a superdesign folder with a design-system file plus replicas of your real pages), opens a canvas to explore variations, and hands the chosen design back as code. The three pieces that complement Claude Code most directly: parallel exploration (fork several distinct directions at once instead of iterating one linear thread, so you compare before committing), the free prompt library (curated references so taste comes from proven patterns, not a text prompt), and a persistent design-system file so the accepted direction survives across sessions instead of drifting page to page (the taste-drift problem a generic skill cannot solve, because judgment has to be project-specific). It is a free tier plus a flat $20/month, no metered credits.
If you build in Cursor instead, the same logic applies, see Cursor for design. And for the deeper argument on why a separate design step beats prompting blind, read what a DESIGN.md is and the 2026 AI design stack.
Which approach should you use?
Stack them in order, stopping when the output is good enough for your bar (the four-step stack is at the top of this guide). The takeaway is simple: Claude Code is the engineer, not the designer. Give it guardrails, a system, a reference, and a feedback loop, and it builds UI you would ship. Skip those, and you get the same purple gradient as everyone else.
