How to make sure your vibe-coded project doesn't suck design-wise
The handful of decisions that separate a project that looks shipped from one that looks like a demo. Practical, visual, and opinionated.
AI coding tools are extraordinary at generating functional code. They're far weaker at generating considered design. The result is everywhere: a sea of projects that work but look slightly off — too much contrast in the wrong places, font sizes that don't scale, paddings that feel arbitrary.
This won't turn you into a designer. But it will stop the specific mistakes that make otherwise solid projects look unfinished. The decisions below are the ones with the highest ratio of polish-per-minute — start here, in this order.
Color and typography
Most design mistakes trace back to two things: too many colors and too many font sizes. The fix is restraint. Pick one accent color, define three text shades (primary, body, muted), and enforce a type scale of about four sizes. That's the entire system — and a small, consistent system reads as intentional in a way a large, ad-hoc one never will.
The three-shade rule
On a dark UI, one near-white for headings, one soft grey for body, one dim grey for metadata. If you're reaching for a fourth, you probably want a weight change, not a new color.
Layout and spacing
Inconsistent spacing is the single most common tell that a project was vibe-coded. The cure is a base unit. Use 4px or 8px for everything — padding, gap, margin — so every measurement is a multiple of one number. Arbitrary values like 13px or 17px are what make a layout feel subtly wrong even when nobody can point to why.
Consistency is cheaper than taste. You don't need a designer's eye if every number on the page is a multiple of four.
Component quality
A few components define the entire feel of a product: the primary button, the input, and the card. Get these three right and everything else inherits the quality. Get them wrong and no amount of polish elsewhere will save the impression.
- Button — 12–14px border-radius, 500–600 font-weight, generous horizontal padding (16px or more), an obvious hover and active state.
- Input — same border-radius as the button, a visible focus ring, comfortable height (40px+), placeholder text that's dimmer than typed text.
- Card — a subtle border instead of a hard drop shadow, consistent internal padding, a corner radius that matches the buttons inside it.
Mobile-first testing
Most vibe-coded projects are built and reviewed at desktop width, then quietly fall apart on a phone — where most of the traffic actually is. Catch it before anyone else does: open DevTools, set the viewport to 430×932 (iPhone 15 Pro), and scroll every page top to bottom.
What to look for at 430px
Text too small to read comfortably, tap targets under 44px or overlapping, content overflowing the viewport, and navigation that breaks below 480px. Fix these before you ship — not after a user reports them.
Design polish isn't about talent — it's about decisions made consistently. Lock the palette, enforce the spacing scale, sweat the three core components, and test at 430px. That's roughly 80% of the gap between "looks like a demo" and "looks like a product" — and every tool you need to close it is on the Radar.
Find these on the Radar
Every tool here lives on Kapyn Radar. Save the ones that fit into a Loadout and find them again.
