Skip to content
Matthew Blode
Writing
AI-assisted engineering2 min read

It's obvious when you vibe coded your app, but it doesn't have to be

Everyone can tell when you vibe coded your app. Default shadcn, Lucide icons, Inter, glowing gradient borders. It screams that you shipped [the first thing the prompt gave you](/writing/ai-can-code-but-it-cant-design). It doesn't have to be that way.

Based on my January 2026 Melbourne builder meetup talk about using AI tools without sacrificing product quality.

I build with shadcn/ui, Tailwind, Motion, React, and Ultracite. So does everyone else, on the same defaults. The taste I layer on top is the advantage.

Stealing from tasteful products

I find a product with an irrationally tasteful UI and copy it. Right click, inspect, rip off elements until my version is identical. Screen record the interactions and step through them frame by frame. When the motion is doing something I can’t see, I point AI at their minified JS bundle to un-minify it and read the animation logic.

The ones worth stealing from are the calm products rather than the feature-stuffed ones: Zed Editor, OpenAI, Mintlify, Raycast, Linear, Things 3, Family Crypto Wallet, ElevenLabs. They show only what matters and their interactions feel precise.

I’m training my eye on the gold standard, then pointing it at my own product.

Icons, type, and motion

AI goes rogue on decoration: glowing borders, gradients, illustrations, badges, tooltips, seventeen things nobody asked for. I delete most of it. If a paragraph can be a sentence, I make it a sentence. If a sentence can be a label, I make it a label. If a label can be removed, I remove it.

What’s left is where the defaults show. Lucide is fine for prototyping but too light to carry a polished product, so I use Central: considered strokes, tighter proportions. People feel icon quality without being able to name it. Default Google Fonts are typographic stock photography, and Inter on everything is the same tell. Everyone recognises them, and they say nobody made a choice. I find a typeface that suits the product on Typewolf and track it down, because plenty of great fonts live on GitHub. If the family ships as separate static weights, I convert it into one variable font and load a single file.

Typography is one of the highest-impact things I can change, and engineering-led teams almost always underinvest in it.

Motion is the other one. motion.dev for the library, animations.dev and devouringdetails.com for the eye. I keep most transitions between 0.2 and 0.3 seconds, prefer ease-out, animate transforms and opacity, respect prefers-reduced-motion. They should feel responsive, not try to impress.

The last ten percent

Then there are the details nobody asks for, where I used to stop. A dark mode-aware SVG favicon that adapts to the system. Dynamic OG images so every page has a proper social preview. Polished hover and active states on every interactive element. Proper SEO metadata per page: title, description, canonical URL. Keyboard shortcuts for power users.

None are hard alone. Together they’ve separated my weekend projects from the ones that feel cared for.

After that comes the five hundred small improvements that have no list. Sand it, feel the grain, get a splinter, sand again.

Get new posts by email

New writing on shipping with AI agents, sent when it is published. Nothing else, and you can leave any time.