ui-ux-pro-max

UI/UX Pro Max

Expert UI/UX design and implementation skills.

Core: "Do everything properly" is the hallmark of AI-generated design. "What to discard" is design.

Coverage

• Landing page design
• Dashboard UI
• SaaS products
• Mobile apps (responsive)

---

Action Principles (5 Iron Rules)

1. Question before building

• Ask every element: "Is this really needed?"
• If the answer is unclear, build without it first.

2. Pick one hero

• For each section, decide on exactly one element to highlight.
• Do not write code until you have decided.

3. Don't line up 70-point elements

• All elements with equal presence = failure.
• Make one element 120 points, the rest 60 points.

4. Say "let's drop it" rather than "we can"

• Propose removal over addition.
• When in doubt, cut.

5. Criticize before building

• List at least three problems with the current state before proposing improvements.
• "Looks good" is forbidden.

---

Avoiding AI-Generated Look

What NOT to do

• All elements with equal presence (uniform spacing, safe colors)
• Absence of decisions ("either A or B, whichever you prefer")
• Excessive decoration (meaningless gradients, animations)

"Looks good" is forbidden

• Even after completion, add "If there is room for improvement..."
• When asked to decide, decide (recommend one with justification).

---

Premium Design Formula

Premium = (Image quality × Size) + (Whitespace) - (Decoration)

Three pillars:

1. Large images - Image occupies 70-85% of card area
2. Bold whitespace - 112px+ between sections
3. Restraint - Every effect must have a reason

Reference brands: Spitfire Audio, Native Instruments, iZotope

---

Image Guidelines

Context	Image Size	Aspect Ratio
Product card	70-85% of card area	16:9 or 4:3
Hero section	Full viewport width	Variable
Gallery grid	Uniform height, variable width	Mixed

Image handling:

• Image is the hero of the content
• Text is minimal (name + one-line description)
• Do not overlay feature lists on images
• Use high-quality screenshots/renders

---

Spacing Tokens

Token	Value	Usage
--space-section	112px	Between sections
--space-group	64px	Between related content
--space-element	24px	Between elements

Section padding:

/* Premium section */
padding-top: 112px;    /* py-28 */
padding-bottom: 112px;

/* Compact section */
padding-top: 64px;     /* py-16 */
padding-bottom: 64px;

Tailwind equivalent:

// Premium section
<section className="py-28">...</section>

// Compact section
<section className="py-16">...</section>

---

Grid System

Columns	Usage	Gap
4 columns	Product showcase	24px (gap-6)
3 columns	Feature cards, pricing	32px (gap-8)
2 columns	Hero, comparison	48px (gap-12)

---

Visual Hierarchy Checklist

Before starting

• [ ] Have you articulated "What is the hero of this section?"
• [ ] Have you considered "Is there any element that can be removed?"
• [ ] Can you explain "Why this color?"

During work

• [ ] Are all elements equally prominent?
• [ ] Is the eye flow intentional?
• [ ] Does the background distract from the content?

Before completion

• [ ] On mobile, can you tell within 3 seconds what to do?
• [ ] Is there any cause of "AI-generated look"?
• [ ] Are there elements you think "could have been removed"?

---

CRITICAL: Accessibility First

This section is top priority. Prioritize accessibility over design beauty.

WCAG 2.1 Contrast Requirements

Text Size	Minimum Contrast Ratio
Normal text (< 18px)	4.5:1
Large text (≥ 18px bold / ≥ 24px)	3:1
UI components, icons	3:1

Required: Use project's globals.css

Do not use Tailwind default colors directly. Prefer tokens defined in the project's globals.css.

// NG: Using Tailwind defaults directly
<p className="text-slate-400">...</p>
<p className="text-slate-500">...</p>

// OK: Using project tokens
<p className="text-muted">...</p>
<p className="text-subtle">...</p>

Always check app/globals.css before implementation to know the defined tokens.

Badge/Tag Contrast

Similar color combinations are dangerous:

// NG: Similar colors, insufficient contrast
<span className="bg-indigo-600/20 text-indigo-400">Badge</span>
<span className="bg-amber-500/20 text-amber-400">In Development</span>

// OK: Sufficient contrast
<span className="bg-indigo-600/30 text-indigo-300">Badge</span>
<span className="bg-amber-600/30 text-amber-200">In Development</span>

Disabled State Text

// NG: Too light, insufficient contrast
<button className="text-white/50" disabled>...</button>

// OK: Readable even when disabled
<button className="text-white/70" disabled>...</button>

---

Multilingual Typography

Why needed: Japanese text at the same font size appears visually heavier than English (due to more strokes). At the same size, Japanese looks cramped and heavy, so reduce by one step for visual balance.

Typography Tokens (defined in globals.css)

