nextlevelbuilder/ui-ux-pro-max-skill

An AI SKILL that provide design intelligence for building professional UI/UX multiple platforms

GitHub에서 열기 ↗ ai-skillsantigravityclaudeclaude-codecodexcommand-linecopilotcursor-aihtml5kirolanding-pagemobile-uiqoderreacttailwindcsstraeui-designuikitwindsurf-ai

103,686

GitHub 스타

10,953

포크

Python

언어

MIT

라이선스

2026.07.06

최근 푸시

2026.05.30

별표한 날

AI 분석

설치 난이도: 쉬움

큐레이터 노트

디자인 시스템을 빠르게 프로토타이핑하거나, 다양한 업종에 맞는 UI 스타일 가이드를 자동 생성해야 하는 프로젝트에 적합합니다. 특히 AI 코딩 도구(Claude Code, Cursor 등)와 함께 사용하면 생산성을 크게 높일 수 있습니다.

강점

방대한 디자인 지식 베이스(67개 스타일, 161개 팔레트, 57개 폰트 조합)를 AI 추론 엔진으로 자동 매칭하여 빠른 디자인 시스템 생성을 지원합니다.
v2.0의 디자인 시스템 생성기는 업종별 추론 규칙(161개)과 안티 패턴 필터링을 통해 실무에 바로 적용 가능한 구체적인 결과물을 제공합니다.
다양한 기술 스택(React, Flutter, SwiftUI 등 22개)을 지원하여 웹, 모바일, 데스크톱 등 멀티 플랫폼 프로젝트에 활용할 수 있습니다.

약점

README에 설치 방법, CLI 사용법, API 문서 등 실제 사용을 위한 구체적인 가이드가 누락되어 있습니다.
스타일 목록이 49개까지만 표시되고 나머지는 생략되어 있어 전체 스타일을 한눈에 파악하기 어렵습니다.
npm 패키지(ui-ux-pro-max-cli)가 언급되나 해당 패키지의 설치 및 사용 방법에 대한 설명이 README에 포함되어 있지 않습니다.

주의사항

README가 매우 길고 상세하지만, 실제 프로젝트에 적용하려면 추가 문서나 CLI 도움말을 참고해야 할 수 있습니다.
생성된 디자인 시스템은 AI 기반 추천이므로, 실제 사용 전에 반드시 검토 및 커스터마이징이 필요합니다.
라이선스는 MIT이나, 포함된 폰트나 아이콘 등 서드파티 리소스의 라이선스를 별도로 확인해야 합니다.

시작 가이드

README에 누락된 설치 및 사용법 문서를 확인하기 위해 공식 웹사이트(uupm.cc)나 npm 패키지 페이지를 방문합니다.
CLI 도구(ui-ux-pro-max-cli)를 설치하고 실제 프로젝트에서 디자인 시스템 생성을 테스트합니다.
생성된 디자인 시스템을 기반으로 랜딩 페이지나 앱 UI를 구현하고, 필요에 따라 규칙을 커스터마이징합니다.

README 한국어 번역

이 번역은 AI가 원문 README를 옮긴 것입니다. 원문이 항상 우선합니다.

UI UX Pro Max

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

v2.0 새로운 기능

지능형 디자인 시스템 생성

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

+----------------------------------------------------------------------------------------+
|  TARGET: Serenity Spa - RECOMMENDED DESIGN SYSTEM                                      |
+----------------------------------------------------------------------------------------+
|                                                                                        |
|  PATTERN: Hero-Centric + Social Proof                                                  |
|     Conversion: Emotion-driven with trust elements                                     |
|     CTA: Above fold, repeated after testimonials                                       |
|     Sections:                                                                          |
|       1. Hero                                                                          |
|       2. Services                                                                      |
|       3. Testimonials                                                                  |
|       4. Booking                                                                       |
|       5. Contact                                                                       |
|                                                                                        |
|  STYLE: Soft UI Evolution                                                              |
|     Keywords: Soft shadows, subtle depth, calming, premium feel, organic shapes        |
|     Best For: Wellness, beauty, lifestyle brands, premium services                     |
|     Performance: Excellent | Accessibility: WCAG AA                                    |
|                                                                                        |
|  COLORS:                                                                               |
|     Primary:    #E8B4B8 (Soft Pink)                                                    |
|     Secondary:  #A8D5BA (Sage Green)                                                   |
|     CTA:        #D4AF37 (Gold)                                                         |
|     Background: #FFF5F5 (Warm White)                                                   |
|     Text:       #2D3436 (Charcoal)                                                     |
|     Notes: Calming palette with gold accents for luxury feel                           |
|                                                                                        |
|  TYPOGRAPHY: Cormorant Garamond / Montserrat                                           |
|     Mood: Elegant, calming, sophisticated                                              |
|     Best For: Luxury brands, wellness, beauty, editorial                               |
|     Google Fonts: https://fonts.google.com/share?selection.family=...                  |
|                                                                                        |
|  KEY EFFECTS:                                                                          |
|     Soft shadows + Smooth transitions (200-300ms) + Gentle hover states                |
|                                                                                        |
|  AVOID (Anti-patterns):                                                                |
|     Bright neon colors + Harsh animations + Dark mode + AI purple/pink gradients       |
|                                                                                        |
|  PRE-DELIVERY CHECKLIST:                                                               |
|     [ ] No emojis as icons (use SVG: Heroicons/Lucide)                                 |
|     [ ] cursor-pointer on all clickable elements                                       |
|     [ ] Hover states with smooth transitions (150-300ms)                               |
|     [ ] Light mode: text contrast 4.5:1 minimum                                        |
|     [ ] Focus states visible for keyboard nav                                          |
|     [ ] prefers-reduced-motion respected                                               |
|     [ ] Responsive: 375px, 768px, 1024px, 1440px                                       |
|                                                                                        |
+----------------------------------------------------------------------------------------+

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

