How to make sure your vibe-coded project doesn't suck design-wise

AI coding tools are incredible at generating functional code. They're less good at generating considered design. The result: 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 checklist covers the decisions that matter most. It won't turn you into a designer, but it will stop the common mistakes that make otherwise solid projects look unpolished.

Color and typography

Most design mistakes come from too many colors and too many font sizes. Pick one accent color, define three text shades, and enforce a type scale of four sizes. That's the whole system. The decision tree below shows the right order to make these calls.

Realtime ColorsVisualize a full color palette live on a sample UI before committing to it.realtimecolors.comFontpairCurated font pairings that actually work — see them together before picking.fontpair.coType ScaleGenerate a modular type scale from a base size and ratio — copy the CSS vars.typescale.comRadix Colors12-step accessible color scales, dark mode included — drop into any design system.radix-ui.com

Layout and spacing

Inconsistent spacing is the most common tell that a project was vibe-coded. Use a 4px or 8px base unit for everything — padding, gap, margin. Never use arbitrary values like 13px or 17px. On mobile (430px), check that tap targets are at least 44px tall.

Tailwind CSSUtility-first CSS with a built-in 4px spacing scale — makes consistent spacing automatic.tailwindcss.comEvery LayoutCSS layout primitives (Stack, Sidebar, Grid) that work at every viewport size.every-layout.dev

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 the rest follows. For the button: 12-14px border-radius, 500-600 font-weight, enough horizontal padding (16px+). For cards: subtle border, no hard drop shadow.

shadcn/uiCopy-paste components built on Radix — you own the code, you control the style.ui.shadcn.comRadix UIUnstyled accessible primitives — the behavior is correct, the look is yours to define.radix-ui.comLucide ReactClean, consistent icon set — 1000+ icons that all feel like they belong together.lucide.dev

Mobile-first testing

Open DevTools, set the viewport to 430×932 (iPhone 15 Pro), and scroll every page top to bottom. Look for: text that's too small to read, tap targets that overlap, content that overflows the viewport, and navigation that breaks below 480px. Fix these before you ship.

PolypaneBrowser for developers — test multiple viewports simultaneously, inspect spacing visually.polypane.appBrowserStackReal device testing across 3000+ device/browser combinations — catch what DevTools misses.browserstack.comStorybookBuild and test UI components in isolation — see every state, every viewport, every theme.storybook.js.org

Design polish isn't about talent — it's about decisions made consistently. Fix the spacing scale, lock down the color palette, and test at 430px. That's 80% of the gap between 'looks like a demo' and 'looks like a product'.