UI/UX Pro Max - Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 50+ styles, 97 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 technology stacks. Searchable database with priority-based recommendations.

When to Apply

Reference these guidelines when:

Designing new UI components or pages
Choosing color palettes and typography
Reviewing code for UX issues
Building landing pages or dashboards
Implementing accessibility requirements

Rule Categories by Priority

Priority	Category	Impact	Domain
1	Accessibility	CRITICAL	`ux`
2	Touch & Interaction	CRITICAL	`ux`
3	Performance	HIGH	`ux`
4	Layout & Responsive	HIGH	`ux`
5	Typography & Color	MEDIUM	`typography`, `color`
6	Animation	MEDIUM	`ux`
7	Style Selection	MEDIUM	`style`, `product`
8	Charts & Data	LOW	`chart`

Quick Reference

1. Accessibility (CRITICAL)

color-contrast - Minimum 4.5:1 ratio for normal text
focus-states - Visible focus rings on interactive elements
alt-text - Descriptive alt text for meaningful images
aria-labels - aria-label for icon-only buttons
keyboard-nav - Tab order matches visual order
form-labels - Use label with for attribute

2. Touch & Interaction (CRITICAL)

touch-target-size - Minimum 44x44px touch targets
hover-vs-tap - Use click/tap for primary interactions
loading-buttons - Disable button during async operations
error-feedback - Clear error messages near problem
cursor-pointer - Add cursor-pointer to clickable elements

3. Performance (HIGH)

image-optimization - Use WebP, srcset, lazy loading
reduced-motion - Check prefers-reduced-motion
content-jumping - Reserve space for async content

4. Layout & Responsive (HIGH)

viewport-meta - width=device-width initial-scale=1
readable-font-size - Minimum 16px body text on mobile
horizontal-scroll - Ensure content fits viewport width
z-index-management - Define z-index scale (10, 20, 30, 50)

5. Typography & Color (MEDIUM)

line-height - Use 1.5-1.75 for body text
line-length - Limit to 65-75 characters per line
font-pairing - Match heading/body font personalities

6. Animation (MEDIUM)

duration-timing - Use 150-300ms for micro-interactions
transform-performance - Use transform/opacity, not width/height
loading-states - Skeleton screens or spinners

7. Style Selection (MEDIUM)

style-match - Match style to product type
consistency - Use same style across all pages
no-emoji-icons - Use SVG icons, not emojis

8. Charts & Data (LOW)

chart-type - Match chart type to data type
color-guidance - Use accessible color palettes
data-table - Provide table alternative for accessibility

How to Use This Skill

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

Step 1: Analyze User Requirements

Extract key information from user request:

Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
Style keywords: minimal, playful, professional, elegant, dark mode, etc.
Industry: healthcare, fintech, gaming, education, etc.
Stack: React, Vue, Next.js, or default to html-tailwind

Step 2: Design System 생성

위 Quick Reference와 아래 데이터를 기반으로 디자인 시스템을 직접 구성합니다:

스타일 선택: 제품 유형 + 산업에 맞는 스타일 (glassmorphism, minimalism, brutalism 등)
색상 팔레트: 산업별 추천 팔레트 매칭
타이포그래피: 스타일에 맞는 폰트 페어링 선택
레이아웃 패턴: 제품 유형에 맞는 레이아웃 구조

산업별 스타일 매칭

산업	추천 스타일	색상 톤	폰트 성격
SaaS/Tech	Minimalism, Flat Design	Blue/Purple 계열	Geometric Sans (Inter, Geist)
E-commerce	Clean, Card-based	Warm neutral	Readable (Plus Jakarta Sans)
Healthcare	Soft, Trustworthy	Green/Teal 계열	Humanist Sans (Source Sans)
Fintech	Professional, Data-rich	Navy/Gold 계열	Monospace accent (JetBrains Mono)
Beauty/Wellness	Elegant, Soft	Rose/Sage 계열	Serif accent (Playfair Display)
Gaming	Dark, Vibrant	Neon/Dark 계열	Display (Orbitron, Rajdhani)
Education	Friendly, Accessible	Bright primary	Rounded (Nunito, Quicksand)
Portfolio	Expressive, Unique	Monochrome + accent	Display mix

