Prompting AI to build production UI, not demos

Ask Claude or v0 for a pricing section. You'll get something that works. You'll also get something that screams AI demo: cartoon gradients, oversized rounded corners, three plans where every plan has the same emoji, the word "Premium" sitting awkwardly in a purple box. It's the visual equivalent of Comic Sans confidence.

The model isn't broken. It's giving you the average of every pricing section it has ever seen, and the average of the internet is bad. The fix isn't a better model, it's a tighter prompt.

Why default outputs look like demos

Code-gen models optimize for legibility, not taste. A demo is legible: oversized buttons, exaggerated colors, generic icons. A production component is restrained: smaller buttons, narrower contrast, type carrying most of the load. The model has no reason to pick the second one unless you ask.

So the prompt's job isn't to describe what you want in general terms, it's to encode the specific decisions that good designers make automatically.

The five dials

Every UI prompt you write should set values for these five things. Skip any and the model picks for you, badly.

1. Type scale

Don't say "large headline". Say 64px, weight 600, tracking -0.03em. The difference between editorial and webpage is almost entirely tracking, and the model will never tighten tracking on its own.

2. Color contrast

Default outputs are high-contrast everywhere, which reads as loud. Specify the ladder: text-fg for primary, text-fg-muted for secondary, text-fg-subtle for tertiary. Then the model knows what to dim.

3. Spacing rhythm

Give the model a specific rhythm, space between sections is 96px, between blocks within a section is 24px, between lines within a block is 8px. Without it, every gap becomes the same gap-4 and the design loses its breath.

4. Reference brands

"Linear-style" is more information than three paragraphs of adjectives. Cite two or three brands by name and the model triangulates the aesthetic far more reliably than from descriptors. The catch: the brands have to be in the training data and the model has to have priors about them. Linear, Vercel, Stripe, Arc, Apple, Notion all work. Your client's competitor does not.

5. Texture and motion

Specify what's not there. "No drop shadows. No purple gradients. No emoji. No animation on the buttons." Negative space in the prompt becomes negative space in the output.

A prompt template

Here's the skeleton I reuse. Fill in the brackets and the model behaves.

Generate a [component] in a [dark/light] theme.

Type
- Headline: [size]px, weight [400–700], tracking [-0.03em]
- Body: [size]px, leading [1.55], color [muted token]
- Mono labels (eyebrows, metadata): [size]px, uppercase, tracking-[0.2em]

Color
- Primary text: [token]
- Muted text: [token]
- Borders: [token], hairline only
- Accent: [single color], used sparingly

Spacing
- Section padding: [px] vertical
- Block gaps: [px]
- Element gaps: [px]

References
- Visually similar to [Brand A] and [Brand B]
- Specifically the [section name] on their site

Constraints
- No drop shadows
- No gradients except [where allowed]
- No emoji
- No marketing copy in CTAs, single verb only

Iterate on outputs, not prompts

Once you have a prompt that gets you to 80%, stop tuning it. The remaining 20% is faster to fix by hand than by re-prompting. The mistake people make is treating the model like a designer they can keep briefing, but the model has no memory of your last attempt, and every iteration risks regressing the good parts.

The right loop: generate once with a tight prompt, then edit the output in your editor. The AI gets you to the starting line; you finish the race.

Where to find tuned prompts

Every entry in the onedb directory ships with a hand-tuned prompt for that specific part, type scale, color tokens, references, and constraints already filled in. Paste it into v0 or Cursor and the output reads like the brand it's modeled on. That's the whole point of the directory.