<- Back
Comments (151)
- docheinestagesI 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
- yungporkothe 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
- zinocThis 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.
- weakfishI’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.
- czhu12At 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.
- vallerieLove 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.
- tptacekAn "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.
- cosmoticAn active student means you're enrolled. It has implications, student discounts for example.
- BeetleBAs 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.
- jphI 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.
- uxhackerSo 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.
- cainxinthThese 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.
- Gualdrapo> 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.
- minimaxirPeople 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.
- mjr00The 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.
- vmg12Your 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.
- VCFundedGenYerthe prose is what kills me. It's so bad and is always the same predictable grandiose sentences.
- efortisAlso, incomplete sections. This site below has an FAQ section without answers.https://ai.meta.com/muse
- nacozarinaMore 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.
- BrajeshwarI 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.
- sim04fulThe one thing that vexxes me up so much is the model bring up internal decisions in consumer facing views.
- tonic_noteIt'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.
- neuodevYou 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.
- yakkomajuriAI 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
- xavdidIt 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
- xz18rIronically, 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/
- ronbentonA 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.
- uxcolumboApart 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.
- alin23On 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/
- apiAll 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!
- epihelix> 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.
- zeroonetwothreeYou forgot the small caps headings or tags added randomly everywhere.
- Art9681Can 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.
- 65The most obvious tell is the "No this. No that." copy which you find everywhere.
- diwankwatch this turn into a skill and become a popular meme on X...
- AyanamiKaineWhile 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?
- jd7hI'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".
- mintflowI 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 AgentThis coincidently the first picture in this article by cloudflare
- lampe3the jump up arrow is not centered :Dthe 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 ?
- anothermathbozoEvery 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.
- arshxyzFor some reason slop UI labels always refer to the user in second person. Solid tell when something says "Needs You" instead of "Requires Attention"
- NitpickLawyerA 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.
- falsemyrmidonThis website has a terrible taste in font. There's a reason you don't see a lot of serifs on the Internet.
- deancI 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.
- bryanrasmussenthis 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.
- bbg2401I'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 (·).
- wxwSome 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.
- ls_statsThe biggest tell of slop UI is the intersection of fancy styling and disfunctional UX. AI absolutely cannot do UX by itself.
- tapvtI 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.
- JodieBenitezAnother blog post for which I had a better reading experience using Firefox reader view. Thank you Firefox.
- DonHopkinsWaiter, there are fingernails in my hamburger menu!
- nullbioThis is highly accurate.
- ModernMechWe 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”
- MawrProblem: 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 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 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?
- andrewinardeer"You're absolutely correct! It's not slop, it's technology in action"
- qoezTo be fair we have had UI slop way before AI in the sense of lazily coded react slop.
- chrismorgan> Emoji SlopNot just emoji, icons in general, in both website generation and image generation.
- voidhorseSo 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.
- thefilmoreCloudflare has definitely gone all-in on slop.
- ookblahlol, 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.
- wigsterslop ui - jumps to site with unreadable font. ho hum
- avaer> 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.
- pdpiCan 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.