UI/UX Polish

Honestly, most AI-generated MVPs look like 2015 Bootstrap templates. Functionality works, but users close the tab after 3 seconds.

This isn't an aesthetics problem. It's a survival problem. You spent a week building something with AI, but if the interface is rough enough that nobody wants to click a second time, that week was wasted. Good news: turning a "works" interface into a "want to use" interface doesn't require design talent -- just a few mechanically executable rules.

---

The 3-Second Rule: Users Are Less Patient Than You Think

What's the 3-second rule? Users open your page and decide to stay or leave within 3 seconds. Not an exaggeration -- Google research data shows that when page load exceeds 3 seconds, 53% of mobile users leave immediately.

Think of it this way: you walk into a restaurant. If the entrance is dirty, messy, and dimly lit, you won't sit down and look at the menu, even if the chef is Michelin-level.

How to use this at work: Every time you finish a page, find someone who's never seen your product. Let them look at it for 3 seconds, then ask "what is this for?" If they can't answer, your first impression has a problem.

Most common mistake: Thinking "functionality is done, I'll polish UI later." Honestly, "later" never comes, because no users are willing to wait for "later."

---

Quick Wins: Make AI-Generated Interfaces Look Professional Instantly

No design skills needed. Follow these rules and results are immediate.

1. Consistent Spacing: 8px Grid System

We had a classic issue: AI-generated pages with button spacing sometimes 12px, sometimes 20px, sometimes 35px. It looked "wrong but you couldn't pinpoint why." Changed everything to 8px multiples and the entire page instantly looked like one person designed it.

Bottom line: don't use odd spacing. Don't use 5px, 13px, 27px. Tailwind CSS's spacing scale naturally uses 4px/8px multiples, so Tailwind users get this automatically.

2. Font Hierarchy: 3 Levels Maximum

/* This is enough, don't add more */
--font-heading: 24px / 700; /* Headings */
--font-body: 16px / 400; /* Body text */
--font-caption: 14px / 400; /* Secondary text */

The most common issue with AI-generated interfaces is font sizes everywhere -- 12px, 13px, 14px, 15px, 16px, 18px, 20px, 24px all used at once. Result: no hierarchy, users' eyes don't know where to look.

3. Colors: 2-3 Primary Colors, No More

Recommended tool: Coolors for generating color schemes. Pick one set and strictly only use those colors. Don't mix #3B82F6, #2563EB, #1D4ED8 -- three blues that look similar but muddy things up together.

4. Loading States and Micro-interactions

This is the single biggest line separating "demo-level" from "product-level."

// ❌ What AI generates by default
{
	data ? <List data={data} /> : null;
}

// ✅ With loading and empty states
{
	isLoading ? <Skeleton count={3} /> : null;
}
{
	!isLoading && data.length === 0 ? <EmptyState /> : null;
}
{
	!isLoading && data.length > 0 ? <List data={data} /> : null;
}

I've seen too many AI Builder projects where clicking a button gives zero feedback. Users don't know if it's loading or broken, so they click frantically, firing 5 requests. A single loading spinner solves 80% of "feels unreliable" problems.

---

The Right Way to Use AI Tools for UI Polish

Tool Selection

Screenshot -> Prompt Workflow (Most Practical)

This is my most-used method:

1. Screenshot your current interface
2. Send to Claude / ChatGPT: "This is my landing page. List 5 UI issues that most impact professionalism, with specific CSS fixes"
3. AI precisely identifies inconsistent spacing, insufficient contrast, buttons too small, etc.
4. Fix one by one

10x more effective than blindly asking AI to "make it prettier," because it's improving based on your actual interface, not imagining from scratch.

Cursor CSS Fix Prompt Template

Look at this component's code. Issues:
1. Inconsistent spacing between cards
2. Title and body font sizes too close
3. No hover feedback

Please modify CSS with requirements:
- Use 8px grid system
- Title 24px/700, body 16px/400
- Hover: add translateY(-2px) + box-shadow transition
- Keep existing Tailwind class style

---

Responsive Design: Mobile-First Isn't Just a Buzzword

Bottom line: get it right on mobile first, then fine-tune for desktop. Not the other way around.

We had a disaster: someone spent two days making the desktop layout beautiful, then checked mobile -- all cards squished together, buttons too small to tap, text overflowing. Reworking it took longer than starting from scratch.

Laziest approach: develop with browser width set to 375px (iPhone SE) the entire time. Make sure small screens look good first, then use @media (min-width: 768px) to add styles going up.

Don't say "it's done" before testing on a real device. Chrome DevTools' responsive mode and real devices differ significantly, especially for touch interactions and safe areas.

---

Dark Mode: Either Do It Right or Don't Do It

Half-baked dark mode is worse than no dark mode. White text on dark gray background, but some components still have white backgrounds -- that experience is worse than pure light mode.

If you're going to do it, laziest approach:

:root {
	--bg: #ffffff;
	--text: #1a1a1a;
	--card: #f9fafb;
	--border: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0a0a0a;
		--text: #ededed;
		--card: #1a1a1a;
		--border: #2d2d2d;
	}
}

All components reference CSS variables only, and switching is automatic. But honestly, for an MVP, not doing dark mode is totally fine. Get light mode right first.

---

5 Common Problems with AI-Generated Interfaces (With Fixes)

---

Quick Accessibility Check

These need zero specialized knowledge, take 5 minutes to fix, but have massive impact:

• Text contrast ratio >= 4.5:1 (test with WebAIM Contrast Checker)
• Body text >= 16px (don't use 12px 14px for body text)
• Clickable areas >= 44x44px (fingers can actually tap)
• Images have alt attributes
• Form inputs have labels
• Don't rely solely on color to convey info (colorblind users can't see red/green differences)

---

Tool List

---

Practical Checklist: Fix These 10 Things and Your Interface Is Presentable

• All spacing in multiples of 8
• Only 3 font levels (heading, body, secondary)
• No more than 3 primary colors
• Every button has a hover effect
• Data loading has a loading state
• Empty lists have an empty state
• Failed operations have an error state
• Tested on mobile (375px width)
• Text contrast passes check
• Clickable areas are large enough (44px+)

Don't try to nail everything at once. Pass this checklist and your interface already beats 80% of AI Builder projects. The remaining 20% is taste, and that takes time.