스킬 자체의 표현으로
UI/UX Pro Max는 웹, 모바일, 데스크톱 인터페이스를 위한 검색 가능한 디자인 인텔리전스 스킬입니다. 79개 스타일(50개 활성), 근거 프로필이 포함된 192개 제품 팔레트, 74개 폰트 조합, 119개 UX 가이드라인, 105개 아이콘, 17개 GSAP 프리셋, 25개 차트 유형, 22개 기술 스택을 조회합니다. 페이지를 디자인하거나, 색상과 타이포그래피를 선택하거나, 접근성과 일관성을 위해 UI를 검토하거나, 내비게이션과 애니메이션을 구현하거나, 사용성을 개선하는 데 사용합니다.
package.json, pubspec.yaml, xcodeproj에서 스택을 자동으로 감지하고, 세션 간 조회를 위한 선택적 지속성과 함께 디자인 시스템을 생성합니다. 세 가지 디자인 다이얼(변화량, 모션, 밀도)로 결과물을 조정합니다. 이 스킬은 UX, 색상, 타이포그래피, 아이콘, GSAP, 스택별 구현 가이드에 대한 도메인별 검색을 제공합니다.
산출물
- ASCII, 마크다운, JSON 형식의 패턴, 스타일, 색상, 타이포그래피, 이펙트, 안티패턴이 포함된 디자인 시스템
- --page가 전달된 경우 페이지별 오버라이드를 위한 design-system/project-slug/pages/page-name.md
- 도메인별 결과(UX 가이드라인, 색상 팔레트, 폰트 조합, 아이콘, GSAP 프리셋, 차트 추천, 스택 구현 가이드)
작동 방식
- 01요구사항 분석
제품 유형(SaaS, 이커머스, 대시보드), 대상 사용자, 스타일 키워드(playful, minimal, dark mode)를 추출하고, package.json, pubspec.yaml, xcodeproj, app.json에서 스택을 감지합니다.
- 02디자인 시스템 생성
새 페이지나 프로젝트의 경우 --design-system 옵션으로 search.py를 실행합니다.
- 03마스터로 지속하고 오버라이드 추가
프로젝트 루트를 가리키는 --persist와 --output-dir을 추가하여 design-system/project-slug/MASTER.md를 작성합니다. 페이지별 오버라이드는 pages/page-name.md에 들어갑니다.
- 04도메인 검색으로 보완
의미 있는 용어 2~5개와 제약 조건 1개로 단일 도메인(ux, color, typography, icons, gsap, chart, landing, google-fonts)을 조회합니다.
- 05쿼리 스택 가이드라인
감지된 스택(react, nextjs, vue, swiftui, flutter 등)에 대해 구현별 안내를 받으려면 --stack을 사용합니다.
- 06배포 전 규칙 확인
앱 UI를 전달하기 전에 references/pro-rules.md를 읽고, 아이콘 사용 규칙, 인터랙션 피드백, 라이트/다크 모드 대비, 세이프 에어리어 레이아웃, 네이티브/모바일 앱 UI의 접근성을 다루는 표준 배포 전 체크리스트를 확인합니다.