Generating UI: From Adjectives to a Spec
When you brief AI on UI, adjectives are wishes and a spec is an instruction. Same landing-page request, three prompt tiers, three quality tiers of output. This lesson teaches you to write “looks good” as a spec AI can't wander from.
Hand over “make a nice landing page,” and AI hands back purple gradients and centered filler — generic stuff. AI only owns half the blame: with no information, it can only output the training-data average. Prompt engineering already said “you get what you put in”; generating UI is the clearest demo of that rule. Lock the primary color, pin spacing to a grid, limit weights to two levels, list the bans — and the output jumps a tier.
The easiest thing to miss in a spec is the text itself. Interfaces are mostly type — if type fails, perfect color won't save you. Good news: typography already has hard numbers. About Face 4, Chapter 17, hands you the figures: contrast, typeface, case, size — all four translate straight into prompts.
Mullet and Sano's verdict, quoted as-is in About Face 4: unnecessary variation is the enemy of consistent design. Things that are nearly the same should be the same. Write it into the prompt — it's the highest-value ban.
Left: how you talk. Right: the spec AI needs. Tap a row to translate it; finish all five and copy the set.
You don't memorize a spec — pick one block from each of six clauses and it's assembled. Wherever you choose “leave blank,” that part goes back to AI luck — and the preview shows it clearly.
Which constraint lifts AI-generated UI the most?
| Clause type | Role | Template wording |
|---|---|---|
| Positive specs | Lock everything you can quantify so AI has nothing to guess | “Primary #DB2777, spacing on an 8pt grid, corner radius 12px everywhere, weights only 800 and 600” |
| Negative constraints | Block the paths AI loves to wander down | “No gradients, no emoji icons, no more than one shadow style” |
| Reference anchor | Use a product both sides know as the coordinate | “Information density reference Linear; whitespace reference Notion.” Don't say “big-tech style” — no pointer means you said nothing |
| Unity clause | Unify “nearly the same” into the same, ahead of time | “Make near-identical elements identical: one primary, one radius set, one shadow style sitewide; delete unjustified variation” |
The fourth type is Mullet & Sano's “unnecessary variation is the enemy of consistent design,” rewritten as a prompt. AI loves to improvise details: 10px radius here, 12px there, two grays, three shadows. A unity clause seals that gap early.
Adjectives are wishes; a spec is an instruction: primary, spacing, weight, bans — written as clauses you can verify one by one.
Negative constraints give the best ROI: “No gradients, no emoji icons, no more than one shadow” — three lines cut most of the AI look.
Typography has hard numbers to copy: 80% contrast, sans-serif body, no all-caps English, 10px minimum — four acceptance lines in the prompt.
Next time you generate UI, assemble a spec with the block builder and compare the output to last time's offhand one-liner.
Source: Original to Xiaoshan Academy's Taste Engineering series; some design principles adapted from About Face 4: The Essentials of Interaction Design, Chapter 17.