UX Pro Max - 설계 인텔리전스은(는) 무엇을 하나요?
UI 스타일, 색상 팔레트, 폰트 페어링, 차트 유형, 제품 추천, UX 가이드라인 및 스택별 모범 사례의 검색 가능한 데이터베이스입니다.
사전 요구 사항
Python이 설치되어 있는지 확인하세요:
python3 --version || python --version
Python이 설치되어 있지 않다면, 사용자의 OS에 맞게 설치하세요:
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
이 스킬 사용 방법
사용자가 UI/UX 작업(디자인, 구축, 생성, 구현, 검토, 수정, 개선)을 요청하면 다음 워크플로우를 따르세요:
1단계: 사용자 요구 사항 분석
사용자 요청에서 핵심 정보를 추출하세요:
- 제품 유형: SaaS, 이커머스, 포트폴리오, 대시보드, 랜딩 페이지 등
- 스타일 키워드: 미니멀, 유쾌함, 프로페셔널, 우아함, 다크 모드 등
- 산업: 헬스케어, 핀테크, 게임, 교육 등
- 스택: React, Vue, Next.js 또는 기본값
html-tailwind
2단계: 관련 도메인 검색
search.py를 여러 번 사용하여 포괄적인 정보를 수집하세요. 충분한 컨텍스트를 얻을 때까지 검색하세요.
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<키워드>" --domain <도메인> [-n <최대_결과_수>]
권장 검색 순서:
- 제품 - 제품 유형에 대한 스타일 추천 받기
- 스타일 - 상세 스타일 가이드(색상, 효과, 프레임워크) 받기
- 타이포그래피 - Google Fonts 가져오기가 포함된 폰트 페어링 받기
- 색상 - 색상 팔레트(기본, 보조, CTA, 배경, 텍스트, 테두리) 받기
- 랜딩 - 페이지 구조 받기(랜딩 페이지인 경우)
- 차트 - 차트 추천 받기(대시보드/분석인 경우)
- UX - 모범 사례 및 안티 패턴 받기
- 스택 - 스택별 가이드라인 받기(기본값: html-tailwind)
3단계: 스택 가이드라인 (기본값: html-tailwind)
사용자가 스택을 지정하지 않으면 html-tailwind를 기본값으로 사용하세요.
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<키워드>" --stack html-tailwind
사용 가능한 스택: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn
검색 참조
사용 가능한 도메인
| 도메인 | 용도 | 예시 키워드 |
|---|---|---|
product | 제품 유형 추천 | SaaS, 이커머스, 포트폴리오, 헬스케어, 뷰티, 서비스 |
style | UI 스타일, 색상, 효과 | 글래스모피즘, 미니멀리즘, 다크 모드, 브루탈리즘 |
typography | 폰트 페어링, Google Fonts | 우아함, 유쾌함, 프로페셔널, 모던 |
color | 제품 유형별 색상 팔레트 | saas, ecommerce, healthcare, beauty, fintech, service |
landing | 페이지 구조, CTA 전략 | 히어로, 히어로 중심, 사용후기, 가격, 사회적 증명 |
chart | 차트 유형, 라이브러리 추천 | 추세, 비교, 타임라인, 퍼널, 파이 |
ux | 모범 사례, 안티 패턴 | 애니메이션, 접근성, z-index, 로딩 |
prompt | AI 프롬프트, CSS 키워드 | (스타일 이름) |
사용 가능한 스택
| 스택 | 초점 |
|---|---|
html-tailwind | Tailwind 유틸리티, 반응형, 접근성 (기본값) |
react | 상태, 훅, 성능, 패턴 |
nextjs | SSR, 라우팅, 이미지, API 라우트 |
vue | Composition API, Pinia, Vue Router |
svelte | Runes, 스토어, SvelteKit |
swiftui | 뷰, 상태, 네비게이션, 애니메이션 |
react-native | 컴포넌트, 네비게이션, 리스트 |
flutter | 위젯, 상태, 레이아웃, 테마 |
shadcn | shadcn/ui 컴포넌트, 테마, 폼, 패턴 |
예제 워크플로우
사용자 요청: "전문 스킨케어 서비스 랜딩 페이지를 만들어줘"
AI는 다음과 같이 수행해야 합니다:
# 1. 제품 유형 검색
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product
# 2. 스타일 검색 (산업 기반: 뷰티, 우아함)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style
# 3. 타이포그래피 검색
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography
# 4. 색상 팔레트 검색
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color
# 5. 랜딩 페이지 구조 검색
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing
# 6. UX 가이드라인 검색
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "animation" --domain ux
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
# 7. 스택 가이드라인 검색 (기본값: html-tailwind)
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind
그런 다음: 모든 검색 결과를 종합하여 디자인을 구현하세요.
더 나은 결과를 위한 팁
- 키워드를 구체적으로 사용하세요 - "헬스케어 SaaS 대시보드" > "앱"
- 여러 번 검색하세요 - 다른 키워드가 다른 인사이트를 제공합니다
- 도메인을 결합하세요 - 스타일 + 타이포그래피 + 색상 = 완전한 디자인 시스템
- 항상 UX를 확인하세요 - 일반적인 문제를 위해 "애니메이션", "z-index", "접근성" 검색
- 스택 플래그를 사용하세요 - 구현별 모범 사례를 얻으세요
- 반복하세요 - 첫 번째 검색이 맞지 않으면 다른 키워드를 시도하세요
전문 UI를 위한 일반 규칙
다음은 UI를 비전문적으로 보이게 만드는 자주 간과되는 문제들입니다:
아이콘 및 시각적 요소
| 규칙 | 권장 사항 | 금지 사항 |
|---|---|---|
| 이모지 아이콘 사용 금지 | SVG 아이콘 사용 (Heroicons, Lucide, Simple Icons) | UI 아이콘으로 이모지(🎨 🚀 ⚙️) 사용 금지 |
| 안정적인 호버 상태 | 호버 시 색상/투명도 전환 사용 | 레이아웃을 변경하는 스케일 변환 사용 금지 |
| 올바른 브랜드 로고 | Simple Icons의 공식 SVG 사용 | 추측하거나 잘못된 로고 경로 사용 금지 |
| 일관된 아이콘 크기 | 고정 viewBox(24x24)와 w-6 h-6 사용 | 다른 아이콘 크기를 임의로 혼합 사용 금지 |
상호작용 및 커서
| 규칙 | 권장 사항 | 금지 사항 |
|---|---|---|
| 커서 포인터 | 클릭 가능/호버 가능한 모든 카드에 cursor-pointer 추가 | 대화형 요소에 기본 커서 유지 금지 |
| 호버 피드백 | 시각적 피드백(색상, 그림자, 테두리) 제공 | 요소가 대화형임을 알리는 표시 없음 금지 |
| 부드러운 전환 | transition-colors duration-200 사용 | 즉각적인 상태 변경 또는 너무 느린 속도(>500ms) 금지 |
라이트/다크 모드 대비
| 규칙 | 권장 사항 | 금지 사항 |
|---|---|---|
| 라이트 모드 유리 카드 | bg-white/80 이상의 불투명도 사용 | bg-white/10 사용 (너무 투명함) 금지 |
| 라이트 텍스트 대비 | 텍스트에 #0F172A(slate-900) 사용 | 본문 텍스트에 #94A3B8(slate-400) 사용 금지 |
| 라이트 음소거 텍스트 | 최소 #475569(slate-600) 사용 | gray-400 또는 그보다 밝은 색 사용 금지 |
| 테두리 가시성 | 라이트 모드에서 border-gray-200 사용 | border-white/10 사용 (표시 안 됨) 금지 |
레이아웃 및 간격
| 규칙 | 권장 사항 | 금지 사항 |
|---|---|---|
| 플로팅 내비바 | top-4 left-4 right-4 간격 추가 | 내비바를 top-0 left-0 right-0에 고정 금지 |
| 콘텐츠 패딩 | 고정 내비바 높이 고려 | 콘텐츠가 고정 요소 뒤에 숨도록 허용 금지 |
| 일관된 최대 너비 | 동일한 max-w-6xl 또는 max-w-7xl 사용 | 다른 컨테이너 너비 혼합 사용 금지 |
전달 전 체크리스트
UI 코드를 전달하기 전에 다음 항목을 확인하세요:
시각적 품질
- 아이콘으로 이모지가 사용되지 않았음 (SVG 사용)
- 모든 아이콘이 일관된 아이콘 세트(Heroicons/Lucide)에서 가져옴
- 브랜드 로고가 올바름 (Simple Icons에서 확인)
- 호버 상태가 레이아웃 이동을 일으키지 않음
- 테마 색상을 직접 사용(bg-primary)하고 var() 래퍼를 사용하지 않음
상호작용
- 모든 클릭 가능한 요소에
cursor-pointer가 있음 - 호버 상태가 명확한 시각적 피드백을 제공
- 전환이 부드러움(150-300ms)
- 키보드 탐색을 위한 포커스 상태가 표시됨
라이트/다크 모드
- 라이트 모드 텍스트의 대비가 충분함 (최소 4.5:1)
- 유리/투명 요소가 라이트 모드에서 표시됨
- 테두리가 두 모드 모두에서 표시됨
- 전달 전에 두 모드를 모두 테스트함
레이아웃
- 플로팅 요소가 가장자리로부터 적절한 간격을 가짐
- 고정 내비바 뒤에 숨겨진 콘텐츠가 없음
- 320px, 768px, 1024px, 1440px에서 반응형
- 모바일에서 수평 스크롤이 없음
접근성
- 모든 이미지에 대체 텍스트가 있음
- 양식 입력에 레이블이 있음
- 색상만이 유일한 지표가 아님
-
prefers-reduced-motion이 존중됨