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.
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.
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’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 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
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.
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
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).
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.
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.
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.
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.
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.
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.
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.
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"
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.
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.
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'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 (·).
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.
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.
> 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.
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.
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.)
> 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.
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.
[delayed]
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
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.
Are they not just dogfooding here?
I would think it's a phishing site with that word mark.
Immediately reminded me of https://fingerprint.com/, which is funny, but not really.
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.
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.
it's perfectly fine
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 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
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.
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
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.
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).
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.
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.
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.
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.
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.
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.
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.
the prose is what kills me. It's so bad and is always the same predictable grandiose sentences.
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
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/
You forgot the small caps headings or tags added randomly everywhere.
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"
woof, that's pretty bad. Even looking at the repos I get the LLM README.md stank.
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.
It takes one to know one.
> 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.
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!
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.
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.
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.
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'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 (·).
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”
Cloudflare has definitely gone all-in on slop.
"You're absolutely correct! It's not slop, it's technology in action"
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]
> 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.
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.
> 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.
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...
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.
An authentic one, a one you create yourself regardless if it’s not perfect.
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.)
this dudes blog: https://sha256.net/
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.
> 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.
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.