7 Tells that a UI is AI-Generatedby Jeff Humble Dear Reader, You can see a vibe-coded app from a mile away, if you know what to look for. Here are seven design patterns that scream amateur vibe coder. Learn them, avoid them, and stay above the rising tide of slop, my friends. 1. Neon color paletteIf it's vibe-coded, it's gotta be neon. To slop this one up to the max, use 5+ neon colors and never pick a single one to focus. Why AI loves it: Neon-on-dark is overrepresented in "modern UI" training data because it photographs well and gets upvoted on Dribbble. Dark background plus high-chroma accent gets learned as the default for contemporary SaaS. 2. Dark mode glow-upEvery vibe-coded website has that aurora borealis glow thing going on in the background. My eyes appreciate the dark mode, but I can never tell if my screen is broken, dirty, or it's just another AI-generated website. Why AI loves it: Radial gradients behind hero content appear constantly in gaming, crypto, and AI product sites. The model absorbs "glow equals premium dark mode" without any ability to judge whether it's serving a purpose. 3. Emojis everywhereIf you thought that emojis were just for chatting, you haven't worked with AI as a UI designer. To slop this one up, make emojis the go-to icon, background element, and navigation item. Why AI loves it: Marketing copy and onboarding flows in the training data use emojis as visual punctuation constantly. They become a learned shorthand for adding hierarchy without needing actual icon assets or design decisions. 4. Purple gradientsI'm sorry if you like purple or Prince because AI has ruined that now. To make it really slop, use purple gradients for your H1s, your buttons, and your backgrounds. Why AI loves it: Purple-to-blue is statistically the most common gradient in tech product marketing. Thousands of examples from Notion, Linear, Vercel, and their imitators make it the default output for any "innovative software" hero section. 5. Cards, on cards, on cards...In AI-generated interface land, everything goes in a card. Even cards themselves sometimes go in cards. That way, things can feel organized even as the UI overall becomes more chaotic. Why AI loves it: The model knows content needs containers but applies that rule recursively, with no cost function for visual weight. Every group becomes a card, and since that card lives somewhere, it gets wrapped in another one. 6. Multicolored side tabsThese are quickly becoming the em-dash of AI-generated UI. To be a proper slopper, every card and block of text gets a little rainbow side tab. And just like a sprinkle on ice cream, it adds color but does nothing for the taste. Why AI loves it: Tabs have active states, and active states mean color. With no concept of a system-wide color budget, each tab gets its own accent. The model can't reason that four competing colors cancel each other out. 7. Status dotsThere was a time once when dots meant something like, "live" or "connected." To become a top sloppper, add them to every UI element in any color you like. Why AI loves it: Colored indicator dots are everywhere in developer tools and admin UIs in the training data. "Status information" gets pattern-matched to "colored dot," regardless of whether a label would communicate more. Ok, that's seven, but I'm sure there are more. What did I miss? ADP List has taken fire in the past for using conference talks in a paid course without notifying the speakers. Apparently, they decided the best way to handle that controversy was to make this fake post about someone leaking that course of stolen content. Talk about tone deaf. Source
Until next week, keep your AI off that purple. |
The Fountain Institute is an independent online school that teaches advanced UX & product skills.
The brief that keeps changing By Hannah Baker Dear Reader, There’s a particular kind of exhaustion I keep hearing about. It’s not burnout, exactly. It’s not being overworked. It’s something more specific, the feeling of being asked to plan something when the thing you’re planning for keeps shifting underneath you. I’ve been hearing it a lot lately. And more and more, it has AI somewhere in the middle of it. Here’s a version of a situation I keep encountering. Someone is working on two large...
OpenClaw Part 2: The 🦞 didn't replace Claude. It made me laugh instead. by Jeff Humble Dear Designer, In Part 1, I spent €590 on a Mac Mini, two days in Terminal, and $3.14 in API tokens I didn't mean to burn. I ended with a list of seven things I was going to automate with my OpenClaw agent 🦞. I only got to one of them. Getting an AI agent from zero to useful takes longer than any article will tell you. Most of the time since then has gone into figuring out how to make it reliable, not into...
The System You Can't See By Hannah Baker Dear Reader, Here's a question I get more than any other: "How do I handle the person who talks too much?" Or the flip side: "How do I get quiet people to speak up?" And every time, I want to say: you're asking the wrong question. Not because those moments aren't real or frustrating. They are. But because treating them as people problems is like looking at algae blooming in a pond and asking, "how do I fix the algae?" You don't. The algae isn't the...