“The AI just generated a UI, and it screams "AI made this" - what do you fix before shipping?”
AI-generated UI looks generic - bring it up to premium quality
Recommended AI Agent Skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction and typography.
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end standards.
UI/UX design intelligence for web, mobile, and desktop. Optimizes component states, animations, and visual polish.
A quick-install rule set that blocks common "AI slop" patterns (default purple gradients, generic icons, uniform padding) from the start.
Action framework
- Check whitespace and alignment - AI defaults to uniform padding/margin with no visual hierarchy. Widen spacing between groups, tighten it within a group.
- Check the color palette - AI defaults to a purple-blue gradient or too many accent colors at once. Limit it to one primary accent, everything else neutral.
- Check typography - AI tends to use one font size for every content level. Build a clear hierarchy: heading, subheading, body should differ visibly in size/weight.
- Check icons and illustrations - AI tends to drop in generic icons (lightbulb, rocket, checkmark) unrelated to the actual content. Swap in icons/imagery specific to this product's context.
- Compare against one product you genuinely find beautiful (not AI-made) - list 3 concrete differences, then fix each one.
Before
"The UI has all the buttons and text and it works - ship it as is."
After
"Pass again: drop the default purple gradient, swap the generic lightbulb icon for one specific to this feature, increase spacing between cards from 8px to 24px, cut down to one accent color instead of four."