Generating UI: From Adjectives to a Spec
“Make a nice page” vs “reference Linear's information density, one primary color only” — a whole tier apart. Compare three prompt levels and watch the gap
THE QUESTION THIS PAGE ANSWERS
ANSWER FIRSTWhat is the key idea behind “Generating UI: From Adjectives to a Spec”?
“Make a nice page” vs “reference Linear's information density, one primary color only” — a whole tier apart. Compare three prompt levels and watch the gap
Turn taste into a behavior the product can repeat. The useful outcome is not a nice opinion. It is a visible rule, a small example, and a way to tell when the experience falls below the bar.
Capture one before-and-after example that shows the quality bar without extra explanation.
Polish that improves the surface while leaving the user's uncertainty untouched.
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.
Turn the feeling in “Adjectives are wishes; a spec is an instruction” into a judgment
“Hand over “make a nice landing page,” and AI hands back purple gradients and centered filler — generic stuff.” points out that AI has lowered the bar for making something usable. The skill readers need is noticing what is wrong and turning that feeling into an actionable requirement.
Watch the user's next action, not just the surface
Turn “The easiest thing to miss in a spec is the text itself.” into observable questions: does the user know what happened, what to do next, and how to recover from an empty or failed state? Does the hierarchy make the important information visible first?
Pretty is not the same as usable
Apply “Next time you generate UI, assemble a spec with the block builder and compare the output to last time's offhand one-liner” to a second screen or flow. Record one moment of hesitation and the user action after the change; observable behavior is stronger evidence than polish alone.
From “Adjectives are wishes; a spec is an instruction” to “Try it · Same brief, three prompt tiers”
“Adjectives are wishes; a spec is an instruction” grounds the problem in “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. Prom…”. “Try it · Same brief, three prompt tiers” then moves it toward “Three prompt tiers, three outputs Switch tiers Flip between them a few times — feel how prompt information turns into output quality. Tier 1 · Wish Tier 2 · Label Tier 3 · Spec Prompt Make a nice landing page u…”. Together, they show that the lesson is not just a conclusion to remember, but a claim with conditions.
Carry the judgment into the next situation
For experience work, turn abstract impressions into user actions: did the person understand the state, find the next step, recover from an error, and want to continue?
- “Adjectives are wishes; a spec is an instruction”: 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. Prom…
- “Try it · Same brief, three prompt tiers”: Three prompt tiers, three outputs Switch tiers Flip between them a few times — feel how prompt information turns into output quality. Tier 1 · Wish Tier 2 · Label Tier 3 · Spec Prompt Make a nice landing page u…
- “The closing point”: Adjectives are wishes; a spec is an instruction: primary, spacing, weight, bans — written as clauses you can verify one by one
The final “The closing point” brings the discussion to “Adjectives are wishes; a spec is an instruction: primary, spacing, weight, bans — written as clauses you can verify one by one”. The useful thing to carry forward is knowing which judgments must be revisited when input, scale, or risk changes.
I turned one judgment from this article into a small experiment I could run today. Knowing what to observe next is more useful than simply remembering the conclusion.
After reading this, I first looked for the conditions behind the idea instead of copying the method into a project. That order made the later trade-offs much clearer.
When this judgment reaches real work, which constraint should be added first? I am curious which step matters most between reading and the first practical attempt.
No discussion on this article yet.