From Vibe Coding in Design
De-slopping AI-Made Interfaces
How do I make AI screens look designed?
Intermediate / 5 min
After this reading, you can spot the generic look of AI-made interfaces, edit your way out of it and review the result beyond its looks.
Merriam-Webster chose slop as its word of 2025, defining it as low-quality digital content produced, usually in quantity, by artificial intelligence. Interfaces have their own version. You have probably seen it: a purple-to-blue gradient behind a centred headline, three rounded cards with an icon each, a button that says Get started, and a testimonial from someone who does not exist.
None of these elements is wrong on its own. What makes the result slop is that no one chose them. They are the model’s most likely answers to questions nobody asked, and readers have learned to recognise them—and to trust the work a little less when they do.
Why AI interfaces look alike
A model generates what is most probable given what it has learned. Anthropic describes this as distributional convergence: safe, common design choices dominate the material models learn from, so without direction they reappear in nearly everything—its own example is Inter, purple gradients on white and little motion. Slop is rarely a fault in the tool alone. More often it is the tool working as designed, in the absence of a designer. A clear brief improves the result without guaranteeing it, which is why generated work is always reviewed.
The tells, and what to do about each
| Tell | Why it reads as generic | The fix |
|---|---|---|
| Purple or blue gradients on white | The most common palette in generated work | Choose colour from the subject: one dominant colour, one accent, each with a reason |
| One typeface at similar sizes | No hierarchy, so nothing leads the eye | Choose type for the content, with clear contrast in size and weight |
| A centred hero and three feature cards | A landing-page template applied to everything | Structure the screen by what matters most to its user |
| Rounded cards, shadows and blur everywhere | Decoration that groups nothing | Use a card only where grouping means something |
| Emoji or stock icons beside every heading | Ornament in place of meaning | Use icons only where they help recognition, and consistently |
| Placeholder copy, invented numbers and testimonials | Dishonest, and obvious to a careful reader | Real content, or placeholders that are clearly marked |
| Vague labels such as Get started or Learn more | They say nothing about what happens next | Labels that name the action or the destination |
| Everything fades or slides in | Motion without a purpose | Animate only what explains a change, and respect reduced-motion settings |
| Only the ideal state exists | Empty, error and loading states were never designed | Design the first visit, the failure and the longest content |
Familiar is not the same as generic. Suppose a generated screen for booking a bus ticket puts From and To at the top, the date below and one wide Search button, the way most travel sites do. Rebuilding it to look distinctive would make people relearn a task they already know. Keep the pattern, and spend the design effort where this service differs: the stop names people actually use, the fare shown before searching, the message when a bus is full. A common pattern is slop only when it is there because nothing else was considered.
De-slop by deciding
Removing gradients one prompt at a time rarely works, because the model moves to the next most common choice. Anthropic’s frontend guidance notes exactly this: steered away from one popular typeface, models tend to converge on another. The lasting fix is to supply the decisions the defaults were filling in.
- Start from content. Write or gather the real text and data first, and let the layout follow its priorities.
- Set a small system—a type scale, a spacing scale and a few named colours—and ask the AI to use only those.
- Give two or three references, and say exactly what to take from each.
- Name the defaults to avoid, but always alongside a positive direction and its reason.
- Edit by hand. Adjust spacing, copy and alignment yourself; small manual changes are often faster than another prompt.
- Compare the result with the brief, not with other generated work.
Prompting Interfaces into Shape covers how to write that brief. The point here is that de-slopping is not a filter applied at the end. It is the design work that should have happened at the start.
Review beyond the looks
An interface can look designed and still fail the people who use it. Speed changes how work is made, not the standards it should meet, so generated work deserves the same review as any other. Three lenses cover most of what matters.
| Lens | Questions to ask | A standard to check against |
|---|---|---|
| Usability | Can people see what is happening, undo mistakes, recover from errors and find their way? | Jakob Nielsen’s ten usability heuristics |
| Accessibility | Is text contrast at least 4.5:1? Does everything work with a keyboard? Are images and controls labelled? | WCAG 2.2 |
| Honesty | Is every claim, number and quote real? Does the design pressure or mislead anyone? | Ethical Design, earlier in this library |
Generated code often fails these quietly: buttons that are not buttons to a screen reader, contrast that only works on a bright screen, error messages that blame the user. These are found by testing—with a keyboard, a screen reader and real people—not by looking.
A short de-slop review
- Cover the logo. Could this screen belong to any product? If so, ask whether a familiar pattern is serving the task, or no one decided anything.
- Read only the headings and labels. Do they tell you what the page is for and what to do next?
- Replace every placeholder, or mark it, and remove any number or quote you cannot stand behind.
- Check contrast, keyboard use and labels against WCAG 2.2.
- Open the empty, error and loading states, and the screen with the longest real content.
- Ask someone who has not seen it to complete one task, and watch without helping.
Slop is what remains when no one made the decisions. The cure is not a better tool but a designer who decides: what the work is for, what it says, how it behaves, how it looks, and whether it is good enough to put in front of people.
Takeaway