ui-ux-pro-max-skill

KO | EN

gitlite — search

#python #hacktoberfest #android #machine-learning #rust #deep-learning #java #nodejs #windows #kubernetes #awesome-list #security #mcp #ios

ui-ux-pro-max-skill

(★ 119,179)

다수의 플랫폼을 위한 전문적인 UI/UX 구축에 디자인 지능을 제공하는 AI SKILL

파일 탐색기

최종 버전 다운로드 (.zip)

- marketplace.json
- plugin.json
- - bug_report.yml
  - feature_request.yml
- - bump-versions.yml
  - check-asset-sync.yml
  - refresh-catalogs.yml
  - release.yml
  - smoke-stacks.yml
  - tests.yml
- PULL_REQUEST_TEMPLATE.md
- - build.mjs
  - sync-assets.mjs
- - index.ts
- .gitignore
- .npmignore
- bun.lock
- package-lock.json
- package.json
- playwright.config.ts
- README.md
- tsconfig.json
- - 260812-1844-search-data-quality-planning.md
  - 260813-0816-phase-6-accessibility-refresh.md
  - 260813-1622-phase-7-web-stack-freshness.md
  - 260813-1800-search-data-overhaul-completion.md
- 三个 data-scripts-templates 的区别.md
- - globals.css
  - layout.tsx
  - page.tsx
  - providers.tsx
- - CodeSnippet.tsx
  - ColorPalette.tsx
  - DarkModeToggle.tsx
  - ExpandableSection.tsx
  - FilterBar.tsx
  - GalleryGrid.tsx
  - InteractiveChecklist.tsx
  - metadata-badges.test.tsx
  - MetadataBadges.tsx
  - PhoneMockup.tsx
  - SearchInput.tsx
  - StyleCard.tsx
  - StyleDetailModal.tsx
  - StylePreview.tsx
  - UIControlsShowcase.tsx
- - styles.csv
- - colorExtractor.ts
  - cssGenerator.ts
  - filterStyles.ts
  - parseStyles.test.ts
  - parseStyles.ts
  - types.ts
- .gitignore
- next-env.d.ts
- next.config.js
- package-lock.json
- package.json
- postcss.config.js
- tailwind.config.ts
- tsconfig.json
- tsconfig.test.json
- xiaomaomi-app.html
- - index.html
- - index.html
- - index.html
- website.png
- evaluate-relevance.py
- generate-catalog-summary.py
- refresh-google-fonts.py
- refresh-icon-catalog.py
- relevance_metrics.py
- smoke-domains.sh
- smoke-stacks.sh
- sync-release-version.mjs
- validate-agent-guide.py
- validate-csv.py
- - settings.json
- - SETUP.md
  - STACK.md
  - WORKFLOW.md
- - design-audit.mjs
  - setup.sh
- .gitignore
- .mcp.json
- CLAUDE.md
- package.json
- README.md
.gitignore
.releaserc.json
CLAUDE.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
README.zh.md
SECURITY.md
skill.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# [UI UX Pro Max](https://uupm.cc)

<a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.zh.md">🇨🇳 简体中文</a> | 
 <a href="https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/blob/main/README.md">🇺🇸 English</a>

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

이 프로젝트가 유용하다고 생각되신다면 후원을 고려해 주세요: 
 <a href="https://paypal.me/uiuxpromax"><img src="https://img.shields.io/badge/PayPal-Donate-00457C?style=for-the-badge&logo=paypal&logoColor=white" alt="PayPal Donate"></a>

다른 프로젝트 
 <a href="https://nextlevelbuilder.io">NextLevelBuilder.io</a> | <a href="https://goclaw.sh">GoClaw.sh</a> | <a href="https://claudekit.cc">ClaudeKit.cc</a> | <a href="https://tose.sh">TOSE.sh</a>

## v2.0 새로운 기능

### 지능형 디자인 시스템 생성

v2.0의 핵심 기능은 **Design System Generator**입니다. 프로젝트 요구사항을 분석하고 몇 초 만에 완전하고 맞춤화된 디자인 시스템을 생성해 주는 AI 기반 추론 엔진입니다.

