Why Your AI Keeps Making Ugly UI (And the Fix)

You asked Claude to build a dashboard. You gave it detailed instructions. You refined the prompt three times. The output works. Every feature is there.

But it looks like something a developer built in 2011. The colors are arbitrary. The spacing is inconsistent. The typography is whatever the model defaulted to. The whole thing feels vaguely... generic.

This is not the AI being bad at coding. The AI is great at coding. The problem is that you gave it no design context whatsoever.

What the AI actually knows

Language models are trained on code from millions of projects. Most of that code has no design system. It uses whatever color the developer grabbed from a Stack Overflow answer. It uses the default Tailwind config. It uses whatever font was convenient.

When you prompt the AI without design context, it pattern-matches to all of that average code. And the average is not good.

The AI is not making aesthetic judgments. It is making statistical predictions. It predicts: "given this prompt, what code do most projects contain?" The answer is: mediocre code with mediocre design.

The fix is one file

Give the AI specific design context and it stops pattern-matching to the average. It uses your colors instead of inventing colors. It uses your font instead of picking a random one. It uses your spacing scale instead of eyeballing it.

That is what DESIGN.md is. One file. At the top of your project or your prompt. It contains your:

• +Color tokens: primary, secondary, background, text, accent, semantic colors
• +Typography: which fonts, which weights, which sizes for which roles
• +Spacing: your base unit and the scale you use
• +Border radius: so cards and buttons have a consistent shape language
• +Shadows: depth levels for cards, modals, floating elements
• +Motion: duration and easing so transitions feel consistent

Paste it before your prompt and the AI has a specific design system to work from instead of averaging across millions of projects.

You do not have to build one from scratch

Here is the part most people miss. You do not need to invent a design system. You can borrow one.

Every product you respect has a design system. Stripe. Linear. Vercel. Those design decisions were made by smart people who thought hard about them. The colors, the type scales, the spacing — none of that is arbitrary.

You can take those decisions and use them as your starting point. You are not copying their brand. You are borrowing their design discipline.

How to do it right now

1. 1Go to the DesignMD catalog. Pick a design that looks like what you want to build. A fintech app? Try Stripe or Brex. A dev tool? Try Linear or Vercel. Something for consumers? Try Airbnb or Duolingo.
2. 2Copy the DESIGN.md. There is a copy button on every design page.
3. 3Paste it at the top of your next AI prompt. Before you describe what you want to build, paste the whole file. The AI will use those tokens throughout everything it builds.
4. 4Keep it in your project. Drop the file in the root of your repo as DESIGN.md. Tools like Claude Code read project files automatically. Now every prompt in that project has design context.

The difference is obvious

Before DESIGN.md: the AI picks #3B82F6 because it is in most Tailwind projects. The heading font is system-ui. The card border radius is 4px because someone typed it once in a tutorial.

After DESIGN.md: the AI uses #5E6AD2 because that is your primary. The heading font is Inter at 600 weight. The card radius is 8px. Every component it generates looks like it belongs in the same product.

Five minutes of setup. Every AI coding session after that looks better.