I’ve been trying to put my finger on what it is that is happening when the robot writes stuff like “3 campuses, one app” example, I’m glad the author was able to identify it as chat context leaking through.
The other version of it is the robot over-indexing on some part of the prompt and leaving comments places. An example is I ask it to prefer integration tests using TestContainers, it starts adding comments to every new test saying “Real services, no mocks” or something.
And yes, I have a line in my *.MD saying not to do that.
It's partly a "Don't think of a Pink Elephant" problem. I've worked on several projects where I had to keep telling prompt writers to stop writing negative examples because the more you include the more its "attention" to them is all it has. Like telling a toddler not to do something and being surprised that is now all they can think about and they want to keep doing it. These prompt writers kept getting surprised that I'd delete all their negative examples and harshly worded "Don't do X" and "Never Y" and "NO: Z" sections they spend so much time on and got better results with smaller more focused positive example only prompts.
Hah! I also thought about it this way and ended up added a "purple elephant rule" to my pi prompt to discourage the behaviour, since I figured LLMs lean on metaphors so much.
Of course, I quickly reverted this change as purple elephants started cropping up in comments and other prose :)
Early versions of stable diffusion supported negative prompts and they never leaked because it would just down weight that stuff.
I don't understand why negative prompts never made it into the LLM world. If "no foo" and "dont do bat" don't work then just give me a separate textbox where i can put all my negatives!
And btw, if you have slop comments in your PR, you'll get a review from an agent (my company pay for it). I won't bother to read if you didn't bother either.
Eh, I'd prefer a opus5.5 review with consequent approval over one by a human which I have to wait 5 days for.
Ymmv, I also hate it when people dont read their own PR first though. But I know I've previously identified comments as LLM written which the dev... On further discussion definitely wrote themselves. So you gotta keep the false positives in mind.
I think lots of AI tells these days are leaks from the ai/writer connection into text for the reader. It partly feels like the inevitable result of RLHF with the wrong human's feedback ("I did it! Pick me!") and partly feels like thinking tokens leaking into the main text.
"Here's the argument, in plain terms", "It's not just X, it's Y", "It's worth stating precisely", "The sharper distinction here"... They're things that gesture toward the relationship between the text and the prompt, making it clear where it matched the author's expectations and where it deviated.
Not that humans are immune from coding/writing for their boss instead of their user/reader!
I just used Opus 5.5 for something other than coding, and after about a dozen chat messages (some of which were genuinely amazing), it got LLM brainrot, and started suggesting dumb, irrelevant stuff, ignoring previously established facts, and talking in PR doublespeak.
The thing is, that kind of screen has existed long before vibe coding was a thing. Discord, for example, has had it for years. And the purpose is to reassure the use that the app is still doing something (since users have cottoned on that spinners are meaningless).
Some of the other examples there are equally error prone. The glass example, is something pioneered by Apple too. And was added to CSS before vibe coding. It’s also an effect I mirrored years ago in a UI I built in SDL.
The coloured box example struck me as good UX too. The stuff that needed more urgent attention had a more reddish tone. That makes complete sense. And having those fields a different colour makes it easier for users to pick out specific elements quickly (like how icons are used too).
The problem with AI slop is that it’s trained on good code as well as bad. This is like the arguments against the Oxford comma and em dash all over again.
At least some of these are just for lack of caring. I vibe coded this landing page recently https://tui2web.com/ and fought off a lot of the defaults the LLM came up with after a few hours of iteration. Feel free to roast it, I'm not really attached, but I thought it did a reasonably good job.
I find this style of "heavy dark borders/shadows" one of the ugliest recent trends on the web. It's rarely done well.
But otherwise the website looks pretty great. Vibe coded websites usually transmit the feeling of: "nobody even bothered to look at this", and that's not the case with yours at all.
In your lists where elements are separated by horizontal lines, I would remove the horizontal line after the last element. That's quite easy in CSS.
What's interesting to me, is how it selected this heavy dark shadows brutalist style, which is a sort of stylized skeuomorphism , and then it decided to add a background different from page bg, breaking whatever illusion there was.
You could be right, I haven't seen too many like this yet, but it did some out with this staggeringly fast. The style I've seen the most are the gradients + font changes mentioned in the article.
It's not too readable. It would benefit from a columnated layout. The fold is also too long. It should be an introductory block.
Overall, the "rhythm" is a bit off. The user should know what they're seeing even before they see it, at least conceptually. The design/layout doesn't section off dense sections from skim material. Front pages in general should be built for skimming rather than deep consumption (scanning). Scanning should appear optional visually.
There's a lot of "scan" material, but users who visit your site mostly just want to know what they're looking at - at least at first. So the deep material kinda just gets in the way of actual comprehension.
Another critique: too much visual uniformity. Every major section looks the same (poor "rhythm"). This leads the eyes to glaze over much of the site.
It sounds dumb, but our eyes don't "read" a webpage, we "see/feel" it instead. We see structure, layout, differences in colors, font sizes, patterns, bold headings, etc. We ignore the actual textual content. We only do actual reading when we're hunting for something specific (eg, a specific nav link).
The aesthetic itself is fine, but the layout and structure need work.
All caps text is a roadblock for reading speed/comprehension. Accessibility experts were finally convincing major company design standards to stop doing it when LLMs made it a default again [0] for headers and incidental text.
Not to mention that all caps text is also generally associated with shouting and just feels rude to some readers.
[0] Or more accurately trained on all the bad examples before experts started catching them and has stuck to the mistake.
This appears to be pretty close to the "brutalist" aesthetic mentioned in the article. Things like drop shadows on boxes are the opposite of the "fingernail" boxes and you very rarely saw them pre-AI. However I think your site looks fine and well crafted, nice work. (the article also said that this kind of design language is less grating)
Yeah brutalist is exactly right, that is basically what I prompted for. I didn't realize a bunch of other people were doing this. Actually the only inspiration I had for this was watching the movie (Brutalist) a few years back.
Even before AI, brutalist style is not that popular compared to flat, glassmorphism, skeuomorphism etc. Two popular website that use brutalist that I remember is Gumroad and Figma.
It looks nice. I wouldn’t roast it as much as admit that I can tell from some of the content phrasing that an LLM was used. The h1 feels cliche, for example. That comma doesn’t really need to be there.
This has the most obvious AI slop tell of all, in my opinion… SO MUCH TEXT. Just sections and sections of header + subheader + bullet list composed of header + subheader + paragraphs.
I’m reading max 2 sentences on any landing page. Most people probably less. Having to scroll and scroll through walls of text is a clear sign of AI.
Not bad but the section numbering gives it away now. Also something cloudflare has. I don’t know if I’d call that slop though. It’s really just the stuff people don’t care about and let whatever the llm comes up with ship.
I actually had momentary startle reflex when I opened that page. I don't know web design at all well but I know "design elements are [edited] supposed to be invisible". My first impression is this is the opposite of that.
I don't know who told you that but that's a terrible take. Design can have personality. Design can convey emotions. Design can give you emotions and reactions by itself.
Not everything needs to be bland like a user manual
I edited above. I didn't recall the statement correct - design elements are supposed invisible even design itself is noticeable as a feeling or personality or aesthetic. But I think in this case, what hits users is the elements - the huge text, reverse text and black box.
I don't know what that's really trying to say, but it sounds wrong. That's how we end up with contextual interfaces that randomly shift around on a whim. Disappearing elements because some mysterious criteria has not been met. Atrocious for user discovery because the designer hid everything they thought the user didn't need.
Earlier this year I used Claude to design a screen for an Unreal game I work on. At first I thought wow, what a great layout, this is a game changer and gives me a huge advantage.
Less than a year later I am embarrassed how Claude it looks - blinking dot in the corner, double // separating header text, the font choices... now I see the same patterns everywhere, and I'm sure the audience is picking up on it too.
I still use Claude in my work, but a lot more sparingly; I ask for color scheme and font suggestions (no Rajdhani or Share Tech Mono!), but they're mostly for inspiration and I'm not blindly copying them. It feels like I'm being smarter about it, but maybe in a year I'll realize I still haven't climbed out of the trap :)
Love this blog mentioning the issue of implementation detail in prose. Likely my biggest irk of vibe coded apps.
Much of this is it's a simple problem to solve - just prompt agent of choice "Put all user visible text into a translation file for i10n" and then go through and edit said prose as a human.
This is similar to the rapid early adoption of the Bootstrap CSS framework. A lot of people were annoyed by the sudden spike of websites that looked and felt the same, but I think this was a tremendous step forward in usability and accessibility, and well worth the initial wave of cookie cutter websites.
The difference here is that the slop paradigm is not a set of intentionally designed UX choices that work well for users, it's a set of accidental commonplace LLM tendencies, not designed for humans, replicated ad infinitum that are making user experiences worse in 99% of cases. The use of white space is horrendous, the font choices are illegible, the color palettes lack sufficient contrast.
Yeah it's problem of sensibility. Like people do not realize that developing a sensibility and good taste here is an actual still that takes time, and is highly undervalued in tech circles with the exception of a handle of truly design driven companies.
Exactly. The benefit to the Bootstrap boom was it elevated a lot of cookie cutter designs like a raft on a series of sensible defaults that were are close to sensible/good taste as some very talented designers could make industrial cookie cutter standards. Bootstrap enshrined smart, intelligent defaults like good color contrast and a baseline of accessibility for developers just copy and pasting and modifying what Bootstrap gave them. For a brief moment the "I just need to get this done" web had a good accessible baseline.
LLMs aren't starting from sensible defaults and don't have to meet WCAG scores unless you tell them to (and even then might hallucinate checks they didn't actually make).
This is why I spent a lot of time building a design system first, that I can then re-use in my projects. My system is built out of properly CSS tokenized and organized Vue components, and the agent has instructions that it cannot create HTML that isn't made of components - and that if it needs a different UX (which I will have designed with it), then it needs to be built as a component.
What's nice is that you can then write linters for rando CSS and component violations most of the time.
Even then, you sometimes still have to beat it down when it goes rogue - but it does tend to bring my daily frustration down a bit. (Along with a process during design to preview these layouts before they get to a coding agent.)
And once you have a design system that suits your needs, its easy to add in as skills/scripts to any new project. I keep a github repo with all of these bits and bobs, with an agents.md that teaches the agent how to use the repo.
But in short: if the LLM keeps screwing it up, build tools and define it once - stop trying to prompt your way out of it every time.
The most important thing I learned when graduating from "bad musician" to "passable musician" (passable enough to have listeners and fans, at least) was that there's no one single big trick that turns a song from bad to good: there's 100 tiny small tricks that add up. And you need to have experience to know what they are. A trained listener might be able to say "the midrange is too compressed", "there's too much high end", "the drum transients are't punching through", but a normal, casual listener is just going to say, "I dunno, it just doesn't sound right."
This UI slop is the same deal. A slightly misaligned dot off the timeline, color choices which don't really make sense given the website as a whole, using LLMism text. Nothing in here is an obviously major problem on its own. But when you add up 50 of these on a website, users get hit with that "this is slop" feeling.
The details matter. In isolation they seem irrelevant, but as a whole it's what elevates something from the AI slop garbage pile to something actually good.
i personally don’t have an issue with the UI most LLMs generate, but in my opinion it’s ALWAYS a starting point to refine, resolve, and remove what shouldn’t be there.
there are no shortcuts to good UI (or anything else). u gotta put in the reps and have an open mind (not an empty head).
An "inactive" student is one who is enrolled but is not currently attending classes.
This is a super useful article but a lot of these complaints about things like alignments are also the natural outcome of me, a non-frontend person, building any kind of web frontend at all. So I wouldn't sweat it too much.
Added “bonus” points if it’s overused small caps. Related (not all need be in caps): header, “eyebrow”, h1, description, footer all saying the same thing.
People don't realize that you're allowed to tell LLMs/agents "no." In the real world, it's a professional faux pas to question the design of a creative coworker when you may not know design better, but LLMs/agents are not your coworkers.
Don't like abuse of serif fonts? "NEVER use serif fonts."
Don't like the gaudy color palettes? "Use this color palette with a white-dominant background"
Don't like the marketing fluff? "Remove all non-salient text from this app."
And there are a lot of designers who are good, but only in a different medium. Being able to make a good flyer, a good trade fair booth and a good website are completely different skills, but all too often the same designer is expected to do all of those, and more
I admit that those type of politics depend on workplace culture and I worked at two highly creative-oriented companies previously, and in both companies any attempt to point out issues in the design resulted in a "this is according to design spec; not fixing."
I just can't fathom how a multi-billion dollar company like Cloudflare could forego their design standards. They seem to have updated their landing page [0], but it's still very sloppy.
tbh, they don't really need the website, it could just be a simple pure text website with a simple tagline explaining what they do, a sign in and sign up button, that's it.
They can probably get away with it at this point. Cloudflare already has the name and reputation, so I doubt a sloppy landing page costs them much business.
My sister's boss fired her (small education) company's web designer.
When you do things like that, you can't escape the slope even when you realize your mistake. (Since it's an education company, people notice illiterate garbage).
Cloudflare is a complete disaster these days, its quite an embarrassing fall from grace. I feel for the few engineers that still remotely care about their craft that work there.
I'm actually loving it more and more, but the disconnect in docs is disconcerting. Try connecting a jurisdiction-bound bucket to their AI Search and can't read from it - and their docs suggest in some places it should be fine and in others it is not. Go to submit a bug report and it's extremely high cost load to get information, even a basic writeup, shared, requiring github account / public repo and more.
Really? I'm more surprised when I see a large company still have design standards. It seems it's all the rage to fire all your UX people and have your devs wipe up a UI because "UI is so easy."
Follow design standards? Fuck no, we need to STAND OUT instead. If you find the design hard to use as a result of not following standards your just an old curmuddgen.
I've seen a couple companies already change their design standards to "best in class Tailwind designs from Claude, use this prompt file/Agent file/skill file combo for all UX work".
Looking at automated emails I get from Microsoft and GitHub it certainly feels like they are one weird layoff from doing it company-wide.
The worst part is these glassification Tailwind heavy slop almost universally fail WCAG guidelines (and personally, seem hard to read to me because of taking the whispy sans serif thing to its foregone conclusion by almost exclusively using what to me are unreadably thin weights of the already too thin Inter font). The slop is going so quickly backwards for companies that invested in accessibility and these companies need to be taken to task for forgetting design isn't just aesthetics but readability and accessibility.
I feel you, especially on the WCAG stuff. It's so damn basic and yet, they refuse to do it. The regressions on usability and consistency across the design space is just so maddening.
And honestly, I'm not even that mad at AI. The way these companies are going I'll take an AI that is taught to follow the most basic design guidelines over what most companies shovel out these days.
Like fine, you want to stand out? Use different colour schemes or unique fonts (but like one or at most two fonts). Change your corner radius from time to time to freshen up. There are so many ways to make your UI "different" but still consistent and following basic best practices.
Some of the stuff throw out now a days would fail UI 101 assignments.
Negative response to low-effort AI-involved work is not what “AI doomerism” means.
A college student who is also very clearly (fron the links beyond the blog) a very active and enthusiastic AI user that thinks common (if correctly identified as less than ideal) UI trends from before vibecoding was common are indicators of “AI slop” and not just design being the done by people who aren’t very good at it (which, to be fair, includes but is not limited to AI slop) is unsurprising and nothing like doomerism.
You can disagree with the factual interpretations ans subjective interpretation in the piece without trying to tie it into a completely unrelated social phenomenon.
The site is utter shit. Total amateur hour. Terrible contrast, barely anything guiding the eyes, the padding to the sides is inconsistent. So is the entire design language from leading with some numbering that never goes beyond 01, round buttons, round input elements, interrupted by somewhat decorated layered elements which then leads to some kind of terminal window that doesn't resemble any terminal UI I've ever seen or used. It's all filled by various sloppy mentions of keywords that barely form some coherent narrative.
This page looks like some junior cobbled it together based on a hastily written ticket by some overworked product guy.
LLMs will always have a bias towards a specific style unless the model provider is injecting the entropy themselves and due to how human taste works that style will quickly become out of favor because it will be associated with lazy work.
They can be solved now with a follow-up prompt to remove the bad things, or preemptive rules to not do the bad things in the first place. That's different from "AI can't do hands" which was an intrinsic issue with the model and its robustness (there were tricks to mitigate it such as negative prompting, but far less comparatively successful than the web design analogy).
This is a separate thing. It's not about imperfections: most of these websites work just fine. It's that everyone gets the same LLM, and if you just ask "hey LLM, make me a website", you get a very similar product. Eventually, people learn to recognize and hate that aesthetic because it's overused.
The exact same thing happens with LLM writing. There's nothing wrong with "it's not X, it's Y", but I not do my best to avoid that phrasing because it's tainted by AI slop. I did use it in this reply and part of me is bracing for the accusation...
You can overcome that by exercising more control, but most people don't know they can, and if you start micromanaging an agent, it slows you down and negates much of the speed advantage.
I'm not arguing that it's good. But the average person doesn't write well either. Similarly, the average web app doesn't have good accessibility, probably doesn't render right on some phones, etc. We're not comparing to some Platonic ideal. AI content stands out mostly because of sameness.
The alignment thing is just plain bad but a lot of these are like the em dash issue. It's simply overused.
It's super easy to generate content with AI and everybody's doing it but most content frankly doesn't really deserve to be generated or at the very least shown to the masses. There's nothing wrong with em-dashes but when people associate it with spam it directly devalues them.
Same thing with the badges, emojis, gradients etc. Your brain will simply start associating these tells as an indicator of cheapness just because the large majority of websites using it are just someone's side project that you probably shouldn't waste too much time engaging with.
All modern multimodal models can do vision sufficiently well for web design, with the exception of respecting negative space and seeing poor padding/margins on text. The issue is that prompts are often egregiously underspecified so the design -> vision loop doesn't know how to refine.
There shouldn't need to be any prompting to result in correct alignment - like icons being centred. Under-specified prompts can justify the stylistic complaints where all the AI sites favour the same few designs, but not the simply erroneous positioning of things.
I couldn't swear the issue is the vision and not a failure to choose to correct the issues after seeing them - but from interacting with them in other areas I suspect the former not the latter.
Part of it is also lack of care, taste or vision from the slop-pilot. Sure the clanker designed and built the UI, but someone looked at it and went "Hell yeah! Ship it!".
Developing good UI/UX is hard, like really hard. Very few people are good at it and if you're not good at it, what makes you think you're able to recognize a good UI when you see it? So much thought and and foresight goes into a good UI that it requires a serious amount of prompting. When I've worked with actual UX/UI designers, my job has been that of the LLM. The designer spends ages on planning and understanding, then prompts the developer to create the actual UI and iterated endlessly.
Industry most hasn't cared about UI/UX since the 1990s and even if it started to cared now, employment is fairly safe, because it was always mostly research, labs and prompting. It's just that now we can iterate faster because prompting the LLM is faster than prompting your five .Net developers hidden away on the second floor, in the office behind customer service.
As someone who didn't like the UI trends pre-LLM either, I simply shrug. Trading one crap for another.
Sure, a good designer could whip up a great UI. 95% of sites[1] didn't have a great (or even good) designer. I'm not sure the AI UIs are worse than the median that was out there.
They do have answers in Firefox. Maybe your setup is bugging out. I clicked through them, and all of them had answers.
Is Muse free?
Muse is available for free with a usage limit. If you reach your free limit and want more, you can upgrade to a paid subscription, or wait until your free usage limit refreshes.
That might just be from developers getting a Figma of a FAQ section without final copy, then Meta not doing adequate QA and shipping empty FAQ sections.
IMO a single "Main Thing // Detail" is fun and fine and is where the trope came from. I see a ton of "Home // Our Work // Donate // About Us" which has beome cringy.
This doesn’t strike me as substantially different from the homogenization of the web that happened ~2013, with the rise of the Bootstrap CSS framework.
My opinion is pretty much the same, too: it’s better than what came before it, and I appreciate having a consistent design language across disparate sites even if I don’t don’t find it to be beautiful.
More guidance is needed on how to efficiently prompt an LLM to generate a correct UI. Describing the appearance, placement and behavior of UI elements for this is quite time-consuming. The contrast with server-side code generation is stark.
UI design (not implementation) is an area where “describe it with a programming language” has historically not worked. So much of what makes a UI good or bad is determined reactively after seeing the initial prototype. Those refinements are rarely based on an encoded set of principles that found their way into a training set, and the code used to implement such refinements was varied enough that models and humans both struggle to infer its intentions after the fact.
This started as soon as they devised the MCP. “we have this new thing called ai you can talk to it naturally. Here’s a protocol to make it work better”
A bunch of these patterns are things that real human designers have been using for a while (with the exception of emojis everywhere). This is like how some people assume an em dash automatically means AI generated text.
It doesn't mention the most annoying tell- content that fades in as you scroll down a page. I'm seeing this everywhere recently and it's so distracting
I'm vibe-coding an app to practice german, I want the most bare-bones possible, just something for myself. In the sign-in page, the clanker added SEVEN slogans and catch-phrases:
- A more human way to learn
- Find your words. Then make them yours.
- Good conversations make a language stick. Start where you are, and build from there.
- One conversation at a time
- Thoughtful practice. Your pace. Your progress.
- YOUR LANGUAGE SPACE
- A quiet space to learn, made just for you.
- Sign in to pick up where you left off.
loool, i had a clanker slop out a page just for me to preview UI components and it did this thing too. "React, without the nonsense", "your UI, simple, uncluttered", etc. like bro just put the components on the page. i tell it "no catchphrases and no extra copy" and it adds "just your UI, no copy" like come onnnn
Just like we lost em-dash and bullet point lists, we're going to lose cards, pills, and small caps subheadings.
It sucks that LLMs took things that were good when used in human-authored content, and ruined it by vomiting back overused cargo-culted versions of it.
I think soon, we will be adding “Skip Claude” in the same vein as “Skip Intro” to this list.
However, this is personal, but I stopped caring as long as the content is good, the animations can do justice in explanation and I get to learn or get what I want from them.
My bugbears are narration - where the page tells me how to use it, or is labelling things in a way that a human would not use. "Choose a ..." where ... would be better as a heading.
The vast majority of LLM slop seems to be Tailwind to me, so sort of the opposite of a library, just a bunch of common patterns in Tailwind so common as to be everywhere but not common enough anyone bothered to put them into a reusable library.
AI is just another tool and I have actually found it really fun to dive into design as a non-designer. It still takes a lot of time and effort but I can now create designs that I'm quite happy with that I'd have never been able to do before.
Wrote a bit about my process in a blog post [1]. Obviously my designs are far from perfect but I'm really happy with my company's website.
The rollercoaster on your landing page could use some better logic for when to restart. Or not do it at all. I kept restarting it automatically by moving a little bit.
On the copywriting side, I added an instruction to always write the copy in a Markdown file and let me edit it before actually coding the UI. Miles better to edit 2-3 sentences at a time than look at an UI full of slop, dumbfounded on how to proceed.
But on the styling, there's just no good solution. I use things like https://katagami.ai to find inspiration and nudge it into a style direction but I still have to hand edit paddings and buttons and visual separation.
For example copying the Sumi prompt [0] and applying it onto my keyboard app landing page [1] ended up with something visually pleasant and informative. I would have spent way too many days doing animations and deciding on the theme.
But I still wish I could take an LLM and train it on my already human made websites and copy and get something that can follow a design language and writing style.
I think that these things I've seen that are tells of a slop UI are when people without discernment (not as an insult!) don't do a pass over a UI. I'm working on a dumb little app to help me sequence photos for a book[0], and I'm building it with Claude (Opus 5.5, medium effort). The first pass was really sloppy, but I was surprised at how far I could get with some directed iterating.
This isn't a new problem; every generation of websites has tells of the lowest-barrier-of-entry tools of the trade. You could tell a Twitter Bootstrap UI from a mile away similarly.
The only difference I think is that AI will go ahead and add stuff that you didn't think of, like little badges and gradients and whatever. I think it's a different skill to say "no, this is distracting and unnecessary." The app I mentioned above has a few of these — extra stats about page counts and image counts and such.
Ever tested it on mobile? There’s some cut off text in the top right nav, the “start by adding photos” text isn’t vertically centered in its container, and the page size/settings container is also cutting off content on the sides.
The other difference was that Bootstrap met WCAG standards and had a very strong baseline of accessibility. These LLM slop outputs meet no such standards and seem to laugh in the face of accessibility.
Yeah, that's very true. I've gotten a lot of mileage out of Claude's `design` skill, which does an accessibility pass that I've found pretty decent as someone with only minor experience in the area — contrast, tab/focus ordering, things of that nature. The catch is that you have to actually have to want to check these things, just like you have to want to not ship slop.
It's a symptom of the long standing ghettoization of design and front end engineering. FE has always been cast as frivolous and unserious by conceited developers.
That's how you get slop that feels uncanny. There's no one in the room with the taste to call it out and no one in the room who cares enough to put in the time to fix it.
In Art and UI/ UX of Apps I think AI slop will be a constantly moving target. Whenever you consume too much of a certain art style or music it starts grating you personally, your mind needs a certain amount of variety. With AI overproducing (the already mass produced) arts and apps, your brain will pick up on whatever common yells exist for whichever AI generation we’re at and will begin to hate it. Like the only solution would be for GPT-8 to give random completely different art style outputs for the same prompt to different users or else our brain will immediately start not liking the commonality of GPT-8 aesthetic decisions and begun to hate it.
Every time someone puts precise language to what makes ai slop sloppy it feels like frontier labs get an ever clearer RL target. Not to say people shouldn’t publish these types of posts. I enjoy reading them and I hope they continue to be published.
A lot of these are examples of bad prompting (i.e. "build me a website for x y z"). Gradients can be prompted out, same as emoji slop. One line in the prompt / agents.md and you never see those. Color "rainbow" should be avoided by specifying a color palette. In case you don't have one, ask it for one "from literature / best practices" first. LLMs know the theory, but you have to have it in the context for it to be applied.
Misaligned stuff is the prompter's fault. Those should be caught by the human. they're the types of tasks that are fast/cheap to verify.
It’s the next evolution of applications where nobody actually cares about the users, as long as some checkbox can be ticked to mark it done and get paid.
The implementer is not paid by the end-user and they have no reason to care about the user’s opinion - the only thing that matters is to minimise cost and maximise profit.
The client doesn’t care as long as it’s cheap and technically works. The career prospects of the “project lead” on the client side are likely not affected in any way if the result is poor, so they won’t care much either.
There need to be consequences for negative feedback, which would make people strive for a better result. Otherwise people just don’t care.
Can we get some examples of what a good UI looks like then? I would like to see a UI design expert take a couple of these slop designs and show what each should look like according to their taste.
Really not a fan. Like, fairly significantly bad. Text sizing is poorly chosen, the only affordance for navigation or understanding what content is contained within what sections is at the bottom, sections are concentrated together in an overwhelming way (god help me if I’m a frequent visitor primarily interested in “external writings and presentations”), headings and font sizing is variously too close together and too far apart, code blocks are always in a huge font compared to prose, and code blocks blow out the horizontal scroll, meaning that vertical scrolling on mobile is a massive pain in the ass.
There are good examples out there for minimal, straightforward blog design. This ain’t it.
Even better would be some UI expert come up with an application interface for 10 common use cases. Then, give that to a group of designers, say it’s AI generated, and ask them to point out AI tells.
I’ve seen several of these “slop design” critiques lately. They don’t seem to be coming from people with strong design skills. (Presumably qualified designers have better things to do than critique AI designs. Also they probably know how to get what they want out of the AI instead of accepting what it creates.)
And that’s ok, I am at the point where I would rather to see typos or grammar errors too than a very well written text, as I know a human put the efforts to write it
That is not how the real world works outside of anti-AI communities. Typos/grammar are seen as unprofessional and are more likely to cause negative sentiment/backlash than overused design.
While not playing WoW Forever myself, I like reading the news and subreddit about it. In the last days, every day a new "self-made" UI mod gets showcased transforming the UI into AI slop.
Disregarding any design standards and letting the AI role with it. People that mention it, in the comments, get blasted by accusations of gate-keeping.
I see this so often. Nobody is gate-keeping anyone, you can just learn the skill, read about UI design and art.
Why is it so hard for people to just put in the time?
> Why is it so hard for people to just put in the time?
All my life the older generations has been accusing my cohort of being the "instant gratification generation" and I hate how right they have turned out to be.
I'm really pissed off that my favorite web design style Brutalism is now an AI slop smell. They already took my em-dash! *shakes fist*.
Now that I think about it, Brutalist web design always reminds me of 80s and 90s video games. I wonder if the increased adoption of Brutalist webdesign has something to do with "nostalgia porn" instead of LLMs.
Stuff I'm missing in the list: "Claude beige" and "Claude anthracite grey".
I have an inkling that this will become cyclical, like fashion.
Just wait a couple of years and any currently overused LLM style might become more unique again.
I'm not particularly keen on the font selection observation. Boring is ideal for the vast majority of interfaces. Far worse is the vulgar font selections guided by design skill documents which disallow common font selections.
Something missing from the list of tells is overuse (or even any use at all) of the middle dot (·).
The most stupid thing about Slop AI is Heading + Description. Whenever I generate something with these things, they add a useless obvious header and a paragraph of crap beneath. I tell them I'm generating an specific tool for me and me only; and it explains what it is, I tell them I don't want them and they include these things anyway...
I have seen folks here complaining about design trends long before AI slop. Maybe those folks who work in tech long for originality but the reality is designers in all aspects of life follow trends and originality is rare.
The reality is that users enjoy familiarity and find familiar interfaces and design trends comfortable and easier to use.
Some of these are a bit outdated for newer models.
I find the most consistent tells are often just excessive descriptive text and a lack of visual hierarchy. It makes sense given these are language models.
Also, I find models are really quite good once given some design context to work from. Slop UI is lazy at this point, not a reflection of model quality.
I added a rule on my agents.md for the design part, I never like any UI element that styling have a bg and slightly dark version of same color used by the bg because it's really made me mad and seems get being used by Agent
This coincidently the first picture in this article by cloudflare
I have to disagree on the fingernail card accents (though I've just learned the name via this article). Slop or not, they're useful for subtly indicating state, type of attention required, etc. without cluttering a UI.
this slop UI thing is just peak LLMs learned it by watching us, but surely the solution to slop UI cannot be this site. The adventurous unifrakturCook cursive font they chose for headings is making me throw up a bit in my mouth. It's like getting sex tips from someone who is both a virgin and suffering from Tertiary Stage syphilis at the same time!
And despite it putting me in the slop side of things I have to say that Inter is, for me at any rate, a reasonable font, especially for online usage. Maybe that's why the slop uses it.
As someone who programmed a campus identity managment service from scratch, both front-/backend without a trace of LLMs, as it was a while ago:
Yes there is such a thing as an inactive student and it is quite imortant for such a system to differenciate the two. However it is not really important to display it to the user, since that isn't really info someone inactive would see anyways.
And this is part of the problem: LLMs have this tendency to spill the beans (=implementation details) into frontend code. Aa someone who had both hats of the frontend and the backend guy, I still think LLMs aren't producing optimal results here.
Ideally you backend code is elegant, extensible and exactly what is needed to get the job done efficiently and reliably. The frontend however needs to be 100% thought from the perspective of the user (and sometimes from the perspective of a malicious attacker). LLMs still get mixed up with that split.
We are entering a phase where ai creates clean, informative interfaces, so humans trying to differentiate make theirs “interesting” (unreadable), as in this case: “Mhat Js Glop”
I find some models don't use icons enough. They will have links and buttons with text only labels when an icon and tooltip will do. I'm talking for links like "Files" with already well known associations with icons.
Ironically, your portfolio website gave me some 'slop vibes'. Not saying in any way that it was made with AI, maybe seeing monospace fonts where none are necessary triggers me now.
Author unapologetically uses AI. They just want people to put effort into it beyond posting the first result of a generic prompt.
After all the post ends with "This website is vibe coded; it looks cute tho. It’s just that these people don’t put ANY effort into making it even look mildly good"
I've known people advocating for proportional fonts for source code for a long time (many of them also in the literate programming camp). It would be funny if LLM slop was the final aesthetic push over the last few hurdles there to making it more common.
But this looks really good. Great contrast, simple and quiet, background image does not take up the whole page, the only thing really wrong is the animations. It's proof that slop can be turned into gems by someone with an eye for it.
But it does actually decrease usability? Useless badges with non-sensical labels or colors without meaning are just confusing. Or the other example from the website: Aligning content is not just to please a designer's eye, it helps users understand which parts of the UI belong together.
I mentioned apart from misalignment and slop text (inc those useless labels), why would a website visitor who doesn't work in tech and who doesn't follow the latest AI developments care whether something uses a gradient or not?
They come to your website with a goal in mind. As long as you make it easy for them to achieve that, it doesn't really matter whether you have elements on your site that are frequently generated by AI.
What's more important is use AI to make your website more accessible.
lol, the vast majority of the public does not care that it is "slop ai" or your carefully crafted UI is "hand-crafted". those days are long gone and were already dying when bootstrap was a thing (curious to know if people even remember it now). people who are quick to demonize slop ai ui are missing the point. do u think shadcn is any better? for 99% of us it's long as people can navigate your UI and your copy isn't a big ball of shit.
I agree. I know these things makes designers anyone who values UX, aesthetic, craftsmanship eyes bleed. But for a lot of websites that are utilitarian in nature much of the AI generated design is simply good enough. We’ve had plenty of human web design fouls since the beginning. For pages that are a means to an end I think it’s a great because energy can be directed towards the product itself. In a word where agents summarize sites and return the content design matters even less outside the actual product experience. Much of that will become per experience UI which will relinquish designer control further. One thing that’s helped me is telling an LLM to focus on information architecture then it stops overloading the view with page chrome and noise presenting instead the information for the use case at hand.
yup; I AI slopped new design of some some site/portal I still maintain and got nothing but positive feedback - old version used "handcrafted" bootstrap 2 code so maybe the bar was just very low :p
I think engineers have very different bar for slop than most of the people - which could explain obnoxious amount of ai generated menus/banners in the actual physical space nowadays
> the vast majority of the public does not care that it is "slop ai
The people (that count, i.e. that has disposable income) has started to notice when it comes to AI images, I'm pretty sure the same will start happening when it comes to web design. It just reeks of cheapness, of not caring, i.e. of slop.
Problem: This Cloudflare Quick Tunnel thing appears to be exactly what I need right now, so thanks for letting me know about it. Now, do I care how the website for this very useful product looks like? Not one bit.
The problem, really, is assuming that the alternative to a slop website is a non-slop website. But the alternative is often no website at all.
Having said that,
> And my profile has an “active student” badge.
Ahh, and the icon is vertically misaligned with the text... what is it with AI and zero ability to keep things aligned and consistent?
So spot on. These slop UIs are popping up everywhere and are an absolute plague. People keep building these experiences that are practically unusable from a UI/UX perspective.
> It’s not even that it’s bad; it’s just so overused by literally every LLM in every single place that it just looks bad now.
> It looks kinda cool till it gets overused and then you start hating it.
> This website is vibe coded; it looks cute tho.
This sounds like more of a no true scotsman/elitist argument rather than an indictment of AI use in UI. The author doesn't seem to have a problem with AI UI, other than whatever they decided doesn't vibe with their somewhat contrarian taste.
There are styles which are timelessly bad and then there are styles which are only "bad" because they are overused. That's not the fault of the style, it was good style, that's why it became overused. The problem is us. We have a natural aversion to repetitive things, and I wouldn't call that contrarianism.
I don't know, I recall in music repetition actually being enjoyed by the listeners (although not always so much the craftsmen and critics). Same seems to go for verbal communication, while some claim that great authors wouldn't repeat themselves, poetry is also generally rated prettier/better/more enjoyable wording despite often incorporating repetition. Why would visual design/style be any different in regards to human preference for symmetry and repetition/recognizability (even though the ones who create it tire of doing samey stuff all day, every day)?
1. We're not talking about the same kinds of repetition. Repetition as a tool within a single artwork is not the same thing as widespread imitation across artworks.
2. Audial preferences are not the same thing as visual preferences, they're different parts of the brain.
Can we please stop with the "AI = Slop" rhetoric? I'm fairly bearish about AI, and even I'm getting annoyed by it.
"Slop" just means something is low-quality and of poor craftsmanship, irrespective of who or what made it. If it's slop, you don't need to look for tells, you can just tell it's slop. Sure, AI is prone to specific types of mistakes, and humans are prone to other types of mistakes, and you can often tell whether a specific poorly-crafted UI is man-made or machine-made, but bad is bad is bad.
This blog post uses Slop correctly. In this case the specific slop type that results when you give AI a very generic prompt with no direction and then don't iterate over the result
The closing words of the post are "And it’s not even that I am against vibecoding. This website is vibe coded; it looks cute tho. It’s just that these people don’t put ANY effort into making it even look mildly good."
> Slop UI is the UI that AI cooks up that looks off, where it’s not supposed to be, doesn’t serve a purpose or when a UI is too generic.
> This is seen in vibe-coded UI without a vision. Vibe-coded UI can look great when done right, but most don’t. And it makes the apps look cheap and unappealing to use.
I’ve been trying to put my finger on what it is that is happening when the robot writes stuff like “3 campuses, one app” example, I’m glad the author was able to identify it as chat context leaking through.
The other version of it is the robot over-indexing on some part of the prompt and leaving comments places. An example is I ask it to prefer integration tests using TestContainers, it starts adding comments to every new test saying “Real services, no mocks” or something.
And yes, I have a line in my *.MD saying not to do that.
LLMs love https://tvtropes.org/pmwiki/pmwiki.php/Main/SuspiciouslySpec... . You tell them not to do a thing, they make a point of saying they didn't do the thing.
It's partly a "Don't think of a Pink Elephant" problem. I've worked on several projects where I had to keep telling prompt writers to stop writing negative examples because the more you include the more its "attention" to them is all it has. Like telling a toddler not to do something and being surprised that is now all they can think about and they want to keep doing it. These prompt writers kept getting surprised that I'd delete all their negative examples and harshly worded "Don't do X" and "Never Y" and "NO: Z" sections they spend so much time on and got better results with smaller more focused positive example only prompts.
Hah! I also thought about it this way and ended up added a "purple elephant rule" to my pi prompt to discourage the behaviour, since I figured LLMs lean on metaphors so much.
Of course, I quickly reverted this change as purple elephants started cropping up in comments and other prose :)
You tried to discourage it from fixating on negatives by telling it not to fixate on negatives? And it didn't work?
Yes shocking.
Early versions of stable diffusion supported negative prompts and they never leaked because it would just down weight that stuff.
I don't understand why negative prompts never made it into the LLM world. If "no foo" and "dont do bat" don't work then just give me a separate textbox where i can put all my negatives!
The funny thing is, models are pretty good at following negative instructions now.
They just also really love to tell you about it.
Huge issue in slop comments.
And btw, if you have slop comments in your PR, you'll get a review from an agent (my company pay for it). I won't bother to read if you didn't bother either.
Eh, I'd prefer a opus5.5 review with consequent approval over one by a human which I have to wait 5 days for.
Ymmv, I also hate it when people dont read their own PR first though. But I know I've previously identified comments as LLM written which the dev... On further discussion definitely wrote themselves. So you gotta keep the false positives in mind.
I think lots of AI tells these days are leaks from the ai/writer connection into text for the reader. It partly feels like the inevitable result of RLHF with the wrong human's feedback ("I did it! Pick me!") and partly feels like thinking tokens leaking into the main text.
"Here's the argument, in plain terms", "It's not just X, it's Y", "It's worth stating precisely", "The sharper distinction here"... They're things that gesture toward the relationship between the text and the prompt, making it clear where it matched the author's expectations and where it deviated.
Not that humans are immune from coding/writing for their boss instead of their user/reader!
I just used Opus 5.5 for something other than coding, and after about a dozen chat messages (some of which were genuinely amazing), it got LLM brainrot, and started suggesting dumb, irrelevant stuff, ignoring previously established facts, and talking in PR doublespeak.
Another example (not from this app, just in general) that I don’t see people talking about is: “Your files never leave your browser/device”.
Any vibe coded site that deals with files and works client-side feels an INCESSANT need to inform you of this fact.
Definitely seems like the same kind of context leakage. “I don’t want to spin up a server, can you make it work in the browser?”
The thing is, that kind of screen has existed long before vibe coding was a thing. Discord, for example, has had it for years. And the purpose is to reassure the use that the app is still doing something (since users have cottoned on that spinners are meaningless).
Some of the other examples there are equally error prone. The glass example, is something pioneered by Apple too. And was added to CSS before vibe coding. It’s also an effect I mirrored years ago in a UI I built in SDL.
The coloured box example struck me as good UX too. The stuff that needed more urgent attention had a more reddish tone. That makes complete sense. And having those fields a different colour makes it easier for users to pick out specific elements quickly (like how icons are used too).
The problem with AI slop is that it’s trained on good code as well as bad. This is like the arguments against the Oxford comma and em dash all over again.
The point wasn't the loader. It was the phrase the loading screen uses. It leaks the context. The context being that they were merging apps together.
You do realise that’s really common marketing speak when merging apps even before LLMs?
At least some of these are just for lack of caring. I vibe coded this landing page recently https://tui2web.com/ and fought off a lot of the defaults the LLM came up with after a few hours of iteration. Feel free to roast it, I'm not really attached, but I thought it did a reasonably good job.
I find this style of "heavy dark borders/shadows" one of the ugliest recent trends on the web. It's rarely done well.
But otherwise the website looks pretty great. Vibe coded websites usually transmit the feeling of: "nobody even bothered to look at this", and that's not the case with yours at all.
In your lists where elements are separated by horizontal lines, I would remove the horizontal line after the last element. That's quite easy in CSS.
What's interesting to me, is how it selected this heavy dark shadows brutalist style, which is a sort of stylized skeuomorphism , and then it decided to add a background different from page bg, breaking whatever illusion there was.
You could be right, I haven't seen too many like this yet, but it did some out with this staggeringly fast. The style I've seen the most are the gradients + font changes mentioned in the article.
It's not too readable. It would benefit from a columnated layout. The fold is also too long. It should be an introductory block.
Overall, the "rhythm" is a bit off. The user should know what they're seeing even before they see it, at least conceptually. The design/layout doesn't section off dense sections from skim material. Front pages in general should be built for skimming rather than deep consumption (scanning). Scanning should appear optional visually.
There's a lot of "scan" material, but users who visit your site mostly just want to know what they're looking at - at least at first. So the deep material kinda just gets in the way of actual comprehension.
Another critique: too much visual uniformity. Every major section looks the same (poor "rhythm"). This leads the eyes to glaze over much of the site.
It sounds dumb, but our eyes don't "read" a webpage, we "see/feel" it instead. We see structure, layout, differences in colors, font sizes, patterns, bold headings, etc. We ignore the actual textual content. We only do actual reading when we're hunting for something specific (eg, a specific nav link).
The aesthetic itself is fine, but the layout and structure need work.
All caps text is a roadblock for reading speed/comprehension. Accessibility experts were finally convincing major company design standards to stop doing it when LLMs made it a default again [0] for headers and incidental text.
Not to mention that all caps text is also generally associated with shouting and just feels rude to some readers.
[0] Or more accurately trained on all the bad examples before experts started catching them and has stuck to the mistake.
This appears to be pretty close to the "brutalist" aesthetic mentioned in the article. Things like drop shadows on boxes are the opposite of the "fingernail" boxes and you very rarely saw them pre-AI. However I think your site looks fine and well crafted, nice work. (the article also said that this kind of design language is less grating)
Drop shadows on boxes were a common TUI element in the Norton Commander days.
It's been a trend for years before AI... I remember the Balenciaga website being one of the first big names doing it in like... 2018?
Right, AI had to get it from somewhere.
Yeah brutalist is exactly right, that is basically what I prompted for. I didn't realize a bunch of other people were doing this. Actually the only inspiration I had for this was watching the movie (Brutalist) a few years back.
Even before AI, brutalist style is not that popular compared to flat, glassmorphism, skeuomorphism etc. Two popular website that use brutalist that I remember is Gumroad and Figma.
I don’t know man, still looks exactly like a million vibe coded sites.
Good aesthetic, just overused.
It looks nice. I wouldn’t roast it as much as admit that I can tell from some of the content phrasing that an LLM was used. The h1 feels cliche, for example. That comma doesn’t really need to be there.
Claude gave me a similar aesthetic back in December: https://github.com/shepherdjerred/monorepo/tree/main/sandbox...
Though, as you can see, I didn't really polish it
It's a bit funny that the projects are also very similar in goals
It's fine, but if you spent hours telling it what not to do, at that point you are the one doing the designing.
This has the most obvious AI slop tell of all, in my opinion… SO MUCH TEXT. Just sections and sections of header + subheader + bullet list composed of header + subheader + paragraphs.
I’m reading max 2 sentences on any landing page. Most people probably less. Having to scroll and scroll through walls of text is a clear sign of AI.
Not bad but the section numbering gives it away now. Also something cloudflare has. I don’t know if I’d call that slop though. It’s really just the stuff people don’t care about and let whatever the llm comes up with ship.
Not to be a slopologist, but did you come up with the smartphone render? Cause I kinda love it, ngl
It's like, not obviously android or iOS and retro-y
I actually had momentary startle reflex when I opened that page. I don't know web design at all well but I know "design elements are [edited] supposed to be invisible". My first impression is this is the opposite of that.
> design is supposed to be invisible
I don't know who told you that but that's a terrible take. Design can have personality. Design can convey emotions. Design can give you emotions and reactions by itself.
Not everything needs to be bland like a user manual
I edited above. I didn't recall the statement correct - design elements are supposed invisible even design itself is noticeable as a feeling or personality or aesthetic. But I think in this case, what hits users is the elements - the huge text, reverse text and black box.
You might be thinking about "Good design is as little design as possible", one of the 10 principles for good design by Dieter Rams.
I don't know what that's really trying to say, but it sounds wrong. That's how we end up with contextual interfaces that randomly shift around on a whim. Disappearing elements because some mysterious criteria has not been met. Atrocious for user discovery because the designer hid everything they thought the user didn't need.
it's perfectly fine
I’m sorry but this is ugly in my eyes.
Just goes to show how large the dynamic range is re. Taste. This is junk.
Earlier this year I used Claude to design a screen for an Unreal game I work on. At first I thought wow, what a great layout, this is a game changer and gives me a huge advantage.
Less than a year later I am embarrassed how Claude it looks - blinking dot in the corner, double // separating header text, the font choices... now I see the same patterns everywhere, and I'm sure the audience is picking up on it too.
I still use Claude in my work, but a lot more sparingly; I ask for color scheme and font suggestions (no Rajdhani or Share Tech Mono!), but they're mostly for inspiration and I'm not blindly copying them. It feels like I'm being smarter about it, but maybe in a year I'll realize I still haven't climbed out of the trap :)
Love this blog mentioning the issue of implementation detail in prose. Likely my biggest irk of vibe coded apps.
Much of this is it's a simple problem to solve - just prompt agent of choice "Put all user visible text into a translation file for i10n" and then go through and edit said prose as a human.
OAI's models are notorious for it and always have been.
This is similar to the rapid early adoption of the Bootstrap CSS framework. A lot of people were annoyed by the sudden spike of websites that looked and felt the same, but I think this was a tremendous step forward in usability and accessibility, and well worth the initial wave of cookie cutter websites.
The difference here is that the slop paradigm is not a set of intentionally designed UX choices that work well for users, it's a set of accidental commonplace LLM tendencies, not designed for humans, replicated ad infinitum that are making user experiences worse in 99% of cases. The use of white space is horrendous, the font choices are illegible, the color palettes lack sufficient contrast.
Yeah it's problem of sensibility. Like people do not realize that developing a sensibility and good taste here is an actual still that takes time, and is highly undervalued in tech circles with the exception of a handle of truly design driven companies.
Exactly. The benefit to the Bootstrap boom was it elevated a lot of cookie cutter designs like a raft on a series of sensible defaults that were are close to sensible/good taste as some very talented designers could make industrial cookie cutter standards. Bootstrap enshrined smart, intelligent defaults like good color contrast and a baseline of accessibility for developers just copy and pasting and modifying what Bootstrap gave them. For a brief moment the "I just need to get this done" web had a good accessible baseline.
LLMs aren't starting from sensible defaults and don't have to meet WCAG scores unless you tell them to (and even then might hallucinate checks they didn't actually make).
I start with these rules, then adjust as I want...
EMPHASIZE:
- *Summary.* First paragraph like newspaper (who, what, where, when, how, why).
- *Benefits.* Focus on the benefits for the reader.
- *Why this matters* Focus on what it adds to the reader.
NO:
- *No tech stack.* Do not say the tech implementation; covered elsewhere.
- *No counts.* Do not say page counts, part counts, chapter counts, etc.
- *No special formatting.* Do not bold, not italic, not bullet lists.
- *No "if".* Do not say "If you do X then Y"; instead use positive.
- *No run-on sentences.* Do not use many clauses nor too many words.
- *No passive voice.* Do not use passive, or non-subject, sentences.
This is why I spent a lot of time building a design system first, that I can then re-use in my projects. My system is built out of properly CSS tokenized and organized Vue components, and the agent has instructions that it cannot create HTML that isn't made of components - and that if it needs a different UX (which I will have designed with it), then it needs to be built as a component.
What's nice is that you can then write linters for rando CSS and component violations most of the time.
Even then, you sometimes still have to beat it down when it goes rogue - but it does tend to bring my daily frustration down a bit. (Along with a process during design to preview these layouts before they get to a coding agent.)
And once you have a design system that suits your needs, its easy to add in as skills/scripts to any new project. I keep a github repo with all of these bits and bobs, with an agents.md that teaches the agent how to use the repo.
But in short: if the LLM keeps screwing it up, build tools and define it once - stop trying to prompt your way out of it every time.
The most important thing I learned when graduating from "bad musician" to "passable musician" (passable enough to have listeners and fans, at least) was that there's no one single big trick that turns a song from bad to good: there's 100 tiny small tricks that add up. And you need to have experience to know what they are. A trained listener might be able to say "the midrange is too compressed", "there's too much high end", "the drum transients are't punching through", but a normal, casual listener is just going to say, "I dunno, it just doesn't sound right."
This UI slop is the same deal. A slightly misaligned dot off the timeline, color choices which don't really make sense given the website as a whole, using LLMism text. Nothing in here is an obviously major problem on its own. But when you add up 50 of these on a website, users get hit with that "this is slop" feeling.
The details matter. In isolation they seem irrelevant, but as a whole it's what elevates something from the AI slop garbage pile to something actually good.
precisely, good things take TIME and EFFORT!
i personally don’t have an issue with the UI most LLMs generate, but in my opinion it’s ALWAYS a starting point to refine, resolve, and remove what shouldn’t be there.
there are no shortcuts to good UI (or anything else). u gotta put in the reps and have an open mind (not an empty head).
thanks
This problem is/was already solved though dude - templates.
We’re reinventing the wheel again - except worse.
An "inactive" student is one who is enrolled but is not currently attending classes.
This is a super useful article but a lot of these complaints about things like alignments are also the natural outcome of me, a non-frontend person, building any kind of web frontend at all. So I wouldn't sweat it too much.
Your list is missing all caps. I think overuse of all-caps is one of the biggest tells that a ui was vibe coded.
People are also weirdly defensive about their use of all-caps.
I was going to add this, had I not found a comment already mentioning it =)
The font kerning also usually tends to be way off, making the all-caps even more difficult to read.
Yup, matches my experience.
Added “bonus” points if it’s overused small caps. Related (not all need be in caps): header, “eyebrow”, h1, description, footer all saying the same thing.
Material design suggested using uppercase on buttons in Google I/O 2014.
all caps with letter-spacing ALWAYS and usually with a monospace font
People don't realize that you're allowed to tell LLMs/agents "no." In the real world, it's a professional faux pas to question the design of a creative coworker when you may not know design better, but LLMs/agents are not your coworkers.
Don't like abuse of serif fonts? "NEVER use serif fonts."
Don't like the gaudy color palettes? "Use this color palette with a white-dominant background"
Don't like the marketing fluff? "Remove all non-salient text from this app."
You're encouraged to be picky.
> it's a professional faux pas to question the design of a creative coworker when you may not know design better
Huh. I've been committing this professional faux pas for years without consequences. There are simply a lot of bad designers out there.
I'm not sure I agree with this particular point, but, the rest of your comment I wholeheartedly agree with.
And there are a lot of designers who are good, but only in a different medium. Being able to make a good flyer, a good trade fair booth and a good website are completely different skills, but all too often the same designer is expected to do all of those, and more
I admit that those type of politics depend on workplace culture and I worked at two highly creative-oriented companies previously, and in both companies any attempt to point out issues in the design resulted in a "this is according to design spec; not fixing."
Totally fair.
Not a designer but the worst feedback you can get from your coworkers is nothing.
Posts like this are why I don’t trust many pro-AI takes on here.
my agents.md says “If I see ‘indigo-500’ anywhere in your code I will fucking kill you.”
We are now on the Roko's Basilisk list
Ha, on Android that wouldn't help you, already tried hahahah
I just can't fathom how a multi-billion dollar company like Cloudflare could forego their design standards. They seem to have updated their landing page [0], but it's still very sloppy.
[0] https://try.cloudflare.com
Cloudflare WARP suffered a similar downgrade recently when it went from a nifty menubar app on macOS to a vibecoded window built with flutter
that "nifty menubar app" still had insane bugs such as randomly wiping its entire configuration on OS reboot
Cloudflare is slopped out these days. Tons of people uncoordinated, all flailing around. Vibe flailing, I suppose.
How deep is it? Did they start pouring barrels worth of AI code into all their products, or just the new/AI-centric stuff and their webpages?
Random things added constantly. TBH a bit distressing.
tbh, they don't really need the website, it could just be a simple pure text website with a simple tagline explaining what they do, a sign in and sign up button, that's it.
what really matters the most is the dashboard.
They can probably get away with it at this point. Cloudflare already has the name and reputation, so I doubt a sloppy landing page costs them much business.
Cloudflare is a truly bizarre company. First scammers predictably imitated their "turnstile" and phished using the clipboard.
Now they explicitly train people to use the clipboard. Clownflare.
Are they not just dogfooding here?
This hurts my eyes. There's no contrast.
I would think it's a phishing site with that word mark.
My sister's boss fired her (small education) company's web designer.
When you do things like that, you can't escape the slope even when you realize your mistake. (Since it's an education company, people notice illiterate garbage).
Cloudflare is a complete disaster these days, its quite an embarrassing fall from grace. I feel for the few engineers that still remotely care about their craft that work there.
I'm actually loving it more and more, but the disconnect in docs is disconcerting. Try connecting a jurisdiction-bound bucket to their AI Search and can't read from it - and their docs suggest in some places it should be fine and in others it is not. Go to submit a bug report and it's extremely high cost load to get information, even a basic writeup, shared, requiring github account / public repo and more.
Immediately reminded me of https://fingerprint.com/, which is funny, but not really.
Really? I'm more surprised when I see a large company still have design standards. It seems it's all the rage to fire all your UX people and have your devs wipe up a UI because "UI is so easy."
Follow design standards? Fuck no, we need to STAND OUT instead. If you find the design hard to use as a result of not following standards your just an old curmuddgen.
I've seen a couple companies already change their design standards to "best in class Tailwind designs from Claude, use this prompt file/Agent file/skill file combo for all UX work".
Looking at automated emails I get from Microsoft and GitHub it certainly feels like they are one weird layoff from doing it company-wide.
The worst part is these glassification Tailwind heavy slop almost universally fail WCAG guidelines (and personally, seem hard to read to me because of taking the whispy sans serif thing to its foregone conclusion by almost exclusively using what to me are unreadably thin weights of the already too thin Inter font). The slop is going so quickly backwards for companies that invested in accessibility and these companies need to be taken to task for forgetting design isn't just aesthetics but readability and accessibility.
I feel you, especially on the WCAG stuff. It's so damn basic and yet, they refuse to do it. The regressions on usability and consistency across the design space is just so maddening.
And honestly, I'm not even that mad at AI. The way these companies are going I'll take an AI that is taught to follow the most basic design guidelines over what most companies shovel out these days.
Like fine, you want to stand out? Use different colour schemes or unique fonts (but like one or at most two fonts). Change your corner radius from time to time to freshen up. There are so many ways to make your UI "different" but still consistent and following basic best practices.
Some of the stuff throw out now a days would fail UI 101 assignments.
lol what are you talking about? Cloudflare fucking sucks. If this is cause or consequence of being a multi-billion dollar company, I cannot tell.
Their UI being bad is the least of their problems.
We're down this now? Come on. A landing page doesn't need a ton of design for a company as well known as Cloudflare.
The site is just fine.
Stop already with the AI doomerism.
Negative response to low-effort AI-involved work is not what “AI doomerism” means.
A college student who is also very clearly (fron the links beyond the blog) a very active and enthusiastic AI user that thinks common (if correctly identified as less than ideal) UI trends from before vibecoding was common are indicators of “AI slop” and not just design being the done by people who aren’t very good at it (which, to be fair, includes but is not limited to AI slop) is unsurprising and nothing like doomerism.
You can disagree with the factual interpretations ans subjective interpretation in the piece without trying to tie it into a completely unrelated social phenomenon.
The site is utter shit. Total amateur hour. Terrible contrast, barely anything guiding the eyes, the padding to the sides is inconsistent. So is the entire design language from leading with some numbering that never goes beyond 01, round buttons, round input elements, interrupted by somewhat decorated layered elements which then leads to some kind of terminal window that doesn't resemble any terminal UI I've ever seen or used. It's all filled by various sloppy mentions of keywords that barely form some coherent narrative.
This page looks like some junior cobbled it together based on a hastily written ticket by some overworked product guy.
Yuck.
These are all accurate and bad, but I have to wonder how many of these issues are just our current “ai can’t do hands” that will eventually be solved.
LLMs will always have a bias towards a specific style unless the model provider is injecting the entropy themselves and due to how human taste works that style will quickly become out of favor because it will be associated with lazy work.
They can be solved now with a follow-up prompt to remove the bad things, or preemptive rules to not do the bad things in the first place. That's different from "AI can't do hands" which was an intrinsic issue with the model and its robustness (there were tricks to mitigate it such as negative prompting, but far less comparatively successful than the web design analogy).
This is a separate thing. It's not about imperfections: most of these websites work just fine. It's that everyone gets the same LLM, and if you just ask "hey LLM, make me a website", you get a very similar product. Eventually, people learn to recognize and hate that aesthetic because it's overused.
The exact same thing happens with LLM writing. There's nothing wrong with "it's not X, it's Y", but I not do my best to avoid that phrasing because it's tainted by AI slop. I did use it in this reply and part of me is bracing for the accusation...
You can overcome that by exercising more control, but most people don't know they can, and if you start micromanaging an agent, it slows you down and negates much of the speed advantage.
I’d disagree with your analogy honestly, LLM writing is bad for reasons other than overuse: too verbose, unnecessary metaphors, etc
I'm not arguing that it's good. But the average person doesn't write well either. Similarly, the average web app doesn't have good accessibility, probably doesn't render right on some phones, etc. We're not comparing to some Platonic ideal. AI content stands out mostly because of sameness.
The alignment thing is just plain bad but a lot of these are like the em dash issue. It's simply overused.
It's super easy to generate content with AI and everybody's doing it but most content frankly doesn't really deserve to be generated or at the very least shown to the masses. There's nothing wrong with em-dashes but when people associate it with spam it directly devalues them.
Same thing with the badges, emojis, gradients etc. Your brain will simply start associating these tells as an indicator of cheapness just because the large majority of websites using it are just someone's side project that you probably shouldn't waste too much time engaging with.
All the alignment issues seem likely to be solved as soon as LLMs can actually do vision well IMO.
All modern multimodal models can do vision sufficiently well for web design, with the exception of respecting negative space and seeing poor padding/margins on text. The issue is that prompts are often egregiously underspecified so the design -> vision loop doesn't know how to refine.
There shouldn't need to be any prompting to result in correct alignment - like icons being centred. Under-specified prompts can justify the stylistic complaints where all the AI sites favour the same few designs, but not the simply erroneous positioning of things.
I couldn't swear the issue is the vision and not a failure to choose to correct the issues after seeing them - but from interacting with them in other areas I suspect the former not the latter.
Part of it is also lack of care, taste or vision from the slop-pilot. Sure the clanker designed and built the UI, but someone looked at it and went "Hell yeah! Ship it!".
Developing good UI/UX is hard, like really hard. Very few people are good at it and if you're not good at it, what makes you think you're able to recognize a good UI when you see it? So much thought and and foresight goes into a good UI that it requires a serious amount of prompting. When I've worked with actual UX/UI designers, my job has been that of the LLM. The designer spends ages on planning and understanding, then prompts the developer to create the actual UI and iterated endlessly.
Industry most hasn't cared about UI/UX since the 1990s and even if it started to cared now, employment is fairly safe, because it was always mostly research, labs and prompting. It's just that now we can iterate faster because prompting the LLM is faster than prompting your five .Net developers hidden away on the second floor, in the office behind customer service.
I think it's from laziness and not having skill at design. Everything is fixable already,ai cant read your mind.
AI use seems to mostly show what people care about. If something matters, you'll work carefully on it. If it doesn't have chatgpt do it.
As someone who didn't like the UI trends pre-LLM either, I simply shrug. Trading one crap for another.
Sure, a good designer could whip up a great UI. 95% of sites[1] didn't have a great (or even good) designer. I'm not sure the AI UIs are worse than the median that was out there.
[1] Including mine.
Huh, I guess when when AI leaders talk about their AI being unaligned, they meant the divs.
Also, incomplete sections. This site below has an FAQ section without answers.
https://ai.meta.com/muse
They do have answers in Firefox. Maybe your setup is bugging out. I clicked through them, and all of them had answers.
Is Muse free?
Muse is available for free with a usage limit. If you reach your free limit and want more, you can upgrade to a paid subscription, or wait until your free usage limit refreshes.
The text is there, but invisible on firefox desktop.
https://litter.catbox.moe/67qc0k5wixukc7ws.png
its hidden behind the background image on firefox android for me.
Each of those FAQ headers is clickable and expands to show the answer.
I see answers.
I see them in mobile, but not in desktop:
https://x.com/efortis/status/2103319003754275262
That might just be from developers getting a Figma of a FAQ section without final copy, then Meta not doing adequate QA and shipping empty FAQ sections.
No, see my other comment. The text is there but it's visible due to css.
> It adds these // whenever anything close to tech is mentioned.
Shoot. I use those in my portfolio and didn't know they were using them everywhere.
IMO a single "Main Thing // Detail" is fun and fine and is where the trope came from. I see a ton of "Home // Our Work // Donate // About Us" which has beome cringy.
the prose is what kills me. It's so bad and is always the same predictable grandiose sentences.
For it's the length, as easily seen by a scrollbar. You can tell noone wrote something that needs 10 pages to print.
This doesn’t strike me as substantially different from the homogenization of the web that happened ~2013, with the rise of the Bootstrap CSS framework.
My opinion is pretty much the same, too: it’s better than what came before it, and I appreciate having a consistent design language across disparate sites even if I don’t don’t find it to be beautiful.
More guidance is needed on how to efficiently prompt an LLM to generate a correct UI. Describing the appearance, placement and behavior of UI elements for this is quite time-consuming. The contrast with server-side code generation is stark.
I'm curious when the music will stop and people realize that programming languages are more optimal at describing certain behaviors than english.
UI design (not implementation) is an area where “describe it with a programming language” has historically not worked. So much of what makes a UI good or bad is determined reactively after seeing the initial prototype. Those refinements are rarely based on an encoded set of principles that found their way into a training set, and the code used to implement such refinements was varied enough that models and humans both struggle to infer its intentions after the fact.
This started as soon as they devised the MCP. “we have this new thing called ai you can talk to it naturally. Here’s a protocol to make it work better”
A bunch of these patterns are things that real human designers have been using for a while (with the exception of emojis everywhere). This is like how some people assume an em dash automatically means AI generated text.
It doesn't mention the most annoying tell- content that fades in as you scroll down a page. I'm seeing this everywhere recently and it's so distracting
Sad thing is that was a trope of bad web design way before AI. Fade in and parallax scrolling.
> It adds these // whenever anything close to tech is mentioned.
I've done this before, in what I would argue was tasteful at the time.
That rings so true!
I'm vibe-coding an app to practice german, I want the most bare-bones possible, just something for myself. In the sign-in page, the clanker added SEVEN slogans and catch-phrases:
- A more human way to learn - Find your words. Then make them yours. - Good conversations make a language stick. Start where you are, and build from there. - One conversation at a time - Thoughtful practice. Your pace. Your progress. - YOUR LANGUAGE SPACE - A quiet space to learn, made just for you. - Sign in to pick up where you left off.
loool, i had a clanker slop out a page just for me to preview UI components and it did this thing too. "React, without the nonsense", "your UI, simple, uncluttered", etc. like bro just put the components on the page. i tell it "no catchphrases and no extra copy" and it adds "just your UI, no copy" like come onnnn
Just like we lost em-dash and bullet point lists, we're going to lose cards, pills, and small caps subheadings.
It sucks that LLMs took things that were good when used in human-authored content, and ruined it by vomiting back overused cargo-culted versions of it.
Center-dots as dividers are the new tell tale. And periods at the end of statements (e.g. code comments) that previously would never have had periods.
I think soon, we will be adding “Skip Claude” in the same vein as “Skip Intro” to this list.
However, this is personal, but I stopped caring as long as the content is good, the animations can do justice in explanation and I get to learn or get what I want from them.
So what is the best way of stopping this to happen?
I am doing some experiments in forcing the LLM to use a process.
Start with a brand guidelines, followed by building wireframes, followed by merging the two together.
Think of it like chain of thought but for something visual.
My bugbears are narration - where the page tells me how to use it, or is labelling things in a way that a human would not use. "Choose a ..." where ... would be better as a heading.
All this kind of ugliness long pre-dates AI. My guess is the training data set is full of this kind of crap.
Don't forget carousels! And scroll hijacking!
I'm surprised this doesn't mention imo some of the most ubiquitous offenses:
- cards in cards in cards. everything is a card
- parchment background
- pointless dashboards
You can tell by looking at a UI whether it was purely generated by AI or not. Just like you can tell by looking at an AI-generated video.
Until this becomes design standard.
1st major tell: the website was released in 2025 or later.
Pretty much all websites these days use AI to make them now.
The one thing that vexxes me up so much is the model bring up internal decisions in consumer facing views.
An active student means you're enrolled. It has implications, student discounts for example.
I always assumed the fingernail edge thing had to come from a popular library or something.
for whatever reason AI just loves colored accent stripes on cards and overuses the crap out of them. once you see it you can't unsee it
The vast majority of LLM slop seems to be Tailwind to me, so sort of the opposite of a library, just a bunch of common patterns in Tailwind so common as to be everywhere but not common enough anyone bothered to put them into a reusable library.
AI is just another tool and I have actually found it really fun to dive into design as a non-designer. It still takes a lot of time and effort but I can now create designs that I'm quite happy with that I'd have never been able to do before.
Wrote a bit about my process in a blog post [1]. Obviously my designs are far from perfect but I'm really happy with my company's website.
[1] https://railcode.dev/blog/vibe-coded-website
The rollercoaster on your landing page could use some better logic for when to restart. Or not do it at all. I kept restarting it automatically by moving a little bit.
ah thanks for the feedback!
The visual is very on brand with the company name. Great works!
> CAN SOMEONE TELL ME WHAT AN INACTIVE STUDENT LOOKS LIKE??
Formally, it's a student who's in the system, but isn't currently enrolled in classes.
Informally, it's pretty much every undergrad who ever lived.
> This website is vibe coded; it looks cute tho.
I'm not sure using a Fraktur-esque font for headers could ever be described as cute.
On the copywriting side, I added an instruction to always write the copy in a Markdown file and let me edit it before actually coding the UI. Miles better to edit 2-3 sentences at a time than look at an UI full of slop, dumbfounded on how to proceed.
But on the styling, there's just no good solution. I use things like https://katagami.ai to find inspiration and nudge it into a style direction but I still have to hand edit paddings and buttons and visual separation.
For example copying the Sumi prompt [0] and applying it onto my keyboard app landing page [1] ended up with something visually pleasant and informative. I would have spent way too many days doing animations and deciding on the theme.
But I still wish I could take an LLM and train it on my already human made websites and copy and get something that can follow a design language and writing style.
[0] https://katagami.ai/art-styles/en-019efd5c-2d50-7162-b204-31...
[1] https://dev.lowtechguys.com/redink/
I think that these things I've seen that are tells of a slop UI are when people without discernment (not as an insult!) don't do a pass over a UI. I'm working on a dumb little app to help me sequence photos for a book[0], and I'm building it with Claude (Opus 5.5, medium effort). The first pass was really sloppy, but I was surprised at how far I could get with some directed iterating.
This isn't a new problem; every generation of websites has tells of the lowest-barrier-of-entry tools of the trade. You could tell a Twitter Bootstrap UI from a mile away similarly.
The only difference I think is that AI will go ahead and add stuff that you didn't think of, like little badges and gradients and whatever. I think it's a different skill to say "no, this is distracting and unnecessary." The app I mentioned above has a few of these — extra stats about page counts and image counts and such.
[0]: https://photobook-sequencer.netlify.app/ (very much a work in progress, feedback welcome)
Ever tested it on mobile? There’s some cut off text in the top right nav, the “start by adding photos” text isn’t vertically centered in its container, and the page size/settings container is also cutting off content on the sides.
Nice aesthetic tho
The other difference was that Bootstrap met WCAG standards and had a very strong baseline of accessibility. These LLM slop outputs meet no such standards and seem to laugh in the face of accessibility.
Yeah, that's very true. I've gotten a lot of mileage out of Claude's `design` skill, which does an accessibility pass that I've found pretty decent as someone with only minor experience in the area — contrast, tab/focus ordering, things of that nature. The catch is that you have to actually have to want to check these things, just like you have to want to not ship slop.
You forgot the small caps headings or tags added randomly everywhere.
It's a symptom of the long standing ghettoization of design and front end engineering. FE has always been cast as frivolous and unserious by conceited developers.
That's how you get slop that feels uncanny. There's no one in the room with the taste to call it out and no one in the room who cares enough to put in the time to fix it.
In Art and UI/ UX of Apps I think AI slop will be a constantly moving target. Whenever you consume too much of a certain art style or music it starts grating you personally, your mind needs a certain amount of variety. With AI overproducing (the already mass produced) arts and apps, your brain will pick up on whatever common yells exist for whichever AI generation we’re at and will begin to hate it. Like the only solution would be for GPT-8 to give random completely different art style outputs for the same prompt to different users or else our brain will immediately start not liking the commonality of GPT-8 aesthetic decisions and begun to hate it.
the jump up arrow is not centered :D
the font is hard to read my fav is "unap-pealing".
the theme toggle is only on top.
the images are set to 0.85 opacity ?
Every time someone puts precise language to what makes ai slop sloppy it feels like frontier labs get an ever clearer RL target. Not to say people shouldn’t publish these types of posts. I enjoy reading them and I hope they continue to be published.
That only means these very specific things get removed.
And only mostly. For all people say "AI can do hands", I still see a lot of six-fingered hands in social media propaganda slop.
A lot of these are examples of bad prompting (i.e. "build me a website for x y z"). Gradients can be prompted out, same as emoji slop. One line in the prompt / agents.md and you never see those. Color "rainbow" should be avoided by specifying a color palette. In case you don't have one, ask it for one "from literature / best practices" first. LLMs know the theory, but you have to have it in the context for it to be applied.
Misaligned stuff is the prompter's fault. Those should be caught by the human. they're the types of tasks that are fast/cheap to verify.
It’s the next evolution of applications where nobody actually cares about the users, as long as some checkbox can be ticked to mark it done and get paid.
The implementer is not paid by the end-user and they have no reason to care about the user’s opinion - the only thing that matters is to minimise cost and maximise profit.
The client doesn’t care as long as it’s cheap and technically works. The career prospects of the “project lead” on the client side are likely not affected in any way if the result is poor, so they won’t care much either.
There need to be consequences for negative feedback, which would make people strive for a better result. Otherwise people just don’t care.
Isn't the popular understanding of AI slop perfectly aligned with what you're saying? I.e., AI slop is the result of lazy and/or careless prompting.
Can we get some examples of what a good UI looks like then? I would like to see a UI design expert take a couple of these slop designs and show what each should look like according to their taste.
A half-joke answer is "not like this UI", which is surprisingly easy to prompt if you're already using agents for design.
Read Refactoring UI, originally written by the Tailwind devs. They also used to have a blog with some good articles: https://medium.com/refactoring-ui/7-practical-tips-for-cheat...
this dudes blog: https://sha256.net/
Really not a fan. Like, fairly significantly bad. Text sizing is poorly chosen, the only affordance for navigation or understanding what content is contained within what sections is at the bottom, sections are concentrated together in an overwhelming way (god help me if I’m a frequent visitor primarily interested in “external writings and presentations”), headings and font sizing is variously too close together and too far apart, code blocks are always in a huge font compared to prose, and code blocks blow out the horizontal scroll, meaning that vertical scrolling on mobile is a massive pain in the ass.
There are good examples out there for minimal, straightforward blog design. This ain’t it.
To be fair, your blog has the opposite issue, with the sidenotes forcing me to zoom in to read the text on mobile.
I'll admit that the blog I linked doesn't handle code blocks gracefully specifically on mobile, it's fine on the desktop.
> To be fair, your blog has the opposite issue, with the sidenotes forcing me to zoom in to read the text on mobile.
Very true, I’ve procrastinated on fixing that for too long.
Even better would be some UI expert come up with an application interface for 10 common use cases. Then, give that to a group of designers, say it’s AI generated, and ask them to point out AI tells.
I’ve seen several of these “slop design” critiques lately. They don’t seem to be coming from people with strong design skills. (Presumably qualified designers have better things to do than critique AI designs. Also they probably know how to get what they want out of the AI instead of accepting what it creates.)
An authentic one, a one you create yourself regardless if it’s not perfect.
“Authentic” does not imply good. There were millions of poor interfaces coded up before AI.
And that’s ok, I am at the point where I would rather to see typos or grammar errors too than a very well written text, as I know a human put the efforts to write it
That is not how the real world works outside of anti-AI communities. Typos/grammar are seen as unprofessional and are more likely to cause negative sentiment/backlash than overused design.
If you can deterministically show and name these UI slop tropes so well, you can build a skill to help you detect and potentially avoid them.
Here's an experimental crack at it, giving your article attribution: https://github.com/who/skills/blob/main/.claude/skills/detec...
While not playing WoW Forever myself, I like reading the news and subreddit about it. In the last days, every day a new "self-made" UI mod gets showcased transforming the UI into AI slop.
Disregarding any design standards and letting the AI role with it. People that mention it, in the comments, get blasted by accusations of gate-keeping.
I see this so often. Nobody is gate-keeping anyone, you can just learn the skill, read about UI design and art.
Why is it so hard for people to just put in the time?
> Why is it so hard for people to just put in the time?
All my life the older generations has been accusing my cohort of being the "instant gratification generation" and I hate how right they have turned out to be.
What
The most obvious tell is the "No this. No that." copy which you find everywhere.
I'm really pissed off that my favorite web design style Brutalism is now an AI slop smell. They already took my em-dash! *shakes fist*.
Now that I think about it, Brutalist web design always reminds me of 80s and 90s video games. I wonder if the increased adoption of Brutalist webdesign has something to do with "nostalgia porn" instead of LLMs.
Stuff I'm missing in the list: "Claude beige" and "Claude anthracite grey".
I have an inkling that this will become cyclical, like fashion. Just wait a couple of years and any currently overused LLM style might become more unique again.
I'm not particularly keen on the font selection observation. Boring is ideal for the vast majority of interfaces. Far worse is the vulgar font selections guided by design skill documents which disallow common font selections.
Something missing from the list of tells is overuse (or even any use at all) of the middle dot (·).
The most stupid thing about Slop AI is Heading + Description. Whenever I generate something with these things, they add a useless obvious header and a paragraph of crap beneath. I tell them I'm generating an specific tool for me and me only; and it explains what it is, I tell them I don't want them and they include these things anyway...
watch this turn into a skill and become a popular meme on X...
I have seen folks here complaining about design trends long before AI slop. Maybe those folks who work in tech long for originality but the reality is designers in all aspects of life follow trends and originality is rare.
The reality is that users enjoy familiarity and find familiar interfaces and design trends comfortable and easier to use.
Some of these are a bit outdated for newer models.
I find the most consistent tells are often just excessive descriptive text and a lack of visual hierarchy. It makes sense given these are language models.
Also, I find models are really quite good once given some design context to work from. Slop UI is lazy at this point, not a reflection of model quality.
I added a rule on my agents.md for the design part, I never like any UI element that styling have a bg and slightly dark version of same color used by the bg because it's really made me mad and seems get being used by Agent
This coincidently the first picture in this article by cloudflare
I have to disagree on the fingernail card accents (though I've just learned the name via this article). Slop or not, they're useful for subtly indicating state, type of attention required, etc. without cluttering a UI.
this slop UI thing is just peak LLMs learned it by watching us, but surely the solution to slop UI cannot be this site. The adventurous unifrakturCook cursive font they chose for headings is making me throw up a bit in my mouth. It's like getting sex tips from someone who is both a virgin and suffering from Tertiary Stage syphilis at the same time!
And despite it putting me in the slop side of things I have to say that Inter is, for me at any rate, a reasonable font, especially for online usage. Maybe that's why the slop uses it.
As someone who programmed a campus identity managment service from scratch, both front-/backend without a trace of LLMs, as it was a while ago:
Yes there is such a thing as an inactive student and it is quite imortant for such a system to differenciate the two. However it is not really important to display it to the user, since that isn't really info someone inactive would see anyways.
And this is part of the problem: LLMs have this tendency to spill the beans (=implementation details) into frontend code. Aa someone who had both hats of the frontend and the backend guy, I still think LLMs aren't producing optimal results here.
Ideally you backend code is elegant, extensible and exactly what is needed to get the job done efficiently and reliably. The frontend however needs to be 100% thought from the perspective of the user (and sometimes from the perspective of a malicious attacker). LLMs still get mixed up with that split.
Another one is the overuse of active language and anthropomorphisation. The code always lives somewhere, it’s lot just hosted there.
For some reason slop UI labels always refer to the user in second person. Solid tell when something says "Needs You" instead of "Requires Attention"
Waiter, there are fingernails in my hamburger menu!
Slop patterns are so obvious now, it seems silly that there was a time we couldn't tell when things were AI
"Build me a HTML table"
"Table built.
Two things worth flagging..."
BRO
This is highly accurate.
biege, biege & biege
We are entering a phase where ai creates clean, informative interfaces, so humans trying to differentiate make theirs “interesting” (unreadable), as in this case: “Mhat Js Glop”
The biggest tell of slop UI is the intersection of fancy styling and disfunctional UX. AI absolutely cannot do UX by itself.
This website has a terrible taste in font. There's a reason you don't see a lot of serifs on the Internet.
Another blog post for which I had a better reading experience using Firefox reader view. Thank you Firefox.
"You're absolutely correct! It's not slop, it's technology in action"
> Emoji Slop
Not just emoji, icons in general, in both website generation and image generation.
I find some models don't use icons enough. They will have links and buttons with text only labels when an icon and tooltip will do. I'm talking for links like "Files" with already well known associations with icons.
To be fair we have had UI slop way before AI in the sense of lazily coded react slop.
and before that we had Bootstrap slop, and before that we had jQuery UI slop, and before that...
[Genuine shoutout to that jQuery accordion, that thing is a web cockroach. I think it will probably outlive us all]
Ironically, your portfolio website gave me some 'slop vibes'. Not saying in any way that it was made with AI, maybe seeing monospace fonts where none are necessary triggers me now.
https://pranavdesai.vercel.app/
Author unapologetically uses AI. They just want people to put effort into it beyond posting the first result of a generic prompt.
After all the post ends with "This website is vibe coded; it looks cute tho. It’s just that these people don’t put ANY effort into making it even look mildly good"
Monospace fonts are dead to me. If this trend continues, there's a 50/50 chance I'll be coding in Times New Roman this time next year.
I've known people advocating for proportional fonts for source code for a long time (many of them also in the literate programming camp). It would be funny if LLM slop was the final aesthetic push over the last few hurdles there to making it more common.
woof, that's pretty bad. Even looking at the repos I get the LLM README.md stank.
It takes one to know one.
But this looks really good. Great contrast, simple and quiet, background image does not take up the whole page, the only thing really wrong is the animations. It's proof that slop can be turned into gems by someone with an eye for it.
Apart from misalignment and slop text, does the rest really matter?
As long as it doesn't degrade the site's usability, does the general public care about fingernail cards or gradients?
Looks good enough.
But it does actually decrease usability? Useless badges with non-sensical labels or colors without meaning are just confusing. Or the other example from the website: Aligning content is not just to please a designer's eye, it helps users understand which parts of the UI belong together.
I mentioned apart from misalignment and slop text (inc those useless labels), why would a website visitor who doesn't work in tech and who doesn't follow the latest AI developments care whether something uses a gradient or not?
They come to your website with a goal in mind. As long as you make it easy for them to achieve that, it doesn't really matter whether you have elements on your site that are frequently generated by AI.
What's more important is use AI to make your website more accessible.
lol, the vast majority of the public does not care that it is "slop ai" or your carefully crafted UI is "hand-crafted". those days are long gone and were already dying when bootstrap was a thing (curious to know if people even remember it now). people who are quick to demonize slop ai ui are missing the point. do u think shadcn is any better? for 99% of us it's long as people can navigate your UI and your copy isn't a big ball of shit.
I agree. I know these things makes designers anyone who values UX, aesthetic, craftsmanship eyes bleed. But for a lot of websites that are utilitarian in nature much of the AI generated design is simply good enough. We’ve had plenty of human web design fouls since the beginning. For pages that are a means to an end I think it’s a great because energy can be directed towards the product itself. In a word where agents summarize sites and return the content design matters even less outside the actual product experience. Much of that will become per experience UI which will relinquish designer control further. One thing that’s helped me is telling an LLM to focus on information architecture then it stops overloading the view with page chrome and noise presenting instead the information for the use case at hand.
yup; I AI slopped new design of some some site/portal I still maintain and got nothing but positive feedback - old version used "handcrafted" bootstrap 2 code so maybe the bar was just very low :p
I think engineers have very different bar for slop than most of the people - which could explain obnoxious amount of ai generated menus/banners in the actual physical space nowadays
> the vast majority of the public does not care that it is "slop ai
The people (that count, i.e. that has disposable income) has started to notice when it comes to AI images, I'm pretty sure the same will start happening when it comes to web design. It just reeks of cheapness, of not caring, i.e. of slop.
Cloudflare has definitely gone all-in on slop.
So what? Do author thinks those people have skills or resources to do better?
the entire web already looked like this before llms became a thing, how do we know when its ai slop vs web devs being bad at web dev as usual
Problem: This Cloudflare Quick Tunnel thing appears to be exactly what I need right now, so thanks for letting me know about it. Now, do I care how the website for this very useful product looks like? Not one bit.
The problem, really, is assuming that the alternative to a slop website is a non-slop website. But the alternative is often no website at all.
Having said that,
> And my profile has an “active student” badge.
Ahh, and the icon is vertically misaligned with the text... what is it with AI and zero ability to keep things aligned and consistent?
So spot on. These slop UIs are popping up everywhere and are an absolute plague. People keep building these experiences that are practically unusable from a UI/UX perspective.
> It’s not even that it’s bad; it’s just so overused by literally every LLM in every single place that it just looks bad now.
> It looks kinda cool till it gets overused and then you start hating it.
> This website is vibe coded; it looks cute tho.
This sounds like more of a no true scotsman/elitist argument rather than an indictment of AI use in UI. The author doesn't seem to have a problem with AI UI, other than whatever they decided doesn't vibe with their somewhat contrarian taste.
There are styles which are timelessly bad and then there are styles which are only "bad" because they are overused. That's not the fault of the style, it was good style, that's why it became overused. The problem is us. We have a natural aversion to repetitive things, and I wouldn't call that contrarianism.
I don't know, I recall in music repetition actually being enjoyed by the listeners (although not always so much the craftsmen and critics). Same seems to go for verbal communication, while some claim that great authors wouldn't repeat themselves, poetry is also generally rated prettier/better/more enjoyable wording despite often incorporating repetition. Why would visual design/style be any different in regards to human preference for symmetry and repetition/recognizability (even though the ones who create it tire of doing samey stuff all day, every day)?
1. We're not talking about the same kinds of repetition. Repetition as a tool within a single artwork is not the same thing as widespread imitation across artworks.
2. Audial preferences are not the same thing as visual preferences, they're different parts of the brain.
slop ui - jumps to site with unreadable font. ho hum
Wow. That is rough. Way too much of that font, especially the initial rendering above the fold.
Can we please stop with the "AI = Slop" rhetoric? I'm fairly bearish about AI, and even I'm getting annoyed by it.
"Slop" just means something is low-quality and of poor craftsmanship, irrespective of who or what made it. If it's slop, you don't need to look for tells, you can just tell it's slop. Sure, AI is prone to specific types of mistakes, and humans are prone to other types of mistakes, and you can often tell whether a specific poorly-crafted UI is man-made or machine-made, but bad is bad is bad.
This blog post uses Slop correctly. In this case the specific slop type that results when you give AI a very generic prompt with no direction and then don't iterate over the result
The closing words of the post are "And it’s not even that I am against vibecoding. This website is vibe coded; it looks cute tho. It’s just that these people don’t put ANY effort into making it even look mildly good."
Did you even open TFA?
> Slop UI is the UI that AI cooks up that looks off, where it’s not supposed to be, doesn’t serve a purpose or when a UI is too generic.
> This is seen in vibe-coded UI without a vision. Vibe-coded UI can look great when done right, but most don’t. And it makes the apps look cheap and unappealing to use.
Those are paragraphs 3 and 4.