### 디자인 시스템 생성 작동 방식

```
┌─────────────────────────────────────────────────────────────────┐
│  1. USER REQUEST                                                │
│     "Build a landing page for my beauty spa"                    │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  2. MULTI-DOMAIN SEARCH (5 parallel searches)                   │
│     • Product type matching (192 categories)                    │
│     • Style recommendations (84 styles)                         │
│     • Color palette selection (192 palettes)                    │
│     • Landing page patterns (34 patterns)                       │
│     • Typography pairing (74 font combinations)                 │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  3. REASONING ENGINE                                            │
│     • Match product → UI category rules                         │
│     • Apply style priorities (BM25 ranking)                     │
│     • Filter anti-patterns for industry                         │
│     • Process decision rules (JSON conditions)                  │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  4. COMPLETE DESIGN SYSTEM OUTPUT                               │
│     Pattern + Style + Colors + Typography + Effects             │
│     + Anti-patterns to avoid + Pre-delivery checklist           │
└─────────────────────────────────────────────────────────────────┘
```

### 161개의 업계별 추론 규칙

추론 엔진에는 다음을 위한 전문 규칙이 포함되어 있습니다.

| 카테고리 | 예시 |
|----------|----------|
| **테크 & SaaS** | SaaS, 마이크로 SaaS, B2B 서비스, 개발자 도구 / IDE, AI/챗봇 플랫폼, 사이버 보안 플랫폼 |
| **금융** | 핀테크/크립토, 뱅킹, 보험, 개인 자산 관리 추적기, 인보이스 및 결제 도구 |
| **헬스케어** | 메디컬 클리닉, 약국, 치과, 수의과, 정신 건강, 복약 알림 |
| **이커머스** | 일반, 럭셔리, 마켓플레이스 (P2P), 서브스크립션 박스, 음식 배달 |
| **서비스** | 뷰티/스파, 레스토랑, 호텔, 법률, 홈 서비스, 예약 및 상담 |
| **크리에이티브** | 포트폴리오, 에이전시, 사진, 게이밍, 음악 스트리밍, 사진/비디오 편집기 |
| **라이프스타일** | 습관 추적기, 레시피 & 요리, 명상, 날씨, 다이어리, 기분 추적기 |
| **신기술** | Web3/NFT, 공간 컴퓨팅, 양자 컴퓨팅, 자율주행 드론 함대 |

각 규칙에 포함된 내용:
- **추천 패턴** - 랜딩 페이지 구조
- **스타일 우선순위** - 가장 잘 어울리는 UI 스타일
- **컬러 무드** - 업계에 적합한 팔레트
- **타이포그래피 무드** - 폰트 성향 매칭
- **핵심 효과** - 애니메이션 및 인터랙션
- **안티 패턴** - 지양해야 할 사항 (예: 뱅킹 서비스에 "AI 보라색/분홍색 그라데이션" 사용 금지)

## 기능

- **84개 UI 스타일** - 글래스모피즘, 클레이모피즘, 미니멀리즘, 브루탈리즘, 뉴모피즘, 벤토 그리드, 다크 모드, AI 네이티브 UI 등
- **192개 컬러 팔레트** - 192가지 제품 유형과 1:1로 일치하는 업계별 팔레트
- **74개 폰트 페어링** - Google Fonts 임포트가 포함된 엄선된 타이포그래피 조합
- **25개 차트 유형** - 대시보드 및 분석을 위한 추천
- **22개 테크 스택** - React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, HTML+Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, Three.js, JavaFX, WPF, WinUI 3, UWP, Avalonia, Uno Platform
- **98개 UX 가이드라인** - 모범 사례, 안티 패턴 및 접근성 규칙
- **161개 추론 규칙** - 업계별 디자인 시스템 생성 (v2.0 신규 기능)

### 사용 가능한 스타일 (67)

