Your Vibe-Coded App Looks Ugly. Here's What I Did About It.

Again. Not pretty.

I asked Claude Code to build a dashboard. It worked perfectly. And it looked like a hackathon project.

Card spacing was random. Typography had no hierarchy. Colors were everywhere. The whole thing felt... off.

I tried "make it more professional." Didn't help. Tried "like the Toss app." Slightly better, but still amateur.

The problem wasn't the AI. The AI makes great components. It just can't make design decisions.

What I Mean

Open the Toss app (Korea's biggest fintech) and look closely. Every screen feels the same. Not boring-same — cohesive-same. I spent a while figuring out why.

There are rules.

The darkest black isn't #000. It's #2A2A2A. Tiny difference. But that's the gap between "harsh" and "refined."

There's exactly one accent color in the entire app. One. Everything else is grayscale. Restraint is what makes it feel expensive.

Card shadows? 4% opacity. If you can see the shadow, it's already too much.

Numbers at 48px, units at 24px. Always 2:1. Your eye hits the number first.

Designers make these calls instinctively. Years of experience. But here's the thing — if you write them down, AI can follow them too.

So I Wrote Them Down

I was building my own app and got tired of fixing ugly AI output. Started asking myself "why does this look bad?" for every screen. Patterns emerged. Same mistakes, every time.

So I documented the judgment calls a designer would make. Ended up with 69 rules.

Like:

Never use the same card layout twice in a row. Hero, then grid, then chart, then list. There needs to be rhythm.

When you make 4 KPI cards, don't make them identical. Two with trend arrows, one with a progress bar, one with comparison text. Variation keeps it from feeling robotic.

As you scroll down, text gets smaller and information gets denser. Hero is one big 48px number. Bottom of the page is 14px detail rows. Natural zoom-in effect.

I packaged these rules so AI could read them.

Engine + Skins

The structure is kind of fun.

styleseed/
├── engine/    ← Design brain (69 rules, 48 components, 11 AI skills)
└── skins/     ← Brand colors (Toss, Stripe, Linear, Vercel, Notion...)

The engine knows how to structure your app. Layout, typography ratios, card structure, visual rhythm, forbidden patterns. Doesn't care what brand you are.

A skin is one CSS file. --brand: #533afd makes it Stripe. --brand: #721FE5 makes it Toss. Change one variable, whole UI follows.

awesome-design-md has 58 brand identities you can grab as skins.

How I Actually Use It

Step 1. Copy the engine.

cp -r styleseed/engine/* my-project/
cp -r styleseed/engine/css/* my-project/src/styles/

Step 2. Pick a skin.

cp styleseed/skins/stripe/theme.css my-project/src/styles/theme.css

Or run /ui-setup and it walks you through everything — app type, colors, font, generates your first page.

Step 3. Build.

Build me a SaaS dashboard.

AI reads CLAUDE.md automatically. Follows the 69 rules. Lays out hero card, KPI grid, chart section, activity list in information-pyramid order.

But it doesn't stop there.

/ux-audit src/Dashboard.tsx    # Nielsen's heuristics check
/ux-copy "dashboard"           # Auto-generate button labels, error messages
/ux-feedback src/Dashboard.tsx  # Add loading/error/empty states
/ui-review src/Dashboard.tsx    # Design compliance check

Four commands that do what a designer + UX researcher would do. Felt like cheating, honestly.

Why It Feels Cohesive

Why does the Toss app feel like "one app" no matter what screen you're on?

Because one team's consistent judgment is applied everywhere. "This spacing is 24px." "Don't use that color." "Numbers are this size." Same rules, every screen, every time.

StyleSeed is those rules, written as 69 lines of design judgment. AI reads them. Every page it builds follows the same standard.

Swap the skin — Stripe, Vercel, whatever — the structure stays consistent. Same engine.

Honestly

It's not perfect. Mobile-only (430px) for now. Desktop layouts need separate work. Charts need manual Recharts setup. I'm still adding rules and refining.

But the difference between before and after is obvious. "It looks bad but I don't know how to fix it" turned into "it just comes out clean."

No designer. Five minutes of setup.

Star on GitHub

MIT open source. Built for my own app, sharing because it might save you the same headache.