From Generic to Good: What AI-Generated UI Looks Like Before and After DESIGN.md

Here is the exact prompt: "Build a fintech dashboard with a transactions table, account balance overview, and a spending chart."

I ran it twice. Once with nothing else. Once with the Stripe DESIGN.md pasted before it.

The difference is not subtle. One looks like it was built by a developer who has never thought about design. The other looks like it belongs in a Series A pitch deck.

Without DESIGN.md

The AI produces something that technically works. The table renders. The chart shows data. The balance number is big.

But look at the details. The primary color is #3B82F6. Not because anyone chose it. Because it is the most common blue in the Tailwind default config and therefore the most common blue in the AI's training data. It means nothing about your product.

The font is system-ui. Fine on a Mac. Looks like old Windows XP on a Chromebook.

Card padding is 20px on the transaction table, 24px on the balance card, 16px on the chart container. Nobody decided this. The AI just generated each component independently. The numbers are close enough that the inconsistency reads as sloppiness, not intentionality.

The heading weight is 700. The subheading is also 700. The label above the chart is 700 too. Everything is fighting for attention. Nothing wins.

The transaction amounts are in a green that does not match the chart green. Two greens that should be the same system color. Because there is no system.

With the Stripe DESIGN.md

Same prompt. The DESIGN.md is pasted before it. Now the AI has constraints. And constraints are what produce good design.

The background is #0A0A0A, not generic white. The surface color for cards is #111111. The primary color is #635BFF, Stripe's signature violet. Not because I specified it, but because it is in the design system the AI is now working from.

The font is Inter. Not system-ui. Inter at 600 weight for headings, 500 for labels, 400 for body. The hierarchy is built into the token definitions. The AI just uses them.

Every card has 24px padding because --space-6 is 24px and the component guidance says cards use space-6. The transaction table rows have 16px vertical padding because --space-4 is 16px. The numbers are from the same list. The rhythm is consistent.

The positive transaction amounts use --color-success: #22C55E. The chart uses the same token. One green. One system. The detail that was invisible in the bad version now signals craft.

Why the difference is so large

The AI is not being lazy in the first example. It is doing what it always does: predicting the most likely code given the prompt. The most likely code in its training data is average code with average design choices.

The DESIGN.md does not make the AI smarter. It narrows the solution space. Instead of averaging across every Tailwind project ever written, it now averages within the specific design system you gave it. The variance collapses. The output converges on something coherent.

That coherence is what looks professional. Not any one color or font. The fact that everything is from the same system.

How to get started

1. 1Pick a design from the catalog that fits your use case. For fintech: Stripe, Brex, or Plaid. For dev tools: Linear or Vercel. For consumer apps: Airbnb or Duolingo.
2. 2Copy the DESIGN.md using the copy button on the design page. The whole file comes with colors, typography, spacing, radius, shadows, and motion tokens.
3. 3Paste it at the top of your prompt, before you describe what you want to build. The AI reads the file as context for everything it generates.
4. 4Save it as DESIGN.md in your project root. Tools like Claude Code pick up project files automatically. Now every session in that project starts with design context.

Other fintech starting points

Stripe is the most versatile for fintech, but it is not the only option. Brex skews darker and more premium. Plaid is cleaner and more neutral. Pick the one that fits where your product wants to sit.