| # | 스타일 | 가장 적합한 용도 |
|---|-------|----------|
| 1 | 미니멀리즘 & 스위스 스타일 | 엔터프라이즈 앱, 대시보드, 문서화 |
| 2 | 뉴모피즘 | 헬스/웰니스 앱, 명상 플랫폼 |
| 3 | 글래스모피즘 | 모던 SaaS, 금융 대시보드 |
| 4 | 브루탈리즘 | 디자인 포트폴리오, 예술적 프로젝트 |
| 5 | 3D & 하이퍼레알리즘 | 게이밍, 제품 쇼케이스, 몰입형 경험 |
| 6 | 비브란트 & 블록 기반 | 스타트업, 크리에이티브 에이전시, 게이밍 |
| 7 | 다크 모드 (OLED) | 야간 모드 앱, 코딩 플랫폼 |
| 8 | 접근성 & 에식컬 (Accessible & Ethical) | 정부, 헬스케어, 교육 |
| 9 | 클레이모피즘 | 교육용 앱, 어린이용 앱, SaaS |
| 10 | 오로라 UI | 모던 SaaS, 크리에이티브 에이전시 |
| 11 | 레트로 퓨처리즘 | 게이밍, 엔터테인먼트, 음악 플랫폼 |
| 12 | 플랫 디자인 | 웹 앱, 모바일 앱, 스타트업 MVP |
| 13 | 스큐어모피즘 | 레거시 앱, 게이밍, 프리미엄 제품 |
| 14 | 리퀴드 글래스 | 프리미엄 SaaS, 하이엔드 이커머스 |
| 15 | 모션 주도형 | 포트폴리오 사이트, 스토리텔링 플랫폼 |
| 16 | 마이크로 인터랙션 | 모바일 앱, 터치스크린 UI |
| 17 | 포용적 디자인 (Inclusive Design) | 공공 서비스, 교육, 헬스케어 |
| 18 | 제로 인터페이스 | 음성 어시스턴트, AI 플랫폼 |
| 19 | 소프트 UI 에볼루션 | 모던 엔터프라이즈 앱, SaaS |
| 20 | 뉴브루탈리즘 | Z세대 브랜드, 스타트업, 피그마 스타일 |
| 21 | 벤토 박스 그리드 | 대시보드, 제품 페이지, 포트폴리오 |
| 22 | Y2K 미학 | 패션 브랜드, 음악, Z세대 |
| 23 | 사이버펑크 UI | 게이밍, 테크 제품, 크립토 앱 |
| 24 | 오가닉 바이오필릭 (Organic Biophilic) | 웰니스 앱, 지속 가능성 브랜드 |
| 25 | AI 네이티브 UI | AI 제품, 챗봇, 코파일럿 |
| 26 | 멤피스 디자인 | 크리에이티브 에이전시, 음악, 청소년 브랜드 |
| 27 | 베이퍼웨이브 | 음악 플랫폼, 게이밍, 포트폴리오 |
| 28 | 디멘셔널 레이어링 (Dimensional Layering) | 대시보드, 카드 레이아웃, 모달 |
| 29 | 과장된 미니멀리즘 | 패션, 건축, 포트폴리오 |
| 30 | 키네틱 타이포그래피 | 히어로 섹션, 마케팅 사이트 |
| 31 | 패럴랙스 스토리텔링 | 브랜드 스토리텔링, 제품 출시 |
| 32 | 스위스 모더니즘 2.0 | 기업 사이트, 건축, 에디토리얼 |
| 33 | HUD / SF FUI | SF 게임, 우주 기술, 사이버 보안 |
| 34 | 픽셀 아트 | 인디 게임, 레트로 도구, 크리에이티브 |
| 35 | 벤토 그리드 | 제품 기능, 대시보드, 개인용 |
| 36 | 공간 UI (VisionOS) | 공간 컴퓨팅 앱, VR/AR |
| 37 | 전자잉크 / 페이퍼 | 읽기 앱, 디지털 신문 |
| 38 | Z세대 카오스 / 맥시멀리즘 | Z세대 라이프스타일, 뮤직 아티스트 |
| 39 | 바이오미메틱 / 오가닉 2.0 | 지속 가능성 기술, 바이오테크, 헬스 |
| 40 | 안티 폴리시 / 로우 에스테틱 | 크리에이티브 포트폴리오, 아티스트 사이트 |
| 41 | 텍타일 디지털 / 변형 가능한 UI | 모던 모바일 앱, 장난기 있는 브랜드 |
| 42 | 네이처 디스틸드 (Nature Distilled) | 웰니스 브랜드, 지속 가능한 제품 |
| 43 | 인터랙티브 커서 디자인 | 크리에이티브 포트폴리오, 인터랙티브 |
| 44 | 음성 우선 멀티모달 | 음성 어시스턴트, 접근성 앱 |
| 45 | 3D 제품 미리보기 | 이커머스, 가구, 패션 |
| 46 | 그라디언트 메시 / 오로라 에볼브드 | 히어로 섹션, 배경, 크리에이티브 |
| 47 | 에디토리얼 그리드 / 매거진 | 뉴스 사이트, 블로그, 매거진 |
| 48 | 색수차 / RGB 스플릿 | 음악 플랫폼, 게이밍, 테크 |
| 49 | 빈티지 아날로그 / 레트로 필름 | 사진, 음악/바이닐 브랜드 |