폰트 페어링 (Google Fonts)

조합	Heading	Body	분위기
Modern Pro	Inter	Inter	깔끔, 프로페셔널
Elegant	Playfair Display	Lato	고급, 세련
Friendly	Poppins	Open Sans	친근, 접근성
Bold	Montserrat	Roboto	강렬, 임팩트
Creative	Space Grotesk	DM Sans	창의적, 모던
Luxury	Cormorant Garamond	Raleway	럭셔리, 우아

Step 3: Stack별 가이드라인 적용

Stack	핵심 패턴
html-tailwind	Tailwind utilities, responsive, a11y (DEFAULT)
react	State, hooks, performance, patterns
nextjs	SSR, routing, images, API routes
vue	Composition API, Pinia, Vue Router
svelte	Runes, stores, SvelteKit
shadcn	shadcn/ui 컴포넌트, 테마, 폼, 패턴

Step 4: 구현 + Pre-Delivery Checklist 검증

shadcn/ui MCP 도구가 사용 가능하면 컴포넌트 검색 및 예시를 활용합니다.

Common Rules for Professional UI

These are frequently overlooked issues that make UI look unprofessional:

Icons & Visual Elements

Rule	Do	Don't
No emoji icons	Use SVG icons (Heroicons, Lucide, Simple Icons)	Use emojis like 🎨 🚀 ⚙️ as UI icons
Stable hover states	Use color/opacity transitions on hover	Use scale transforms that shift layout
Correct brand logos	Research official SVG from Simple Icons	Guess or use incorrect logo paths
Consistent icon sizing	Use fixed viewBox (24x24) with w-6 h-6	Mix different icon sizes randomly

Interaction & Cursor

Rule	Do	Don't
Cursor pointer	Add `cursor-pointer` to all clickable/hoverable cards	Leave default cursor on interactive elements
Hover feedback	Provide visual feedback (color, shadow, border)	No indication element is interactive
Smooth transitions	Use `transition-colors duration-200`	Instant state changes or too slow (>500ms)

Light/Dark Mode Contrast

Rule	Do	Don't
Glass card light mode	Use `bg-white/80` or higher opacity	Use `bg-white/10` (too transparent)
Text contrast light	Use `#0F172A` (slate-900) for text	Use `#94A3B8` (slate-400) for body text
Muted text light	Use `#475569` (slate-600) minimum	Use gray-400 or lighter
Border visibility	Use `border-gray-200` in light mode	Use `border-white/10` (invisible)

Layout & Spacing

Rule	Do	Don't
Floating navbar	Add `top-4 left-4 right-4` spacing	Stick navbar to `top-0 left-0 right-0`
Content padding	Account for fixed navbar height	Let content hide behind fixed elements
Consistent max-width	Use same `max-w-6xl` or `max-w-7xl`	Mix different container widths

Pre-Delivery Checklist

Before delivering UI code, verify these items:

Visual Quality

No emojis used as icons (use SVG instead)
All icons from consistent icon set (Heroicons/Lucide)
Brand logos are correct (verified from Simple Icons)
Hover states don't cause layout shift
Use theme colors directly (bg-primary) not var() wrapper

Interaction

All clickable elements have cursor-pointer
Hover states provide clear visual feedback
Transitions are smooth (150-300ms)
Focus states visible for keyboard navigation

Light/Dark Mode

Light mode text has sufficient contrast (4.5:1 minimum)
Glass/transparent elements visible in light mode
Borders visible in both modes
Test both modes before delivery

Layout

Floating elements have proper spacing from edges
No content hidden behind fixed navbars
Responsive at 375px, 768px, 1024px, 1440px
No horizontal scroll on mobile

Accessibility

All images have alt text
Form inputs have labels
Color is not the only indicator
prefers-reduced-motion respected