Stop Vibe Coding Your UI. Start Directing It.
I'm a frontend dev with taste and no design degree. I can feel when spacing is off, tell when a font pairing is wrong, and recognize good design before I can explain why.
What I couldn't do was produce it — until AI tools arrived. Then the problem got worse.
Everyone started shipping fast. Everything started looking the same: purple gradients, Inter font, the same tired defaults with no soul. AI slop with a deploy button.
The problem was never skill. It was mindset.
The Real Problem Isn't Tools. It's Who's In Charge.
When you hand a design task to AI and say "make it look good," you've abdicated creative direction. The AI fills the vacuum with the statistical average of everything it's seen — which is, by definition, generic.
The mindset shift: you are not the coder anymore. You are the design director.
A design director doesn't push pixels. They set the vision, maintain the standard, and reject work that doesn't meet the bar. They know why something feels off, even if they can't execute it themselves.
This isn't a consolation prize for not being a designer. It's the more powerful position — because you can also ship the code.
What "Good Design Taste" Actually Means
Here are the four things your eye is already noticing — you just haven't named them yet.
1. Hierarchy — Every screen tells a story. Hierarchy makes the priority obvious through size, weight, contrast, and position. Ask yourself: "What's the most important thing here? Is it obviously the most important?"
2. Spacing — Amateurs compress. Professionals breathe. A component that feels "cheap" almost always just needs more padding. When in doubt, double the spacing you think you need.
3. Contrast and Color — Pick one dominant color, one accent, and use neutrals for everything else. Commit fully. Timid palettes produce bland results. Low contrast reads as unfinished.
4. Motion and Restraint — The most common AI-generated UI mistake is motion slapped everywhere. Good motion is purposeful. One thing moving beautifully beats ten things moving for no reason.
Practice noticing these in apps you already use. Your taste is already there — you're training yourself to trust it.
The Stack That Changed How I Build
Each tool in this workflow has a specific job.
🔹 Google Stitch 2.0 — Design Before You Code
Make design decisions before they become engineering decisions. Generate a visual reference first. The point is to answer "what should this look like?" before you're committed to code.
🔹 Refero — Study Real Products, Not Inspiration Boards
Dribbble is full of beautiful things that don't work. Refero shows you real production UI from products people actually use. Study how professionals solved the same problem. This is what designers do — now you do it too.
🔹 shadcn/ui — Your Default Design Language
Built on Radix, shadcn/ui gives you a component system you own. Not a library you install and pray — code you copy into your project and control. The sensible baseline you deviate from intentionally.
🔹 21st.dev — Where Polish Comes From
Think of it as npm for design engineers. A community registry of React/Tailwind components — 3D elements, animated cards, subtle effects that would take hours to build. It integrates directly with Claude Code via its Magic MCP, so you're not prompting into the void. You're pulling from a curated design vocabulary.
🔹 Impeccable — Designer Vocabulary for Your AI
Impeccable is an enhanced frontend-design skill that ships 20 design commands directly into Claude Code: /polish, /audit, /typeset, /overdrive, and more. The problem it solves is precise — you can't ask for "more vertical rhythm" if you've never used those words. Impeccable puts that language in your hands. One install command, and you're prompting like a designer.
npx skills add pbakaus/impeccable
🔹 Claude Code + Frontend-Design Skill — Your Execution Engine
Claude Code is where everything comes together. With Impeccable installed, you're not just prompting — you're directing with a full design vocabulary. /audit scores your UI across dimensions with severity ratings. /overdrive pushes technically extraordinary effects. /critique tests against real usability heuristics. The gap between slop and quality closes fast.
How to Give Claude Design Direction (Not Just Instructions)
There's a spectrum of prompts. On one end: "make a dashboard." On the other: design direction.
Design direction sounds like this:
Build a settings page. Aesthetic: refined and minimal — think Linear, not Notion. Monospace font for labels. Spacing generous, almost uncomfortable. One accent color only — muted amber. No gradients, no shadows. Intentional and slightly austere.
You just gave Claude a point of view. Now it can execute instead of guess.
A few principles:
- Name a reference product. "Like Linear" or "like Vercel's docs" tells Claude more than any adjective.
- Describe the feeling, not just the look. "It should feel like a premium tool that respects the user's time" is surprisingly useful.
- Reject with specifics. Don't say "make it better." Say "the spacing is too tight, the font is too generic, I want more personality in the headers."
- Use design language. Hierarchy. Contrast. Restraint. These words mean something specific to Claude in design context.
The Quality Bar: How to Know Before You Ship
Before anything goes live, run through these:
- Where does my eye land first? Is that the right thing?
- What's the worst-looking part? Fix that one thing.
- Does any motion feel nervous or excessive? Kill it.
- Would I screenshot this and send it to someone? If not, why not?
- Does it feel like it was made by someone who cared, or generated?
That last question is the one that matters. Users can't always articulate why something feels cheap — but they feel it. The difference is almost always a handful of considered decisions, not hours of extra work.
You Already Have What It Takes
The developer who feels design but hasn't formalized it is in a better position than they think. You feel the wrongness before you can name it. You're already doing the hard part — the perception.
The rest is vocabulary, workflow, and deciding that quality is your job.
Stop generating slop. Start directing.
Top comments (0)