</details>

| # | 스타일 | 가장 적합한 용도 |
|---|-------|----------|
| 1 | 히어로 중심 디자인 | 강력한 시각적 아이덴티티를 가진 제품 |
| 2 | 전환율 최적화 | 리드 제너레이션, 판매 페이지 |
| 3 | 기능 중심 쇼케이스 | SaaS, 복잡한 제품 |
| 4 | 미니멀 & 다이렉트 | 단순한 제품, 앱 |
| 5 | 소셜 프로프 중심 | 서비스, B2C 제품 |
| 6 | 인터랙티브 제품 데모 | 소프트웨어, 도구 |
| 7 | 신뢰 & 권위 | B2B, 엔터프라이즈, 컨설팅 |
| 8 | 스토리텔링 주도형 | 브랜드, 에이전시, 비영리 단체 |

</details>

| # | 스타일 | 가장 적합한 용도 |
|---|-------|----------|
| 1 | 데이터 밀집형 대시보드 | 복잡한 데이터 분석 |
| 2 | 히트맵 스타일 | 지리/행동 데이터 |
| 3 | 임원용 대시보드 (Executive Dashboard) | C레벨 요약 |
| 4 | 실시간 모니터링 | 운영, DevOps |
| 5 | 드릴다운 분석 | 상세 탐색 |
| 6 | 비교 분석 대시보드 | 나란히 비교 |
| 7 | 예측 분석 | 예측, ML 인사이트 |
| 8 | 사용자 행동 분석 | UX 연구, 제품 분석 |
| 9 | 금융 대시보드 | 재무, 회계 |
| 10 | 영업 인텔리전스 대시보드 | 영업 팀, CRM |

</details>

## 💎 베이직 버전 vs 프리미엄 버전 비교

많은 사용자들이 오픈소스 버전과 프리미엄 버전의 차이점에 대해 문의하십니다. 작업 흐름에 맞는 올바른 버전을 선택하실 수 있도록 자세한 내용을 안내해 드립니다.

### 🟢 베이직 버전 (본 저장소)
* **완전한 오픈소스:** 개인 개발자, 취미 개발자 및 표준 프로젝트에 적합합니다.
* **핵심 UI/UX 인텔리전스:** 84개의 UI 스타일, 192개의 제품 유형, 컬러 팔레트 및 엄선된 폰트 페어링에 대한 전체 액세스 권한 제공.
* **스마트 추천:** 매우 정확한 디자인 매칭을 위한 내장 BM25 검색 엔진.
* **크로스 플랫폼 지원:** 22개의 주요 프레임워크(React, Vue, Tailwind, iOS, Android 등)를 지원하는 스택별 가이드라인.
* **디자인 시스템 생성:** CLI를 통해 맞춤형 UI 규칙, 패턴, 로직을 즉시 생성.

