10 Tells of a Slop UI

136

ttheanonymousone about 2 hours ago 101 commentsRead Article on hereticpleb.vercel.app

DE version is available. Content is displayed in original English for accuracy.

⚡ Community Insights

Discussion Sentiment

55% Positive

Analyzed from 3436 words in the discussion.

Discussion (101 Comments)Read Original on HackerNews

docheinestages•about 1 hour ago

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

arshxyz•29 minutes ago

Cloudflare WARP suffered a similar downgrade recently when it went from a nifty menubar app on macOS to a vibecoded window built with flutter

01284a7e•about 1 hour ago

Cloudflare is slopped out these days. Tons of people uncoordinated, all flailing around. Vibe flailing, I suppose.

tavavex•41 minutes ago

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?

thatjoeoverthr•16 minutes ago

Random things added constantly. TBH a bit distressing.

damowangcy•about 1 hour ago

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.

Yakobeen•about 1 hour ago

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.

tomrod•about 1 hour ago

Are they not just dogfooding here?

aw12aG•about 1 hour ago

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.

tensor•39 minutes ago

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.

thefilmore•about 1 hour ago

I would think it's a phishing site with that word mark.

acedTrex•about 1 hour ago

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.

nullbio•about 1 hour ago

This hurts my eyes. There's no contrast.

gib444•about 1 hour ago

Immediately reminded me of https://fingerprint.com/, which is funny, but not really.

ctrlkctrls•about 1 hour ago

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.

jasonvorhe•31 minutes ago

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.

surgical_fire•27 minutes ago

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.

neuodev•about 1 hour ago

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.

weakfish•about 2 hours ago

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.

JoshTriplett•about 1 hour ago

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.

czhu12•about 1 hour ago

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.

quirino•about 1 hour ago

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.

Anon1096•about 1 hour ago

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)

jdlshore•20 minutes ago

Drop shadows on boxes were a common TUI element in the Norton Commander days.

CSSer•about 1 hour ago

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.

dreambuffer•about 1 hour ago

It's fine, but if you spent hours telling it what not to do, at that point you are the one doing the designing.

dawnerd•about 1 hour ago

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.

mantesso•about 1 hour ago

it's perfectly fine

efortis•about 1 hour ago

Also, incomplete sections. This site below has an FAQ section without answers.

https://ai.meta.com/muse

akazantsev•41 minutes ago

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.

samfriedman•about 1 hour ago

Each of those FAQ headers is clickable and expands to show the answer.

ojbyrne•about 1 hour ago

I see answers.

efortis•about 1 hour ago

I see them in mobile, but not in desktop:

https://x.com/efortis/status/2103319003754275262

65•38 minutes ago

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.

vallerie•about 2 hours ago

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.

nullbio•about 1 hour ago

OAI's models are notorious for it and always have been.

Gualdrapo•about 1 hour ago

> 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.

unholiness•about 1 hour ago

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.

cainxinth•about 2 hours ago

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.

minimaxir•about 1 hour ago

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).

vmg12•about 1 hour ago

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.

gpm•about 1 hour ago

All the alignment issues seem likely to be solved as soon as LLMs can actually do vision well IMO.

minimaxir•about 1 hour ago

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.

tayo42•about 1 hour ago

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.

mrweasel•about 1 hour ago

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.

minimaxir•about 1 hour ago

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.

tomrod•about 1 hour ago

> 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.

wongarsu•about 1 hour ago

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

minimaxir•about 1 hour ago

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."

tomrod•about 1 hour ago

Totally fair.

falsemyrmidon•about 1 hour ago

Not a designer but the worst feedback you can get from your coworkers is nothing.

pointillism•about 1 hour ago

my agents.md says “If I see ‘indigo-500’ anywhere in your code I will fucking kill you.”

tomrod•about 1 hour ago

We are now on the Roko's Basilisk list

nacozarina•about 1 hour ago

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.

