Why AI-generated UI all looks the same
Eduardo CalvoWrote the skill and the detector this post measures with
You have seen it. The indigo-to-purple gradient across the headline. Three feature cards in a row, each with an emoji where an icon belongs. A pill badge above the hero, 8px radius on everything, one shadow token used sixteen times. Ask two different agents for a landing page and you get siblings.
This is not a bug in the model
A language model answers with the most probable continuation. For UI, the most probable continuation is the average of everything published on the web — and the average of everything is a Tailwind starter from 2023. The model is doing exactly what it was trained to do. The output is generic because generic is the correct answer to the question it was asked.
Which means prompting harder does not help much. “Make it beautiful” and “make it modern” are not constraints; they are adjectives the model will happily satisfy with the same gradient.
What actually changes the output
Three things, in order of leverage:
A loaded constraint. Not advice in the prompt, but a file the agent reads before it writes: this is what slop looks like, here is why, do not do it. Skills are that file. A rule like “emoji are not icons” removes an entire branch of the probability tree.
A named alternative. Blocking a pattern is half the work; the agent still needs somewhere to go. “No emoji icons” without “use a real icon set with consistent stroke weight” produces a page with holes in it.
A deterministic check. The model cannot see its own output. Something has to read the result and fail it — the same way a type checker reads code the author was sure about.
The measurement
We built seven pairs of pages: same casual one-line prompt, same model, one pass each. The only difference was whether the agent read a design skill first. The bare-agent versions carry 94 findings between them across a static detector. The skill-loaded versions carry zero.
The findings are not opinions. Gradient text outside a marketing context, six identical cards
in one row, hover states with no focus state, transition: all, a heading hierarchy that skips
levels. Each one is a rule you could have written down and each one is a rule the bare agent
broke by default, because default is exactly what it produces.
Open the seven pairs and switch between the two versions. That switch is the whole argument.