Tips for anyone who vibecodes.
As AI slop continues to inundate our everyday lives, I have come to the following conclusions —
- People can identify slop.
- People dislike slop.
- People don’t know how to de-slopify their slop.
Put another way, it is relatively easy to recognize bad design, but it is another thing entirely to fix it.
Of course, this dilemma predates AI. Every designer is used to receiving opinionated yet inactionable feedback from virtually every other discipline, and many of us spend far too much time translating platitudes like “we need this to have more wow-factor” into tangible design changes.
But even for seasoned designers, the uncanny-valley-esque aesthetic of slop can be a tricky one to break down and redesign. I think this is because AI leverages real components and patterns that do make sense in certain contexts, but when surfaced in irrational, formulaic combinations just feel off in a way that’s hard to articulate.
So today, I thought I would spend some time diving into exactly what the telltale signs of AI slop are, and how we as vibecoders can learn to de-slopify our designs.
But before I do that, let’s address one question —
Are all AI-generated artifacts “slop”?
I don’t think so. Pretty much all user interfaces are at least partially vibecoded these days, including my own designs. If anything, AI has led to some of the most exciting, expressive digital design of all time.
On the other hand, Slop is what happens when AI artifacts are generated without thought, effort or quality — often in high quantities. Slop strips out considered decisions, adds unnecessary fluff and ends up telling every story the exact same way.
This is fine as a foundation for real design iteration, but should not be considered (or as I have sadly seen, celebrated) as a thoughtfully designed final output.
Even taking one extra moment to “de-slopify” your AI artifacts forces you to actually reflect on the content you’re generating, and that’s the most important takeaway here.
So, let’s break it down.
Observe the two dashboards below. Can you tell which one is slop?
Now, can you express exactly why you think it’s sloppy? Not just a vague description like “it just looks janky” or “the UI isn’t modern”. Really try to identify the individual components that make it look like that.
Learning to really analyze AI-generated UI is the first step in de-slopifying it. Once you have made your own observations, take a look at the cheatsheet I put together below and really take some time to digest it. How many of these patterns can you spot in Dashboard A?
Now that we have looked at the anatomy of slop, let’s discuss how exactly you de-slopify a design.
I think there are a few different levels of “de-slopification” you can apply, depending on what you are designing. For the sake of this guide, I will illustrate each level with a Y2K-themed trivia deck that I made for my sister’s birthday.
Level 0: the one shot prompt.
Let’s start by taking a look at what AI-generates with a simple, single line prompt: Make a fun y2k slide deck for trivia night.
As you can see, the generated slide above has all the telltale signs of AI slop. This is to be expected when using a very basic prompt, no follow-ups and zero styles for the AI to reference.
But what if I just tell the AI not to be sloppy?
You might be wondering if you can just ask your agent to de-slopify its own work. But as you can see from the image below, that’s not super effective. You’ll need to be a lot more precise if you want to get a good result from AI.
Level 1: clean up the slop.
Once you learn how to recognize the individual components of slop, you can pretty easily guide the AI to fix each one. The result might not be the most beautiful design in the world, but it won’t feel like AI slop anymore.
This is a great option if your artifact looks pretty good already, and you just want a quick way to add a little human polish or personality.
Just removing all the unnecessary elements AI adds into every design can make a huge difference. Visual density is one of my pet peeves when it comes to slop and bad design in general (if you want to learn more about UI density, I highly recommend checking out Matthew Ström-Awn’s awesome Config talk on the subject).
Once you have removed all the fluff, get specific with your changes. In particular, when it comes to colors, fonts and graphics.
Often, choosing a nice color palette (I use Coolors.co), a unique font (I use Google Fonts since they’re free) and some open-source icons (I like Lucide icons for most UI mockups) is enough to make a vibecoded interface feel premium.
Uploading some photos (check out Unsplash) or graphics is another easy way to create an “analog” look and feel.
AI will default to the same styles without guidance, but if you point it in the right direction it can actually pull from a lot of cool resources.
Level 2: define the aesthetic.
One of the easiest ways to visually guide AI is to provide some reference material.
This is my go-to option for most of the one-off artifacts I create, whether it’s fun side projects like this or quick prototypes to share a design idea.
For this path, you can either paste in an image or verbally describe a specific style in your prompt for your AI to reference.
For something playful like this trivia deck, a retro video game look is a fun yet achievable aesthetic for AI. When I’m working on something more professional, I tend to ask for a sleek, AI-native feel instead. This, combined with the component tweaks from Level 1, can get you a pretty polished final result.
Quick Tip: As general rule, AI struggles with more organic, expressive aesthetics. The more “digital” and less “organic” a style feels, the easier it will be for a machine to recreate it.
A note on references and AI
I just want to clarify here that by “reference styles”, I don’t mean “steal from other designers”.
Of course, designers have always drawn inspiration from each other, and admittedly these models are already trained on existing work. But, directly feeding another human’s creative output into a machine for replication without their permission isn’t right— especially if you are going to be publishing or shipping said artifact.
There are plenty of open-source libraries like Unsplash to pull from for general guidance. And if you really want great, unique design, you can always just work with a real designer!
Level 3: design it for real.
The two levels above are great for de-slopifying smaller, standard artifacts. However if you want to vibecode something more substantial like a full website, you need to go one level deeper.
You have to design it from scratch.
What do I mean by designing from scratch? I mean finding inspiration on Dribbble and Mobbin, drawing out messy wireframes by hand, opening up Figma and handcrafting a design frame-by-frame. And finally, using that design as a reference for your AI to build.
If you’re looking for some inspo, checkout how Interfere just rebuilt their website, starting from Figma explorations all the way through to code.
If you’re a designer, this probably sounds like a relief. “Real Design” is still alive and well! If you’re not a designer, then you have two options: hire one, or learn how to become one yourself. There are many incredible resources out there to get you started, and if vibecoding is something you are starting to do a lot, I highly recommend diving into design more seriously too. Trust me, it’s a lot of fun!
In conclusion
It’s worth noting that the levels above are really intended for de-slopifying one-off designs: your vibecoded dashboards, your LinkedIn post visuals, your hyperpersonalized software, your little sister’s birthday trivia games — you get the picture.
However, if you’re looking to de-slopify an entire product or brand, then that’s a whole other level — one that dives into agentic workflows and design systems and design skills — and could honestly fill up a whole other article.
If you would like to learn more about that process, let me know in the comments and I’ll do a deep dive into setting up a solid AI Design Foundation at some point.
In the meantime, I hope you found these tips and tricks helpful! Go forth and de-slopify the world.
Merriam-Webster — “Slop” definition
https://www.merriam-webster.com/dictionary/slop
Matthew Ström-Awn — Config talk on UI density
https://www.youtube.com/watch?v=notTKhz8C2c
Coolors — Trending color palettes
https://coolors.co/palettes/trending
Interfere — How We Built Interfere’s New Website
https://interfere.com/blog/how-we-built-interferes-new-website
Figma — Getting Started in Design
https://www.figma.com/resource-library/getting-started-in-design/
Julie Zhuo — “I Never Want to Use Third-Party Software”
https://lg.substack.com/p/i-never-want-to-use-third-party-software
How to de-slopify your designs was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