max__dev•about 1 hour ago

I'm curious when the music will stop and people realize that programming languages are more optimal at describing certain behaviors than english.

ModernMech•39 minutes ago

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”

VCFundedGenYer•about 1 hour ago

the prose is what kills me. It's so bad and is always the same predictable grandiose sentences.

stephbook•about 1 hour ago

For it's the length, as easily seen by a scrollbar. You can tell noone wrote something that needs 10 pages to print.

vmg12•about 1 hour ago

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.

Anamon•2 minutes ago

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.

msdz•about 1 hour ago

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.

AyanamiKaine•about 1 hour ago

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?

bluefirebrand•25 minutes ago

> 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.

xavdid•about 1 hour ago

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

dawnerd•about 1 hour ago

Sad thing is that was a trope of bad web design way before AI. Fade in and parallax scrolling.

jd7h•about 1 hour ago

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".

ungovernableCat•39 minutes ago

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.

DonHopkins•about 1 hour ago

Waiter, there are fingernails in my hamburger menu!

yakkomajuri•about 2 hours ago

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

quirino•43 minutes ago

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.

ronbenton•about 2 hours ago

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.

alin23•about 1 hour ago

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/

deanc•about 1 hour ago

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.

zeroonetwothree•about 1 hour ago

You forgot the small caps headings or tags added randomly everywhere.

xz18r•about 2 hours ago

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/

wongarsu•about 1 hour ago

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"

vallerie•about 2 hours ago

woof, that's pretty bad. Even looking at the repos I get the LLM README.md stank.

nananana9•about 2 hours ago

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.

woadwarrior01•about 2 hours ago

It takes one to know one.

api•about 1 hour ago

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!

falsemyrmidon•about 1 hour ago

This website has a terrible taste in font. There's a reason you don't see a lot of serifs on the Internet.

epihelix•about 2 hours ago

> 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.

nullbio•about 1 hour ago

This is highly accurate.

tapvt•about 1 hour ago

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.

lampe3•about 2 hours ago

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 ?

anothermathbozo•about 2 hours ago

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.

NitpickLawyer•about 2 hours ago

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.

emerongi•about 1 hour ago

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.

bbg2401•about 1 hour ago

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.

bbg2401•about 2 hours ago

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 (·).

wxw•about 1 hour ago

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.

ModernMech•about 1 hour ago

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”

andrewinardeer•about 1 hour ago

"You're absolutely correct! It's not slop, it's technology in action"

qoez•about 2 hours ago

To be fair we have had UI slop way before AI in the sense of lazily coded react slop.

vallerie•about 1 hour ago

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]

thefilmore•about 1 hour ago

Cloudflare has definitely gone all-in on slop.

chrismorgan•about 2 hours ago

> Emoji Slop

Not just emoji, icons in general, in both website generation and image generation.

vmg12•about 1 hour ago

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.

ookblah•about 2 hours ago

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.

paganel•about 1 hour ago

> 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.

Art9681•about 2 hours ago

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.

minimaxir•about 2 hours ago

A half-joke answer is "not like this UI", which is surprisingly easy to prompt if you're already using agents for design.

satvikpendem•about 2 hours ago

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...

chasd00•about 2 hours ago

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.

tamimio•about 1 hour ago

An authentic one, a one you create yourself regardless if it’s not perfect.

dpark•about 1 hour ago

“Authentic” does not imply good. There were millions of poor interfaces coded up before AI.

Avicebron•about 2 hours ago

this dudes blog: https://sha256.net/

dpark•about 1 hour ago

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.)

wigster•about 2 hours ago

slop ui - jumps to site with unreadable font. ho hum

dpark•about 2 hours ago

Wow. That is rough. Way too much of that font, especially the initial rendering above the fold.

avaer•about 2 hours ago

> 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.

pdpi•about 2 hours ago

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.

wongarsu•about 2 hours ago

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."

scythmic_waves•about 2 hours ago

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.