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

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. 레이아웃 패턴: 제품 유형에 맞는 레이아웃 구조

산업별 스타일 매칭

폰트 페어링 (Google Fonts)

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

전체 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

Interaction & Cursor

Light/Dark Mode Contrast

Layout & Spacing

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