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.
Design's Obituary, the Shielding Problem, and the Future of Human Computing? Dear Reader, Halloween is around the corner, and some people are already carving R.I.P. on design's tombstone. Before you start looking for a black suit, get caught up on the last two weeks. Buckle up, there's going to be some ups and downs! Will design be the first AI casualty? Created with FLUX.1 Krea [dev] Figma Investor Gokul Rajaram posted "DESIGN: THE FIRST AI CASUALTY" on X, and it's up to 767K views. He...
Slop Grenades, a Warming UX Job Market, and the New Bar for Designers Dear Reader, It's officially autumn, and the air is crisp with the sound of falling design career norms. Here's what you need to know from the last two weeks... How to turn your AI into a world-class designer Source In this guest post for Lenny's Newsletter, Anshu Chimala really shared the sauce on how to get AI to do the kind of high-end web design that could only previously be done by someone with a septum piercing and...
5 Ways to Stay Ahead of AI + Recording for "Upstream of the Machine" Dear Reader, Last night we had a fun little event called Upstream of the Machine. In the talk, I shared 5 strategies that designers can use to stay ahead of AI. Each one is inspired by design-adjacent roles where designers can potentially have an edge. You should be able to find at least one strategy that fits you. The Five Strategies Work the infrastructure — like a service designer Generate evidence — like a scientist...