Recently my university app was updated alongside “minor UI improvements”, and it was the most slop-coded person interface I have seen.
The old UI was clunky, but I would’ve preferred that complete the slop cannon their AI delegate produced.
Slop UI is the UI that AI cooks up that looks off, anywhere it’s not expected to be, doesn’t assist a intent or whenever a UI is too generic.
This is seen in vibe-coded UI without a vision. Vibe-coded UI can appearance awesome whenever done right, but most don’t. And it makes the apps appearance cheap and unappealing to use.
Cloudflare lately slop-coded a website.
And additionally websites akin this, you fair cognize it whenever you see it. It’s akin the AI videos these days:
anyhow. The following are the things that create up the slop.
Gradients. Gradients Everywhere.
The biggest and most noticeable sign is gradients. Gradients anywhere, gradients any time, gradients at all sole thing. You’ll see them on buttons, in the background, basically anyplace anywhere it could material it.
Slop Cannons LOVE purple for several reason
Rainbow Vomit.
AI loves using colours that average nothing and are fair distinct colours.
You fair get this, fair a display of a bunch of colours that don’t go fine together but are coloured that way. Because there is several difference in sectors whenever making the UI or whatever.
It doesn’t prosecute the 70-30-10 rule. It fair adds colours all complete the place.
Pulsing Badges
I have no clue why it adds these, but it fair does. It is in the training data, I guess. But it adds these pulsing badges on everything.
In the “”“upgrade”“” my university app had. They have this item called a digital ID, which fair shows, like, a QR code and your face. It has this pulsing sign which says it’s “active”.
The issue is. IT IS JUST NEVER INACTIVE. IF IT IS INACTIVE, THE APP JUST LOGS YOU OUT. It’s fair redundant information.
And my overview has an “active student” badge.
CAN SOMEONE TELL ME WHAT AN INACTIVE STUDENT LOOKS LIKE??
Also in the identical digital ID interface. It added a small “verified” sign next to my university logo.
WHY THO.
Because it’s not akin it’s doing several api call and going, “oh yeah, this guy is verified”.
And EVEN IF IT WAS, IT DOESN’T MEAN ANYTHING, like. If I were forging my digital ID, would I deliberately add “unverified”????
Finger Nail Cards.
I see these things in exactly all vibecoded ui and it pisses me off all time.
You see these everywhere, dude.
It’s not equal that it’s bad; it’s fair so overused by exactly all LLM in all sole location that it fair looks bad now.
The item is. I don’t think anyone has EVER consciously sat downward and thought, “you cognize what would enhance this? a fingernail”
Emoji Slop
AI LOVES emojis for any reason. It loves them additional than Sam Altman loves to feign that they are pacing the frontier.
Misaligned Stuff.
If you have SVGs or ASCII art or several benevolent of component that isn’t in a box, it is nearly continually off its alignment.
Like this catalog in the timetable of my university app.
Font Selection
These websites don’t normally go for additional engaging font selections. It’s normally Inter, or if you have a website equal remotely programming-related, you get JetBrains Mono.
and this thing:
It adds these // whenever item near to tech is mentioned.
Redundant Text Due To Chat Context.
It fair adds a bunch of redundant content fair since of the conversation context. For example. I was making my former blogging website, and I told it, “Okay, I don’t wanna be penning any HTML; I volition compose in my comfortable Neovim, and I don’t wanna do any web-related stuff.”
It added content saying “Built alongside Hugo. Written from Neovim”
No, since no one gives a crap anywhere I compose it from. AI does this item in readmes as well. It goes “Built alongside Modern CPP 20 features” BRO WHO CARES.
My university app has this on its startup screen.
The item alongside this is. YOU CAN PRACTICALLY SMELL THE PROMPT THAT TRIGGERED THIS FROM THIS ONE.
Like “one campus. one app.” Yup. Most certainly several administration guy said, “let’s unify our 3 apps; we have 3 apps for our 3 branches.”
Glassmorphism
It fair loves glassmorphism. It doesn’t go for any another scheme language(except brutalism, and for brutalism all of them appearance the EXACT same).
and this is the “brutalist aesthetic”:
Now I have to acknowledge I can let the brutalist slide. It looks kinda chill till it gets overused and afterward you commencement hating it.
Generic Taglines And Unnecessary Hype
It is obsessed alongside the words “Elevate”, “Seamless”, “Next-Generation”, “Supercharge”,
“Unleash”, and “Empower”.
Every H1 is followed by a greyish subtitle that says item like: “Experience the power of
task administration alongside our cutting-edge intuitive interface.”
It loves using “Welcome to your Dashboard, [Name] ✨” or “Revolutionise your workflow”. It
treats all display akin a landing leaf fairly than a functional tool.
Honestly, this was fair a bunch of things that annoy me whenever I appearance at slop. And it’s not equal that I am against vibecoding. This website is vibe coded; it looks adorable tho. It’s fair that these group don’t put ANY attempt into making it equal appearance gently good.
