UI UX Pro Max Skill

다양한 플랫폼 및 프레임워크에 걸쳐 전문적인 UI/UX 구축을 위한 디자인 인텔리전스를 제공하는 AI 스킬입니다.

GitHub: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
Website: https://uupm.cc

무엇인가요?

UI UX Pro Max는 Claude Code, Cursor, Windsurf, GitHub Copilot 등 15개 이상의 AI 코딩 어시스턴트에 로드되도록 설계된 **AI 스킬(컨텍스트 주입 계층)**입니다. 설치 후에는 개발자가 매번 수동으로 디자인 규칙을 지정할 필요 없이 AI의 전문적이고 프로덕션 등급의 UI/UX 코드를 생성하는 능력을 자동으로 강화합니다.

핵심은 구조화된 지식 기반과 Python 기반의 추론 엔진이 결합되어 사용자 요청을 분석하고 코드가 작성되기 전에 완전하고 맞춤화된 디자인 시스템(스타일 + 색상 + 타이포그래피 + 레이아웃 패턴 + 안티 패턴)을 생성합니다.

핵심 기능

1. 지능형 디자인 시스템 생성기 (v2.0 플래그십)

추론 엔진은 다음과 같은 다중 도메인 병렬 검색을 수행합니다.

161가지 제품/산업 카테고리 → 레이아웃 패턴과 일치
67가지 UI 스타일 → BM25 점수로 순위 지정
161가지 색상 팔레트 → 산업에 적합한 선택
57가지 글꼴 조합 → 개성에 맞는 타이포그래피
24가지 랜딩 페이지 패턴 → 전환 최적화 구조

결과는 권장 패턴, 스타일, 색상, 타이포그래피, 주요 효과, 피해야 할 안티 패턴 및 사전 전달 체크리스트를 포함한 완전한 구조화된 디자인 시스템입니다.

2. 67가지 UI 스타일

세 가지 범주에 걸쳐 현대적이고 틈새 디자인 미학의 전체 스펙트럼을 다룹니다.

49가지 일반 스타일: 글리치모피즘, 뉴모피즘, 브루탈리즘, 클레이모피즘, 벤토 그리드, 다크 모드, AI 네이티브 UI, 사이버펑크, 베이퍼웨이브, 픽셀 아트, 공간 UI(VisionOS) 등.
8가지 랜딩 페이지 스타일: 히어로 중심, 전환 최적화, 기능 풍부 쇼케이스, 스토리텔링 기반 등.
10가지 BI/분석 대시보드 스타일: 데이터 밀집, 경영진, 실시간 모니터링, 금융, 영업 인텔리전스 등.

3. 161가지 산업별 추론 규칙

규칙은 다음을 포함한 수직을 다룹니다.

기술 및 SaaS, 핀테크, 의료, 전자 상거래, 크리에이티브 에이전시, 라이프스타일 앱, 신흥 기술(Web3, 공간 컴퓨팅, 양자) 등.

각 규칙은 다음을 인코딩합니다. 권장 레이아웃 패턴, 스타일 우선순위, 색상 분위기, 타이포그래피 분위기, 주요 애니메이션/효과 및 명시적인 안티 패턴(예: "은행 앱에 AI 보라색/핑크 그라데이션 없음").

4. 99가지 UX 가이드라인

반응성, 호버 상태, 포커스 표시기, 감소된 모션 지원 및 대비 비율을 다루는 모범 사례, 접근성 표준(WCAG AA) 및 안티 패턴.

5. 다중 스택 지원 (15가지 기술 스택)

React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel.

6. 디자인 시스템 지속성 (마스터 + 재정의 패턴)

design-system/MASTER.md에 계층적 디자인 시스템을 생성하고 유지하며, design-system/pages/ 아래에 페이지별 재정의 파일을 생성합니다. 이를 통해 세션 간 및 동일 프로젝트의 페이지 간 일관된 디자인 언어를 보장합니다.

작동 방식

사용자 요청
    │
    ▼
다중 도메인 검색 (5개 병렬 검색)
    │
    ▼
추론 엔진 (BM25 순위 지정 + JSON 조건 규칙)
    │
    ▼
완전한 디자인 시스템 출력
(패턴 + 스타일 + 색상 + 타이포그래피 + 효과 + 안티 패턴 + 체크리스트)
    │
    ▼
AI가 전체 디자인 컨텍스트로 코드 생성

설치

Claude 마켓플레이스를 통해 (Claude Code)

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

CLI를 통해 (권장 — 모든 AI 어시스턴트 지원)

npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai copilot     # GitHub Copilot
uipro init --ai all         # 모든 지원 어시스턴트

지원되는 AI 어시스턴트: Claude Code, Cursor, Windsurf, Antigravity, GitHub Copilot, Kiro, Codex CLI, Qoder, Roo Code, Gemini CLI, Trae, OpenCode, Continue, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment.

필수 구성 요소: Python 3.x (검색/추론 스크립트에 필요).

사용법

설치 후 UI/UX 요청을 할 때 스킬이 자동으로 활성화됩니다.

내 SaaS 제품 랜딩 페이지 구축
의료 분석 대시보드 생성
다크 모드로 포트폴리오 웹사이트 디자인
전자 상거래용 모바일 앱 UI 만들기
다크 테마로 핀테크 은행 앱 구축

워크플로우 모드를 사용하는 플랫폼(Kiro, Copilot, Roo Code)의 경우:

/ui-ux-pro-max 내 SaaS 제품 랜딩 페이지 구축

프로젝트 구조

src/ui-ux-pro-max/
├── data/*.csv          # 지식 기반 (스타일, 색상, 글꼴, 규칙)
├── scripts/*.py        # 검색 엔진 및 디자인 시스템 추론
└── templates/          # 플랫폼별 구성 템플릿

cli/                    # CLI 설치 프로그램 (템플릿에서 파일 생성)
.claude/skills/         # Claude Code의 로컬 설치 경로
docs/                   # 문서
preview/                # UI 미리보기 에셋

왜 중요한가요?

대부분의 AI 코딩 어시스턴트는 지속적이고 구조화된 디자인 지식이 부족합니다. 이와 같은 주입된 스킬이 없으면 일반적이거나 일관성이 없거나 "AI처럼 보이는" UI 패턴으로 기본 설정됩니다. UI UX Pro Max는 다음을 통해 이를 해결합니다.

코드 생성 전에 디자인 결정을 표준화합니다.
일반적인 실수를 방지하기 위해 산업별 안티 패턴을 인코딩합니다.
단일 CLI 설치 프로그램을 통해 모든 주요 AI 코딩 플랫폼에서 작동합니다.
다중 페이지 프로젝트의 경우 세션 간 디자인 시스템을 유지합니다.

이는 AI 어시스턴트에 내장된 시니어 UI/UX 디자이너 역할을 효과적으로 수행합니다.