Token	Usage	English (Desktop)	Japanese (Desktop)
.text-hero	Landing page main title	96px	80px
.text-section	Section heading (h2)	48px	40px
.text-headline	Feature title, product heading	30px	24px
.text-subhead	Tagline, lead text	24px	20px

Usage

// NG: Direct Tailwind specification (no language adjustment)
<h1 className="text-5xl md:text-8xl font-bold">...</h1>

// OK: Using tokens (automatic language support)
<h1 className="text-hero text-white">...</h1>

Responsive

Tokens include responsive sizes for mobile, tablet, and desktop. No additional breakpoint specification needed.

// NG: Redundant breakpoint specification
<h1 className="text-hero sm:text-hero md:text-hero">...</h1>

// OK: Token only
<h1 className="text-hero">...</h1>

Applicable targets

• Landing page headings (h1, h2)
• Section titles
• Product names, feature names
• Taglines, lead text

Note: Do not apply to body text (long paragraphs in p elements). Use normal styles like text-white/80 for body text.

---

Design Token Compliance Rules

Principle: Do not use Tailwind default values directly; use design tokens defined in globals.css.

Border Radius

Token	Value	Usage
--radius-sm	8px	Small badges, tags
--radius-md	12px	Buttons, input fields
--radius-lg	16px	Cards, modals
--radius-full	999px	Pill buttons, avatars

// NG: Direct Tailwind specification
<button className="rounded-lg">...</button>
<div className="rounded-xl">...</div>

// OK: Using tokens
<button className="rounded-[var(--radius-md)]">...</button>
<div className="rounded-[var(--radius-lg)]">...</div>

Colors

// NG: Using Tailwind colors directly
<p className="text-slate-400">...</p>
<div className="bg-gray-900">...</div>

// OK: Using project tokens
<p className="text-muted">...</p>
<div className="bg-muted-bg">...</div>

Token Violation Check

After implementation, check for violations:

# Search for direct Tailwind border-radius specifications
grep -r "rounded-sm\|rounded-md\|rounded-lg\|rounded-xl\|rounded-2xl" components/

# Search for direct Tailwind color specifications
grep -r "bg-slate-\|bg-gray-\|text-slate-\|text-gray-" components/

Replace any detected ones with tokens.

---

Button Styles

Primary CTA (default: white-based)

<button className="bg-white text-black px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/90 transition-colors cursor-pointer">
  Download Now
</button>

Secondary (outline only)

<button className="border-2 border-white text-white px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/10 transition-colors cursor-pointer">
  Learn More
</button>

Brand-specific (limited use)

Conditions for using colored buttons:

• Only in brand-specific sections (e.g., MUEDear amber)
• Maximum 1-2 per page
• Not the default

// For MUEDear: amber
<button className="border-2 border-amber-500 text-amber-400 hover:bg-amber-500 hover:text-white ...">
  Download App
</button>

Disabled

<button className="bg-white/5 text-white/70 cursor-not-allowed" disabled>
  Disabled
</button>

---

Background Styles

Backgrounds to use

// Premium: solid color only
<section className="bg-black">...</section>
<section className="bg-[#0f0f0f]">...</section>
<section className="bg-white">...</section>

Decorations to avoid

Pattern	Problem	Alternative
Floating glow orbs	Distracting	Remove
bg-gradient-to-b from-violet-900/20	Decorative noise	Solid color
Grain texture	Unnecessary complexity	Remove
Animated backgrounds	Performance degradation	Static

---

Card Styles

Image-centric card (default)

<div className="bg-[#0f0f0f] rounded-[var(--radius-lg)] overflow-hidden">
  {/* Image: 70-85% of card */}
  <div className="aspect-video">
    <Image src="..." alt="..." fill className="object-cover" />
  </div>
  {/* Text: minimal */}
  <div className="p-6">
    <h3 className="text-white text-lg font-medium">Product Name</h3>
    <p className="text-white/60 text-sm">One-line description</p>
  </div>
</div>

Glass Card (limited use)

Note: Glassmorphism should only be used in specific contexts (pricing tables, feature comparisons). Not the default.

<div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-[var(--radius-lg)] p-6">
  <h3 className="text-white font-semibold">Title</h3>
  <p className="text-white/80">Description</p>
</div>

Glass Card usage notes:

• Text must be text-white or text-white/80 or higher
• Do not use text-slate-* or text-gray-*
• Contrast calculation is complex due to semi-transparent background

---

Instruction Escalation Protocol

Adjust response level based on user's expression:

User's Expression	Interpretation	Required Response
"Spitfire level" "Native Instruments level"	Full visual overhaul	Complete redesign, not minor tweaks
"More premium"	Substantial changes	Remove effects, increase whitespace
"Cleaner"	Moderate cleanup	Remove 30% of decorative elements
"Adjust" "Tweak"	Minor fixes	CSS changes only

