Making AI-generated UI not look generic

Unedited AI-generated interfaces tend to converge on the same handful of tells: a purple-to-blue gradient with no relationship to the product, fully rounded pill buttons everywhere regardless of size, one spacing value (usually 16px) reused for every gap with no rhythm, and a single generic type scale with no real hierarchy. None of this is a .gui problem specifically: it’s what happens when a model defaults instead of deciding. But .gui’s structure makes the fix mechanical rather than vague.

Replace default fills with a real token palette

A generic gradient is usually a placeholder nobody committed to. Define tokens that came from the actual product (a brand color, a real neutral scale) and reference them everywhere instead of leaving default fills in place. This is the same fix that improves Consistent scoring in CCAC: one committed system beats several undecided ones.

Give spacing a scale, not one number

Uniform 16px everywhere is a tell precisely because real interfaces don’t space everything identically: related items sit closer together than unrelated sections. Use a small set of deliberate gap values (say 4 / 8 / 16 / 32) and apply the smaller ones inside a group and the larger ones between groups, instead of one value applied everywhere by default.

Use role= to make hierarchy structural, not just visual

Generic UI often has visual hierarchy (a bigger font here, a bolder weight there) with nothing underneath it. Declaring role= on headings, primary actions, and key content makes the hierarchy a structural fact of the file, not just a font-size choice: and it’s the same signal that improves Comprehensible scoring.

None of this requires design taste to execute: it requires actually deciding on a token set and a spacing scale instead of accepting whatever a model defaulted to, and the closed vocabulary makes it possible to check that those decisions were actually applied consistently across the file.