Tells of a Slop UI

ronbenton

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.

wigster

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

Art9681

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.

xz18r

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/

vallerie

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.

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.

pdpi

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.

NitpickLawyer

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.

anothermathbozo

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.

ookblah

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.

chrismorgan

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

cainxinth

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.

weakfish

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.

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.

qoez

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

bbg2401

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

yakkomajuri

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

lampe3

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 ?

docheinestages

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

nacozarina

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.