Important rule: If a reference brand is named, compare the current implementation to that brand before proposing.

---

Implementation Checklist

Pre-implementation check

• [ ] Do we have high-quality product screenshots?
• [ ] Can we reduce text by 50%?
• [ ] Have we checked the desired aesthetic standard?
• [ ] Are we matching that level of restraint?

During implementation check

Question	Action if "No"
Section padding >= 100px?	Increase to py-28 or more
Image occupies >= 60% of card area?	Enlarge image
Buttons white or outline only?	Change from colored
Background solid (no gradient)?	Remove decorative elements

Post-implementation check

1. Squint test: Squint your eyes. Can you identify the product? If effects dominate, reduce.
2. "Remove one" test: Remove one element from each section. Does it still work? If yes, it was unnecessary.
3. Spitfire comparison: Place screenshot next to Spitfire.com. Is the visual "weight" similar?

---

Patterns to Avoid (Explicit Prohibition List)

"Claude defaults to safe choices" - Without explicit prohibition, it converges to generic choices.

Backgrounds & Decorations

Prohibited Pattern	Problem	Alternative
Overuse of bg-white/5 backdrop-blur-xl	"2023 template" feel	bg-black or bg-[#0f0f0f]
bg-gradient-to-b from-violet-900/20	Decorative noise	Remove
bg-gradient-to-br from-indigo-500/10	Same as above	Remove
Animated blob backgrounds	Distracting, performance degradation	Static, solid color
Grain texture (noise.svg)	Unnecessary complexity	Remove
Floating glow orbs	Early 2020s trend	Remove

Shadows & Glows

Prohibited Pattern	Problem	Alternative
shadow-lg shadow-indigo-500/20	Artificial "pop"	No shadow or shadow-sm shadow-black/20
shadow-xl shadow-violet-500/30	Same as above	Same as above
shadow-2xl shadow-amber-500/25	Same as above	Same as above
hover:shadow-*-500/40	Glow emphasis on hover	Subtle like hover:bg-white/10
drop-shadow-[0_0_*px_rgba()]	Custom glow	Remove

Layout

Prohibited Pattern	Problem	Alternative
3-column feature grid with icons	Generic SaaS design	Large image + minimal text
Equal 3-column cards (same size)	"All equal presence"	Make one large, others small
Section spacing below py-12	Cramped	py-28 (112px) or more
Everything centered	Too safe	Consider left-aligned or asymmetric

Components

Prohibited Pattern	Problem	Alternative
hover:scale-105 + hover:shadow-*	Excessive hover effects	Only hover:bg-white/10
transition-all duration-300	Heavy, unpredictable	transition-colors duration-200
group-hover:translate-x-2 arrow	Common pattern	Remove or translate-x-1
Colored CTA button (default use)	AI safe choice	White background or white outline

Animations

Prohibited Pattern	Problem	Alternative
Scattered micro-interactions	No unity	Focus on one page-load animation
Overuse of animate-pulse	Distracting	Remove or use in only one place
Constant animate-bounce	Same as above	Only on user action
Simultaneous animations of multiple elements	Chaos	Use staggered delays

Colors (AI Safe Choices)

Prohibited Pattern	Problem	Alternative
Purple gradient on white background	Most generic AI choice	Solid dark color
from-violet-600 to-indigo-600	Same as above	Remove
text-indigo-400 as default	Overuse of brand color	text-white or text-white/80
Similar-color badges (indigo on indigo)	Insufficient contrast	White background + black text

---

Icons

• Library: Lucide Icons
• Prohibited: Do not use emoji as icons

import { Music, Brain, Sparkles, Check, X } from 'lucide-react';

---

Responsive Breakpoints

/* Mobile first */
/* sm: 640px */
/* md: 768px */
/* lg: 1024px */
/* xl: 1280px */
/* 2xl: 1536px */

Screen widths to verify:

• 320px (smallest mobile)
• 768px (tablet)
• 1024px (desktop)
• 1440px (large screen)

---

Pre-Delivery Checklist

• [ ] Lighthouse Accessibility 100% (most important)
• [ ] Use project's globals.css tokens
• [ ] Is image the hero?
• [ ] Section spacing >= 112px (py-28)
• [ ] Buttons white/outline based?
• [ ] Background solid color?
• [ ] No emoji icons (use Lucide)
• [ ] Dark mode support
• [ ] cursor-pointer on clickables
• [ ] Responsive
• [ ] Performance optimized (images, animations)

---

Contrast Verification Method

After implementation, always check accessibility with Lighthouse:

# Local check
npm run dev
lighthouse http://localhost:3000 --only-categories=accessibility --view

# Detailed failure check
lighthouse http://localhost:3000 --only-categories=accessibility --output=json | jq '.audits["color-contrast"]'

Goal: Lighthouse Accessibility Score 100%