ui-ux-pro-max — AI UI/UX 디자인 인텔리전스

다양한 플랫폼/프레임워크에서 프로페셔널 UI/UX를 빌드할 수 있게 하는 디자인 인텔리전스 스킬. BM25 검색 엔진으로 67개 스타일, 161개 추론 규칙, 161개 컬러 팔레트, 57개 폰트 페어링을 검색하고, 프로젝트 요구사항에 맞는 완전한 디자인 시스템을 자동 생성한다.

출처: nextlevelbuilder/ui-ux-pro-max-skill v2.0 (MIT License)

전제 조건

Python 3.x 필수.

python3 --version || python --version

워크플로우

Phase 0: 요구사항 분석

사용자 요청에서 핵심 정보를 추출한다:

항목	예시
프로덕트 타입	SaaS, e-commerce, portfolio, dashboard, landing page
스타일 키워드	minimal, playful, professional, elegant, dark mode
업종	healthcare, fintech, gaming, education, beauty
기술 스택	React, Vue, Next.js (미지정 시 `html-tailwind`)

Phase 1: 디자인 시스템 생성 (필수)

항상 --design-system으로 시작하여 5개 도메인 병렬 검색 + 추론 엔진을 실행한다:

python3 {스킬경로}/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

출력: 패턴 + 스타일 + 컬러 + 타이포그래피 + 효과 + 안티패턴 + 체크리스트

예시:

python3 {스킬경로}/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

디자인 시스템 영속화 (선택)

세션 간 재사용을 위해 Master + Overrides 패턴으로 저장:

# 마스터 파일 생성
python3 {스킬경로}/scripts/search.py "<query>" --design-system --persist -p "Project Name"

# 페이지별 오버라이드 추가
python3 {스킬경로}/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

생성 구조:

design-system/
├── MASTER.md           # 글로벌 소스 오브 트루스
└── pages/
    └── dashboard.md    # 페이지별 오버라이드

Phase 2: 도메인별 상세 검색 (필요 시)

디자인 시스템 생성 후 추가 상세 정보가 필요할 때:

python3 {스킬경로}/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

도메인	용도	예시 키워드
`style`	UI 스타일, 효과	glassmorphism, minimalism, dark mode
`color`	컬러 팔레트	saas, ecommerce, healthcare, beauty
`typography`	폰트 페어링	elegant, playful, professional
`chart`	차트 추천	trend, comparison, funnel, pie
`landing`	랜딩 페이지 구조	hero, social-proof, pricing
`product`	프로덕트 타입 추천	saas, fintech, portfolio
`ux`	UX 가이드라인	animation, accessibility, z-index
`icons`	아이콘 추천	lucide, heroicons, svg
`react`	React/Next.js 성능	suspense, memo, bundle, rerender
`web`	웹 인터페이스	aria, focus, semantic, form

Phase 3: 스택별 가이드라인 적용

기술 스택 특화 베스트 프랙티스 (미지정 시 html-tailwind):

python3 {스킬경로}/scripts/search.py "<keyword>" --stack <stack>

지원 스택: html-tailwind, react, nextjs, astro, vue, nuxtjs, nuxt-ui, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

Phase 4: 구현 및 검증

디자인 시스템 권장사항을 기반으로 UI 구현 후, Pre-Delivery 체크리스트로 검증한다.

데이터 자산

카테고리	수량	파일
UI 스타일	67개 (일반 49 + 랜딩 8 + BI 10)	`data/styles.csv`
컬러 팔레트	161개 (업종별 맞춤)	`data/colors.csv`
폰트 페어링	57개 (Google Fonts)	`data/typography.csv`
추론 규칙	161개 (업종별 디자인 시스템 생성)	`data/ui-reasoning.csv`
UX 가이드라인	99개	`data/ux-guidelines.csv`
차트 타입	25개	`data/charts.csv`
프로덕트 타입	161개	`data/products.csv`
랜딩 패턴	24개	`data/landing.csv`
아이콘 가이드	-	`data/icons.csv`
React 성능	-	`data/react-performance.csv`
웹 인터페이스	-	`data/web-interface.csv`
스택 가이드라인	13개 스택	`data/stacks/*.csv`

스크립트

파일	역할
`scripts/search.py`	CLI 진입점 (BM25 검색 + 디자인 시스템 생성)
`scripts/core.py`	BM25 검색 엔진 코어
`scripts/design_system.py`	디자인 시스템 생성기 (추론 엔진)

우선순위 규칙

우선순위	카테고리	영향도
1	Accessibility	CRITICAL
2	Touch & Interaction	CRITICAL
3	Performance	HIGH
4	Layout & Responsive	HIGH
5	Typography & Color	MEDIUM
6	Animation	MEDIUM
7	Style Selection	MEDIUM
8	Charts & Data	LOW

Pre-Delivery 체크리스트

시각 품질

이모지를 아이콘으로 사용하지 않음 (SVG 사용: Heroicons/Lucide)
일관된 아이콘 세트 사용
브랜드 로고 정확성 (Simple Icons 검증)
Hover 시 레이아웃 시프트 없음

인터랙션

모든 클릭 가능 요소에 cursor-pointer
Hover 피드백 (150-300ms 트랜지션)
키보드 네비게이션 포커스 상태 가시적

라이트/다크 모드

텍스트 대비 4.5:1 이상
반투명 요소 라이트 모드에서 가시적
보더 양쪽 모드에서 가시적

레이아웃

반응형: 375px, 768px, 1024px, 1440px
모바일 가로 스크롤 없음
고정 네비바 뒤 콘텐츠 가림 없음

접근성

모든 이미지 alt 텍스트
폼 입력 label 연결
prefers-reduced-motion 존중

Superpowers 연계

이 스킬 실행 중 아래 superpowers 원칙을 적용한다.

원칙	적용 시점	적용 방법
`brainstorming`	요구사항 분석 단계	디자인 결정에 2~3가지 시각적 접근법 비교

도구	역할	관계
`/kdyextract`	디자인 자산 추출	Recommend (디자인 토큰 추출 시)
`/kdyweb`	웹 페이지 구조 관리	Recommend (페이지 빌드 후 구조 검증)
`/kdypick`	재사용 코드 적용	Recommend (UI 컴포넌트 가져오기)
`code-reviewer`	코드 품질 리뷰	Invoke (구현 완료 후)
`/kdyconvention`	코드 컨벤션 검증	Recommend (스타일 일관성 확인)

사용 예시

# 디자인 시스템 생성
/ui-ux-pro-max

# 프롬프트 예시 (자연어로 요청)
"SaaS 제품 랜딩 페이지 만들어줘"
"헬스케어 대시보드 디자인해줘"
"다크 모드 포트폴리오 사이트 만들어줘"
"핀테크 뱅킹 앱 UI 만들어줘"

주의사항

Python 3.x가 설치되어 있어야 스크립트 실행 가능
스크립트 경로는 {스킬경로}/scripts/ 형태로 상대 경로 사용 (하드코딩 금지)
디자인 시스템 생성 시 반드시 --design-system 플래그 먼저 실행
원본 레포: nextlevelbuilder/ui-ux-pro-max-skill — 업데이트 시 참조

ui-ux-pro-max