10 Ways to Prevent AI Slop in Your Frontend UIs

As a software team of one at ProBLD, I lean on AI tools (mainly Codex, Claude Code, Cursor, etc) to help me quickly iterate on product designs and features. AI can spit out some pretty horrible designs, sure, but programmers have a habit of throwing the baby out with the bathwater. That daunting feeling that you get when looking at a blank page and trying to figure out what should go on it has almost completely gone away for me. You can throw a bunch of clay at the wall (I'll often test several agents with several prompts against the same basic idea) then refine that back into something that's actually good myself. Of course you need to know HOW to dial back the bad parts and amplify the good parts, but with just a tiny bit of design knowledge and the ability to understand WHY something looks like "AI slop", you will see much better results than you'll tend to get by just crossing your fingers and hoping for a good result. Sharing 10 tips for helping you steer your AI UIs in the right direction. Would love to hear if any of you guys could add to this list 🤔 ✨ Animated UI components for React, Tailwind CSS, Framer Motion & More https://www.hover.dev 📚 Video Links Refactoring UI: https://refactoringui.com/ 🔗 My Links TikTok:   / tomisloading   LinkedIn:   / thomas-hessburg   Instagram:   / tomisloading   GitHub: https://github.com/TomIsLoading X: https://x.com/TomIsLoading Portfolio templates: https://tomisloading.gumroad.com/ Website: https://www.hover.dev Timeline: 0:00 - Introduction 1:05 - You might not need a card 3:06 - It's okay to hide functionality 5:14 - You might not need a border 7:08 - Your UI is too distracting 8:59 - Tabs aren't the only form of navigation 10:15 - You might not need a subheading 11:02 - Design before you implement 13:05 - Try different models 14:22 - Don't just take what AI gives you 15:45 - Learn the basics of UI design