UI/UX Pro Max - Design Intelligence

Comprehensive design guide for web and mobile applications. Contains 57 styles, 95 color palettes, 56 font pairings, 98 UX guidelines, and 24 chart types across 12 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 생성

먼저 scripts/search.py로 data/ 디렉토리의 CSV 데이터베이스를 검색합니다 (스킬 디렉토리에서 실행):

# 도메인 검색 — 색상(color) | 타이포(typography) | 차트(chart) | 스타일(style) 등
python3 scripts/search.py "<질의>" --domain color
python3 scripts/search.py "<질의>" --domain typography
python3 scripts/search.py "<질의>" --domain chart
python3 scripts/search.py "<질의>" --domain style
# 전체 도메인: style, prompt, color, chart, landing, product, ux, typography, icons, react, web

# 스택별 가이드라인 검색 (12개 스택)
python3 scripts/search.py "<질의>" --stack html-tailwind

# 디자인 시스템 일괄 생성 (내부적으로 scripts/design_system.py 사용 —
# product/style/color/landing/typography 5개 도메인 검색 결과를 통합)
python3 scripts/search.py "<제품유형> <산업> <키워드>" --design-system -p "프로젝트명"

# 세션 간 재사용을 위한 영속화 (design-system/MASTER.md + pages/ 오버라이드 생성)
python3 scripts/search.py "<질의>" --design-system --persist -p "프로젝트명" [--page "dashboard"]

검색 결과와 위 Quick Reference를 기반으로 디자인 시스템을 구성합니다. Python 미설치 등으로 검색이 불가하면 아래 데이터로 직접 구성:

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

산업별 스타일 매칭

산업	추천 스타일	색상 톤	폰트 성격
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 컴포넌트, 테마, 폼, 패턴

전체 12개 스택(html-tailwind, react, nextjs, vue, nuxtjs, nuxt-ui, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose)은 python3 scripts/search.py "<질의>" --stack <스택>으로 조회합니다.

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