┌─────────────────────────────────────────────────────────────────┐
│  1. USER REQUEST                                                │
│     "Build a landing page for my beauty spa"                    │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│  2. MULTI-DOMAIN SEARCH (5 parallel searches)                   │
│     • Product type matching (161 categories)                    │
│     • Style recommendations (67 styles)                         │
│     • Color palette selection (161 palettes)                    │
│     • Landing page patterns (24 patterns)                       │
│     • Typography pairing (57 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개 업종별 추론 규칙

추론 엔진에는 다음과 같은 특화 규칙이 포함됩니다:

	카테고리	예시
	Tech & SaaS	SaaS, Micro SaaS, B2B Service, Developer Tool / IDE, AI/Chatbot Platform, Cybersecurity Platform
	Finance	Fintech/Crypto, Banking, Insurance, Personal Finance Tracker, Invoice & Billing Tool
	Healthcare	Medical Clinic, Pharmacy, Dental, Veterinary, Mental Health, Medication Reminder
	E-commerce	General, Luxury, Marketplace (P2P), Subscription Box, Food Delivery
	Services	Beauty/Spa, Restaurant, Hotel, Legal, Home Services, Booking & Appointment
	Creative	Portfolio, Agency, Photography, Gaming, Music Streaming, Photo/Video Editor
	Lifestyle	Habit Tracker, Recipe & Cooking, Meditation, Weather, Diary, Mood Tracker
	Emerging Tech	Web3/NFT, Spatial Computing, Quantum Computing, Autonomous Drone Fleet

권장 패턴 - 랜딩 페이지 구조
스타일 우선순위 - 가장 잘 맞는 UI 스타일
색상 분위기 - 업계에 적합한 팔레트
타이포그래피 분위기 - 글꼴 개성 매칭
주요 효과 - 애니메이션 및 상호작용
안티 패턴 - 하지 말아야 할 것 (예: 은행 앱에 "AI 보라/분홍 그라데이션")

각 규칙에는 다음이 포함됩니다:

기능

67가지 UI 스타일 - Glassmorphism, Claymorphism, Minimalism, Brutalism, Neumorphism, Bento Grid, Dark Mode, AI-Native UI 등
161가지 색상 팔레트 - 161개 제품 유형과 1:1로 매칭되는 업종별 팔레트
57가지 글꼴 조합 - 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
99가지 UX 가이드라인 - 모범 사례, 안티 패턴, 접근성 규칙
161가지 추론 규칙 - 업종별 디자인 시스템 생성 (v2.0 신규)

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

#	스타일	적합 대상
1	Minimalism & Swiss Style	Enterprise apps, dashboards, documentation
2	Neumorphism	Health/wellness apps, meditation platforms
3	Glassmorphism	Modern SaaS, financial dashboards
4	Brutalism	Design portfolios, artistic projects
5	3D & Hyperrealism	Gaming, product showcase, immersive
6	Vibrant & Block-based	Startups, creative agencies, gaming
7	Dark Mode (OLED)	Night-mode apps, coding platforms
8	Accessible & Ethical	Government, healthcare, education
9	Claymorphism	Educational apps, children's apps, SaaS
10	Aurora UI	Modern SaaS, creative agencies
11	Retro-Futurism	Gaming, entertainment, music platforms
12	Flat Design	Web apps, mobile apps, startup MVPs
13	Skeuomorphism	Legacy apps, gaming, premium products
14	Liquid Glass	Premium SaaS, high-end e-commerce
1

[...생략...]

원본 저장소: nextlevelbuilder/ui-ux-pro-max-skill

라이선스: MIT

게재 제외를 원하시면 삭제 요청을 보내주세요.