### 🟡 프리미엄 버전
* **확장된 브랜드 디자인 스킬:** UI/UX를 넘어 브랜드 아이덴티티 생성, 로고 디자인, 기업 아이덴티티 프로그램(CIP), 배너, 프레젠테이션 슬라이드 및 커스텀 아이오그래피까지 포함.
* **고급 에셋 생성:** 단순한 플레이스홀더가 아닌 실제 시각적 에셋을 생성하기 위한 AI 기반 이미지 생성 기능과의 심층 통합.
* **엔터프라이즈 아키텍처:** 대규모 팀 배포를 위해 구축된 보다 포괄적이고 확장 가능한 디자인 토큰 아키텍처.
* **우선 지원:** 중단 없는 전체 디자인 워크플로가 필요한 팀과 전문가를 위한 전담 기술 지원.

👉 *프리미엄 티어 업그레이드에 대한 자세한 내용은 [uupm.cc](https://uupm.cc)를 방문해 주세요.*

## 설치 방법

### Claude Marketplace 사용 (Claude Code)

두 가지 명령어로 Claude Code에 직접 설치합니다:

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

### CLI 사용 (권장)

```bash
# CLI를 전역으로 설치
npm install -g ui-ux-pro-max-cli

# 프로젝트 디렉토리로 이동
cd /path/to/your/project

# AI 어시스턴트용 설치
uipro init --ai claude      # Claude Code
uipro init --ai cursor      # Cursor
uipro init --ai windsurf    # Windsurf
uipro init --ai antigravity # Antigravity
uipro init --ai copilot     # GitHub Copilot
uipro init --ai kiro        # Kiro
uipro init --ai codex       # Codex CLI
uipro init --ai qoder       # Qoder
uipro init --ai roocode     # Roo Code
uipro init --ai gemini      # Gemini CLI
uipro init --ai trae        # Trae
uipro init --ai opencode    # OpenCode
uipro init --ai continue    # Continue
uipro init --ai codebuddy   # CodeBuddy
uipro init --ai droid       # Droid (Factory)
uipro init --ai kilocode    # KiloCode
uipro init --ai warp        # Warp
uipro init --ai augment     # Augment
uipro init --ai codewhale   # CodeWhale
uipro init --ai universal   # Universal / Agent Standard (.agents/skills/)
uipro init --ai all         # 모든 어시스턴트
```

npm 패키지 이름은 `ui-ux-pro-max-cli`이며, 설치 후에도 `uipro` 명령어를 사용합니다. 구버전인 `uipro-cli`는 오래되었으므로 현재 에셋에는 사용하지 않아야 합니다.

### 전역 설치 (모든 프로젝트에서 사용 가능)

```bash
uipro init --ai claude --global   # ~/.claude/skills/에 설치
uipro init --ai cursor --global   # ~/.cursor/skills/에 설치
uipro init --ai universal --global # ~/.agents/skills/에 설치
```

### 기타 CLI 명령어

```bash
uipro versions              # 사용 가능한 버전 나열
uipro update                # 설치된 CLI 패키지에서 스킬 파일 새로고침
uipro update --global       # 설치된 CLI 패키지에서 전역 스킬 파일 새로고침
uipro init --offline        # 호환성 플래그; 번들된 템플릿 설치
uipro uninstall             # 스킬 제거 (플랫폼 자동 감지)
uipro uninstall --ai claude # 특정 플랫폼 제거
uipro uninstall --global    # 전역 설치에서 제거
```

## 사전 요구 사항

검색 스크립트 실행을 위해 Python 3.x가 필요합니다 (표준 라이브러리만 사용 — 스크립트는 아무것도 설치하지 않으며 네트워크 호출을 하지 않습니다).

Python 설치 여부 확인:

```bash
python3 --version
```

설치되어 있지 않다면 [python.org](https://www.python.org/downloads/) 또는 OS 패키지 매니저(Homebrew, apt, winget)를 통해 직접 설치하세요. 이러한 설치 단계는 **사용자(인간)**를 위한 것입니다. 이 스킬을 사용하는 AI 에이전트는 사용자의 머신에 소프트웨어를 직접 설치해서는 안 되며, 대신 사용자에게 요청하도록 지시되어 있습니다.

## 사용법

### 스킬 모드 (자동 활성화)

**지원 플랫폼:** Claude Code, Cursor, Windsurf, Antigravity, Codex CLI, Continue, Gemini CLI, OpenCode, Qoder, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment, CodeWhale

UI/UX 작업을 요청하면 스킬이 자동으로 활성화됩니다. 자연스럽게 대화하세요:

```
내 SaaS 제품을 위한 랜딩 페이지를 빌드해줘
```

> **Trae**: 먼저 **SOLO** 모드로 전환하세요. UI/UX 요청 시 스킬이 활성화됩니다.

### 워크플로 모드 (슬래시 명령어)

**지원 플랫폼:** Kiro, GitHub Copilot, Roo Code, KiloCode

슬래시 명령어를 사용하여 스킬을 호출합니다:

```
/ui-ux-pro-max 내 SaaS 제품을 위한 랜딩 페이지를 빌드해줘
```

### 프롬프트 예시

```
내 SaaS 제품을 위한 랜딩 페이지를 빌드해줘

헬스케어 분석을 위한 대시보드를 만들어줘

다크 모드가 적용된 포트폴리오 웹사이트를 디자인해줘

이커머스를 위한 모바일 앱 UI를 만들어줘

다크 테마가 적용된 핀테크 뱅킹 앱을 빌드해줘
```

### 작동 방식

1. **요청** - UI/UX 작업 요청 (빌드, 디자인, 생성, 구현, 리뷰, 수정, 개선)
2. **디자인 시스템 생성** - AI가 추론 엔진을 사용하여 완전한 디자인 시스템을 자동으로 생성
3. **스마트 추천** - 제품 유형과 요구사항에 따라 가장 잘 어울리는 스타일, 색상, 타이포그래피 탐색
4. **코드 생성** - 올바른 색상, 폰트, 여백 및 모범 사례를 적용하여 UI 구현
5. **사전 전달 검증** - 일반적인 UI/UX 안티 패턴 검증

### 지원되는 스택

이 스킬은 다음을 위한 스택별 가이드라인을 제공합니다:

| 카테고리 | 스택 |
|----------|--------|
| **웹 (HTML)** | HTML + Tailwind (기본값) |
| **React 생태계** | React, Next.js, shadcn/ui |
| **Vue 생태계** | Vue, Nuxt.js, Nuxt UI |
| **Angular** | Angular |
| **PHP** | Laravel (Blade, Livewire, Inertia.js) |
| **기타 웹** | Svelte, Astro, Three.js |
| **데스크톱** | JavaFX, WPF, WinUI 3, Avalonia, Uno Platform, UWP |
| **iOS** | SwiftUI |
| **Android** | Jetpack Compose |
| **크로스 플랫폼** | React Native, Flutter |

프롬프트에서 선호하는 스택을 언급하거나 기본값인 HTML + Tailwind를 사용하세요.

## 디자인 시스템 명령어 (고급)

디자인 시스템 생성기에 직접 접근하려면:

> 참고: Continue를 통해 설치한 경우, 아래 명령어의 `.claude/skills/`를 `.continue/skills/`로 교체하세요. Droid (Factory)의 경우 `.factory/skills/`를 사용하세요.

```bash
# ASCII 출력으로 디자인 시스템 생성
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --design-system -p "Serenity Spa"

# Markdown 출력으로 생성
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -f markdown

# 도메인별 검색
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "glassmorphism" --domain style
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "elegant serif" --domain typography
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "dashboard" --domain chart

# 스택별 가이드라인
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "form validation" --stack react
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "responsive layout" --stack html-tailwind
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "tableview binding" --stack javafx
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterprise theme" --stack javafx
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafx
```

### 디자인 시스템 영구 저장 (마스터 + 오버라이드 패턴)

**세션 간 계층적 검색**을 위해 디자인 시스템을 파일로 저장합니다:

```bash
# 디자인 시스템을 생성하여 design-system/MASTER.md에 영구 저장
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp"

# 페이지별 오버라이드 파일도 생성
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS dashboard" --design-system --persist -p "MyApp" --page "dashboard"
```

다음과 같은 `design-system/` 폴더 구조가 생성됩니다:

```
design-system/
├── MASTER.md           # 글로벌 단일 진실 공급원 (색상, 타이포그래피, 여백, 컴포넌트)
└── pages/
    └── dashboard.md    # 페이지별 오버라이드 (마스터와의 차이점만 포함)
```

**계층적 검색 작동 방식:**
1. 특정 페이지(예: "Checkout")를 빌드할 때, 먼저 `design-system/pages/checkout.md`를 확인합니다.
2. 페이지 파일이 존재하면 해당 규칙이 마스터 파일보다 **우선 적용**됩니다.
3. 존재하지 않으면 `design-system/MASTER.md`를 단독으로 사용합니다.

**컨텍스트 인식 검색 프롬프트:**
```
나는 [Page Name] 페이지를 빌드하고 있습니다. design-system/MASTER.md를 읽어주세요.
또한 design-system/pages/[page-name].md가 존재하는지 확인하세요.
페이지 파일이 존재하면 해당 규칙을 우선 적용하세요.
존재하지 않으면 마스터 규칙만 독점적으로 사용하세요.
이제 코드를 생성하세요...
```

## 아키텍처 및 기여

### 사용자용

코드베이스가 **템플릿 기반 생성 시스템**을 사용하도록 재구조화되었습니다. 모든 플랫폼별 파일(`.cursor/`, `.windsurf/`, `.kiro/`, `.factory/` 등)은 이제 CLI에 의해 동적으로 생성됩니다.

**설치 시 항상 CLI를 사용하세요:**

```bash
npm install -g ui-ux-pro-max-cli
uipro init --ai <platform>
```

이렇게 하면 설치된 CLI 패키지에 번들된 최신 템플릿과 AI 어시스턴트에 맞는 올바른 파일 구조를 보장받을 수 있습니다. 새 릴리스가 게시되면 먼저 npm 패키지를 업데이트하세요.

### 기여자를 위한 안내

이 프로젝트에 기여하고 싶으신 경우:

```bash
# 1. 저장소 클론
git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git
cd ui-ux-pro-max-skill

# 2. 구조 파악
src/ui-ux-pro-max/           # 진실의 공급원 (데이터, 스크립트, 템플릿)
cli/                         # CLI 설치 프로그램 (템플릿에서 파일 생성)
.claude/                     # Claude Code 스킬 로컬 개발/테스트용
.factory/                    # Droid (Factory) 스킬 로컬 개발/테스트용

# 3. src/ui-ux-pro-max/에서 변경 사항 적용
# - data/*.csv              → 데이터베이스 파일
# - scripts/*.py            → 검색 엔진 및 디자인 시스템
# - templates/              → 플랫폼별 템플릿

# 4. CLI와 동기화하고 로컬에서 테스트
cd cli
npm run sync:assets
npm run check:assets
npm run validate:csv
npm run smoke:domains
npm run smoke:stacks
npm run typecheck

# 5. CLI 빌드 및 테스트
# `npm run build`는 사용 가능한 경우 Bun을 사용하며, `npm ci` 이후 TypeScript 컴파일러 출력으로 폴백됩니다.
npm run build
node dist/index.js init --ai claude --offline  # 임시 폴더에서 테스트

# 6. PR 생성 (main에 직접 푸시 금지)
git checkout -b feat/your-feature
git commit -m "feat: description"
git push -u origin feat/your-feature
gh pr create
```

자세한 개발 가이드라인은 [CLAUDE.md](CLAUDE.md)를 참조하세요.

## 자동화된 릴리스

이 저장소는 Conventional Commits와 함께 semantic-release를 사용하여 GitHub 릴리스를 자동으로 생성합니다:

- `dev` 브랜치는 `2.6.0-beta.1`과 같은 베타 GitHub 사전 릴리스를 생성합니다.
- `main` 브랜치는 `2.6.0`과 같은 공식 안정판 GitHub 릴리스를 생성합니다.

릴리스 노트와 `CHANGELOG.md`는 Conventional Commit 메시지에서 생성됩니다. 릴리스 준비 과정에서 버전 번호는 `skill.json`, `.claude-plugin/plugin.json`, `.claude-plugin/marketplace.json`, `cli/package.json`, `cli/package-lock.json` 전반에 걸쳐 동기화됩니다.

올바른 버전 업그레이드를 위해 다음 커밋 타입을 사용하세요:

- `fix:` -> 패치 릴리스
- `feat:` -> 마이너 릴리스
- `feat!:` 또는 `BREAKING CHANGE:` -> 메이저 릴리스

릴리스 워크플로는 GitHub 릴리스를 위해 기본 `GITHUB_TOKEN`을 사용하고, `ui-ux-pro-max-cli`를 npm에 게시하기 위해 저장소 `NPM_TOKEN` 시크릿을 사용합니다.

## 문제 해결

### `uipro: unknown command 'uninstall'` 또는 `unknown command 'update'`

설치된 `ui-ux-pro-max-cli` 버전이 오래되었습니다. 업데이트 후 다시 시도하세요:

```bash
npm install -g ui-ux-pro-max-cli@latest
uipro uninstall
```

### `uipro uninstall`이 "No installed AI skill directories detected" 메시지를 표시하는 경우

스킬이 명령어를 실행 중인 디렉터리가 아닌 다른 디렉터리에 설치되었습니다. 다음 중 하나를 시도하세요:

```bash
# 옵션 A — 원래 설치했던 프로젝트 루트에서 실행
cd /path/to/your/project
uipro uninstall

# 옵션 B — 전역 설치 제거
uipro uninstall --global

# 옵션 C — 수동 제거
rm -rf .claude/skills/ui-ux-pro-max   # Claude Code
rm -rf .cursor/skills/ui-ux-pro-max   # Cursor
rm -rf .windsurf/skills/ui-ux-pro-max # Windsurf
rm -rf .agents/skills/ui-ux-pro-max   # Antigravity / Codex
```

### Claude Marketplace 설치가 "Zip file contains a symbolic link" 오류로 실패하는 경우

v2.5.1 이전 버전에서 발생하는 알려진 문제입니다. 저장소 내부적으로 일부 설치 도구가 처리할 수 없는 심볼릭 링크를 사용했습니다. **해결책:** 대신 CLI 설치 프로그램을 사용하세요:

```bash
npm install -g ui-ux-pro-max-cli
uipro init --ai claude
```

또는 이 문제가 해결된 다음 릴리스를 기다려 주세요.

### `npm install -g ui-ux-pro-max-cli`가 권한 오류로 실패하는 경우

Node 버전 매니저(권장)를 사용하거나 전역 설치를 완전히 건너뛰세요:

```bash
# 전역 설치 없이 npx 사용
npx ui-ux-pro-max-cli init --ai claude
```

### 디자인 시스템 명령어 실행 시 Python을 찾을 수 없는 경우

검색 스크립트는 Python 3.x가 필요합니다. [python.org](https://www.python.org/downloads/) 또는 OS 패키지 매니저(Homebrew, apt, winget)를 통해 수동으로 설치하세요. AI 에이전트가 대신 설치하도록 지시되어 있지 않으며, 대신 사용자에게 요청하도록 안내되어 있습니다.

### 디자인 시스템 출력이 잘리거나 필드가 생략된 경우

사람이 읽기 쉬운 출력은 300자 이상의 긴 필드를 생략합니다. 잘리지 않은 전체 데이터를 보려면 `--json`을 사용하세요:

```bash
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "SaaS" --domain style --json
```

---

## 스타 히스토리

[![Star History Chart](https://api.star-history.com/svg?repos=nextlevelbuilder/ui-ux-pro-max-skill&type=Date)](https://star-history.com/#nextlevelbuilder/ui-ux-pro-max-skill&Date)

## 라이선스

이 프로젝트는 [MIT License](LICENSE)에 따라 라이선스가 부여됩니다.

## 호환되는 에이전트

이 스킬은 다음 플랫폼과 호환됩니다:
- [Claude Code](https://claude.com/product/claude-code)
- [AdaL](https://sylph.ai/) - 자기 진화형 AI 코딩 에이전트 ([문서](https://docs.sylph.ai/) | [GitHub](https://github.com/SylphAI-Inc/adal-cli))

ui-ux-pro-max-skill

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

ui-ux-pro-max-skill

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README