guide
How to fix a vibe-coded UI: the AI-slop checklist
7 min read · updated June 16, 2026
You vibe-coded a UI, it works, and it looks like every other AI app. This is the checklist to fix that: the specific tells that make a UI read as AI slop, grouped by area, each with the fix. Run it top to bottom.
What AI slop actually is
AI slop is not bad taste, it is average taste. Models build the most statistically likely page, and the most likely page is the one repeated most often across the web. That is why a thousand vibe-coded apps share the same gradient, the same hero, the same three cards. Fixing slop means replacing the average with a decision in each place the average shows up.
Work the checklist in order. Color and type come first because they change the feel with the least effort.
Color and type
- 01
Purple or blue gradient base
The universal AI template signature.
fix One accent on a neutral base. Never a purple-to-blue gradient.
- 02
Gradient-filled headlines
Instantly dates a page as AI-built.
fix Solid ink, one accent word.
- 03
Pure black (#000) backgrounds
Reads harsh, not premium.
fix Use off-blacks like #101013 or #1B1F22.
- 04
Default Inter on the display type
Untouched defaults read as untouched design.
fix A characterful display face, plus one workhorse sans. Two families maximum.
Layout and components
- 01
Centered hero and centered everything
The default AI composition.
fix Left-align or split 60/40.
- 02
Three equal cards
The most templated row on the web.
fix Zig-zag, bento, or ruled rows.
- 03
A card around everything
Borders and shadows on all things flatten the hierarchy.
fix Group with whitespace and 1px rules. Cards only for real elevation.
- 04
Missing loading, empty, and error states
Their absence is the fastest way a build gets caught.
fix Build skeletons that match the layout, a composed empty state, and inline specific errors.
- 05
No visible keyboard focus
Removing the outline is an accessibility failure.
fix A 2px accent focus ring with offset.
How to run the fix
- 1
Pass 1: strip the signals
Remove every gradient, swap #000 for an off-black, and replace emoji icons with a real icon set. This alone removes most of the slop read.
- 2
Pass 2: set the type
Install one display face and one body sans. Push headlines into a real scale (clamp around 2.5rem to 4.5rem) with tight tracking.
- 3
Pass 3: rework the layout
Break the center, replace the three-card row, and vary section rhythm so it does not repeat the same block.
- 4
Pass 4: finish the states and motion
Add hover, active, focus, loading, empty, and error states. Add one staggered, eased entrance and respect reduced motion.
- 5
Pass 5: check it on a phone
Confirm it holds at 360, 390, 768, 1024, 1440, and 1920px with no horizontal scroll, 20px minimum gutters, and grids that collapse to one column.
Frequently asked
- What is the fastest way to make a vibe-coded UI look less like AI?
- Remove the gradient and commit to one accent on a neutral base, then swap the default font for a characterful display face. Those two passes change the read more than anything else.
- Is AI slop only a visual problem?
- No. The missing states (loading, empty, error) and missing keyboard focus are slop too, and they are how a build gets caught in real use. The checklist covers both the look and the behavior.
- How do I know if my UI passes?
- Run it against the checklist area by area, then test it at six widths from 360 to 1920px. A design critique tool can compute contrast and detect banned patterns on the rendered page for you.
- Can I keep my current framework?
- Yes. None of these fixes depend on a framework. They are color, type, layout, state, and motion decisions that apply whether you ship Next.js, plain HTML, or anything else.
more guides