"UI/UX Pro Max"는 67개 UI 스타일 + 161개 색 팔레트 + 57개 폰트 페어링 + 99개 UX 가이드라인 + 25개 차트 타입 + 161개 산업별 추론 규칙을 CSV 데이터베이스 + Python 검색 엔진 + 마크다운 템플릿으로 묶어, Claude Code · Cursor · Windsurf 같은 코딩 에이전트가 자동 호출할 수 있게 만든 Agent Skill이다.
한 줄 명령(npm install -g uipro-cli → uipro init --ai claude)으로 끝나며, 이후엔 "랜딩 페이지 만들어줘"라고만 말해도 스킬이 알아서 작동한다 — 18개 코딩 에이전트(Claude·Cursor·Windsurf·Antigravity·Copilot·Kiro·Codex·Qoder·Roo Code·Gemini CLI·Trae·OpenCode·Continue·CodeBuddy·Droid·KiloCode·Warp·Augment) 호환.
SKILL.md(YAML frontmatter + 본문) 한 장으로 AI 에이전트에게 "언제 / 어떻게 이 능력을 쓰는지" 가르치는 패키지. Progressive Disclosure(3단계 로딩) 패턴으로 메타데이터만 항상 로드되고, 본문은 트리거될 때만 펼쳐진다. 이 레포의 SKILL.md는 "UI/UX 관련 요청이 오면 search.py로 디자인 시스템을 먼저 생성한 뒤 코드를 짜라"라고 에이전트에게 지시한다.옷가게에 갔는데 점원이 "어떤 분이세요?"라고 묻고는 "30대 직장인 + 결혼식 하객 + 봄 시즌 + 5만 원대"를 들으면 즉시 안에서 어울리는 셔츠·바지·구두를 한 세트로 묶어 들고 나오는 장면을 상상해 보자.
이 스킬이 하는 일이 정확히 그거다. "뷰티 스파 랜딩 페이지"를 던지면, 161개 산업 룰에서 "뷰티/스파"를 찾고, 거기서 정해진 패턴(Hero-Centric + Social Proof) → 스타일(Soft UI Evolution) → 색(Soft Pink + Sage Green + Gold) → 폰트(Cormorant Garamond / Montserrat) → 피해야 할 것(AI 보라색 그라데이션) → 출고 전 체크리스트까지 한 세트로 들고 나온다.
2026년 초까지만 해도 UI 스킬 레포는 대부분 "스타일 리스트 + 예제 코드"였다. 사용자가 직접 골라서 조립해야 했다. v2.0이 출시되며 등장한 Design System Generator — 즉 161개 산업 룰을 갖춘 추론 엔진 — 이 게임을 바꿨다. 더 이상 "글래스모피즘이란?"을 검색할 필요가 없다. "내 SaaS 만들어줘"라고 하면 어울리는 스타일이 자동으로 결정된다.
한 번 만든 스킬을 Claude Code 전용으로 묶지 않았다. uipro init --ai <platform> 한 줄이면 그 도구의 표준 경로(.claude/skills/ · .cursor/skills/ · .factory/skills/ 등)에 맞춰 자동 배포된다. "Claude도 Cursor도 Windsurf도 다 쓸 수 있는 디자인 두뇌"라는 포지셔닝은 코딩 에이전트 시장이 파편화될수록 더 큰 모트가 된다.
예전엔 .cursor/·.windsurf/ 폴더를 모두 손으로 관리했지만, v2.0부터 Source of Truth(src/ui-ux-pro-max/)에서 CLI가 동적으로 생성한다. 새 코딩 에이전트가 등장하면 templates/platforms/에 JSON 한 장만 추가하면 끝. 이 구조가 18개 어댑터를 유지보수 가능하게 만든 비밀이다.
대부분의 디자인 시스템 도구는 "이 색이 좋다"를 알려준다. 이 스킬의 차별점은 "이건 절대 하지 마라"를 같이 알려준다는 것. 예를 들어 핀테크 뱅킹 앱이면 "AI 보라/핑크 그라데이션 금지 — 도박 사이트 인상을 준다"가 자동으로 끼어든다. 161개 산업마다 다른 안티패턴이 명시돼 있다.
| 도구 | 방식 | 한계 |
|---|---|---|
| Tailwind UI / shadcn/ui | 완성된 컴포넌트 라이브러리 | "어떤 스타일이 내 산업에 맞나"는 안 알려줌 |
| Adobe Color · Coolors | 색 팔레트 생성기 | 색만 — 타이포·레이아웃·산업 맥락 없음 |
| v0.dev · Lovable | AI UI 생성 | 매번 결과가 다름, 재현성 낮음, 사후 수정 어려움 |
| UI/UX Pro Max | 코딩 에이전트의 "두뇌"로 주입 | 코딩 에이전트가 알아서 호출 — 결정론적, 산업 맥락 인지 |
요즘 AI 도구는 한 줄 실행에 GB급 모델을 받지만, 이 스킬은 Python 3.x만 있으면 끝. 외부 의존성 0개. 데이터는 CSV 파일들이고 검색은 표준 라이브러리로 구현된 BM25 + 정규식 하이브리드. 디스크 ~564KB. 어떤 환경(로컬·NAS·CI·코덱스 컨테이너)에서도 즉시 돈다.
이 스킬의 "뇌"는 거대한 SQL DB가 아니라 평범한 CSV 파일들이다. src/ui-ux-pro-max/data/에 11개의 표가 들어 있고, 각각이 도메인 하나를 담당한다.
| CSV 파일 | 역할 | 레코드 수 |
|---|---|---|
products.csv | 제품 카테고리 → UI 카테고리 매핑 | 161개 산업 |
styles.csv | UI 스타일 정의 + AI 프롬프트 + CSS 키워드 | 67개 공식 분류 (일반 49 + 랜딩 8 + BI 10) — CSV에는 Mobile 17종 추가 포함, 전체 84행 |
colors.csv | 산업별 컬러 팔레트(HEX 5종 + 무드) | 161개 |
typography.csv | 구글 폰트 페어링 + 무드 태그 | 57개 (README 기준; CSV 실측 73행) |
landing.csv | 랜딩 페이지 구조 + CTA 배치 전략 | 24개 패턴 (README 기준; CSV 실측 34행) |
charts.csv | 차트 타입 + 추천 라이브러리 | 25개 |
ux-guidelines.csv | UX 모범 사례 / 안티패턴 / a11y 룰 | 99개 |
ui-reasoning.csv | 산업별 → (패턴, 스타일, 색, 폰트, 효과, 안티패턴) 결정 규칙 | 161개 (v2.0 신규) |
stacks/<name>.csv | 스택별 가이드라인(React·Next.js·Astro·Vue·Nuxt·Svelte·SwiftUI·RN·Flutter·shadcn·Jetpack Compose·Angular·Laravel·HTML+TW 등) | 15+ 스택 |
scripts/search.py가 CLI 진입점이고, 진짜 알고리즘은 core.py(BM25 + 정규식)와 design_system.py(추론 엔진)에 있다. 외부 의존성 0개 — 표준 라이브러리만 사용한다.
# 도메인 검색
python3 search.py "fintech banking" --domain color
python3 search.py "elegant serif" --domain typography
python3 search.py "dashboard" --domain chart
# 스택별 가이드라인
python3 search.py "form validation" --stack react
python3 search.py "responsive layout" --stack html-tailwind
# 디자인 시스템 생성 (메인 기능)
python3 search.py "beauty spa wellness" \
--design-system -p "Serenity Spa"
# 마크다운 출력
python3 search.py "saas dashboard" \
--design-system -f markdown --persistuipro-cli) + Claude Marketplacenpm에 publish된 uipro-cli는 TypeScript로 작성된 설치 도구. 두 가지 채널로 배포된다.
| 채널 | 설치 명령 | 위치 |
|---|---|---|
| npm CLI | npm install -g uipro-cli → uipro init --ai claude | 프로젝트 폴더 / ~/.claude/skills/ |
| Claude Marketplace | /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill/plugin install ui-ux-pro-max@ui-ux-pro-max-skill | Claude Code 내부 플러그인 |
Anthropic Skills 표준의 핵심 원리. "필요할 때만 펼친다". 이 스킬도 동일하게 구현됐다.
| 단계 | 로드되는 것 | 토큰 비용 |
|---|---|---|
| 1단계 (항상) | SKILL.md의 frontmatter(name + description) | ~50 토큰 |
| 2단계 (트리거 시) | SKILL.md 본문 (도구 사용법) | ~500 토큰 |
| 3단계 (실행 시) | search.py 결과 — 필요한 디자인 시스템만 | ~1000–2000 토큰 |
모든 데이터를 LLM 컨텍스트에 미리 넣으면 비용이 폭발하고 다른 작업의 공간을 잡아먹는다. Progressive Disclosure는 "필요한 만큼만, 필요한 순간에" 로드해 컨텍스트 효율을 극대화한다 — 이 패턴이 Anthropic이 2026년 공식 Skill 표준으로 밀어붙인 이유다.
같은 코어를 18개 에이전트에 어떻게 일관되게 배포할까? 정답은 템플릿 + 플랫폼 어댑터다.
한 번 생성한 디자인 시스템을 세션을 넘어 재사용할 수 있게 만든 점이 v2.0의 보석. --persist 플래그를 주면 다음 구조가 생성된다.
다음 세션에서 "체크아웃 페이지 만들어줘" 하면, 에이전트는 먼저 design-system/pages/checkout.md가 있는지 본다. 있으면 그것이 마스터를 오버라이드하고, 없으면 마스터를 그대로 쓴다. 계층적 검색(hierarchical retrieval) 패턴이다.
회사 옷차림 규칙을 떠올려 보자. 본사 매뉴얼(MASTER.md)에 "비즈니스 캐주얼"이 적혀 있고, 마케팅 팀 매뉴얼(pages/marketing.md)엔 "행사일엔 회사 로고 티"가 추가로 적혀 있다. 마케팅 팀원은 본사 룰을 따르되, 행사일엔 팀 룰이 우선이다. AI도 같은 식으로 작동한다.
| 파일 | 역할 | 왜 봐야 하나 |
|---|---|---|
src/.../scripts/core.py | BM25 + 정규식 하이브리드 검색 | "외부 라이브러리 없이 IR을 어떻게 구현하나"의 교과서 |
src/.../scripts/design_system.py | 추론 엔진 + 5개 병렬 검색 조립 | "AI에게 결정 권한을 위임하지 않고 룰로 결정"하는 방법 |
src/.../data/ui-reasoning.csv | 161개 산업 → 디자인 결정 룰 | 이 레포의 "지식 자산" 본체 |
src/.../templates/base/skill-content.md | 모든 어댑터가 공유하는 SKILL.md 본문 | Agent Skill 표준 문법의 실제 예제 |
cli/src/commands/init.ts | 18개 플랫폼 어댑터 분기 로직 | "한 코어, 멀티 채널 배포"의 실전 코드 |
SKILL.md의 YAML frontmatter + Markdown 본문 패턴은 이제 Anthropic 표준이지만, 처음 보면 "어디서 어떤 형식이 등장하나"가 모호하다. 이 레포는 "실전 예제 + 멀티 어댑터 적용"이라는 점에서 학습 가치가 가장 크다.
base/skill-content.md를 참고 템플릿으로 쓰면 1시간이면 완성된다.요즘은 "임베딩 + 벡터 DB"가 검색의 정답처럼 여겨지지만, BM25는 여전히 강력하다. 특히 (a) 검색어가 키워드 기반이고 (b) 데이터셋이 수천 행 이하면 BM25가 임베딩보다 정확하고 빠른 경우가 많다.
# BM25의 핵심 수식 (간략화)
score(D, Q) = Σ IDF(qi) · (TF(qi,D)·(k+1)) / (TF(qi,D) + k·(1-b + b·|D|/avgdl))
# 직관:
# - 단어가 문서에 자주 나올수록 점수↑ (TF)
# - 그 단어가 다른 문서엔 안 나올수록 점수↑ (IDF)
# - 문서가 너무 길면 페널티 (b가 조절)
# - 같은 단어 반복은 의미가 감소함 (k가 조절)OSS 도구를 만들 때 "어떤 채널로 배포할 것인가"는 매번 고민이다. 이 레포는 npm + Claude Marketplace 동시 운영의 모범 사례다. CI(.github/workflows/)에서 태그 푸시 시 양쪽을 동시에 publish하도록 자동화돼 있다.
이 레포의 진짜 자산은 코드가 아니라 큐레이션된 데이터셋이다. 누군가가 "글래스모피즘", "클레이모피즘", "브루탈리즘"의 차이를 다 알고 각각이 어떤 산업과 어울리는지 정리했다는 사실. 디자인 트렌드를 따라가는 사람에게 "이 시대 디자인의 지도"로 쓰일 수 있다.
대부분의 가이드라인은 "이렇게 해라"만 쓰는데, 이 레포는 산업마다 "이건 절대 하지 마라"를 같이 명시한다. 이건 단순한 디자인 팁이 아니라 의사결정 프레임워크다.
· 핀테크 / 뱅킹: AI 보라/핑크 그라데이션 금지 — 도박 사이트 인상
· 웰니스 / 스파: 다크모드 금지, 네온 컬러 금지 — 차분함 해침
· SaaS 대시보드: 픽셀아트 금지, 키네틱 타이포 금지 — 데이터 가독성 해침
· 의료 / 약국: AI 보라 금지, 화려한 효과 금지 — 신뢰감 해침
· 고급 럭셔리: Memphis Design 금지, Y2K 금지 — 격이 떨어짐
| 항목 | 요구사항 | 비고 |
|---|---|---|
| OS | Windows · macOS · Linux 모두 | 제약 없음 |
| Python | 3.x (3.8+ 권장) | 외부 패키지 0개 — 표준 라이브러리만 사용 |
| Node.js | 16+ (CLI 사용 시) | uipro-cli 설치용 |
| 디스크 | ~564KB | CSV + 스크립트만 |
| 메모리 | ~50MB | Python 프로세스 한 번 실행 |
| 네트워크 | 설치 시만 필요 | 실행은 오프라인 가능 (--offline 플래그) |
| 지원 에이전트 | Claude Code, Cursor, Windsurf, Antigravity, GitHub Copilot, Kiro, Codex CLI, Qoder, Roo Code, Gemini CLI, Trae, OpenCode, Continue, CodeBuddy, Droid (Factory), KiloCode, Warp, Augment | 총 18개 (2026.05 기준) |
대부분의 에이전트(Claude Code, Cursor, Windsurf 등)는 자동 트리거(Skill Mode)를 지원해 "랜딩 만들어줘"만 말하면 알아서 호출된다. 반면 Kiro, GitHub Copilot, Roo Code, KiloCode는 슬래시 커맨드(/ui-ux-pro-max ...)로 명시 호출이 필요하다. Trae는 SOLO 모드 전환 필수.
1. npm install -g uipro-cli
2. 빈 폴더 생성 → cd → uipro init --ai claude
3. Claude Code 열기 → "내 분석용 SaaS 대시보드 랜딩 페이지 만들어줘"라고 자연어로 요청
4. 스킬이 자동 호출되어 디자인 시스템이 먼저 출력되는지 확인
학습 포인트: Skill Mode 자동 트리거가 실제로 어떻게 작동하는지 눈으로 본다.
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech banking" --design-system -p "MyBank"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa" --design-system -p "Calm"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "indie game" --design-system -p "PixelDream"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "ai chatbot" --design-system -p "Bot42"
python3 .claude/skills/ui-ux-pro-max/scripts/search.py "wellness tracker" --design-system -p "Zen"학습 포인트: 같은 도구가 산업에 따라 어떻게 다른 결정을 내리는지(특히 안티패턴이 어떻게 달라지는지) 직접 비교.
# 1. 글로벌 마스터
python3 search.py "saas project management" --design-system --persist -p "MyApp"
# 2. 페이지별 오버라이드
python3 search.py "data dense dashboard" --design-system --persist -p "MyApp" --page "dashboard"
python3 search.py "conversion checkout" --design-system --persist -p "MyApp" --page "checkout"
# 3. design-system/ 폴더 구조 확인
tree design-system/학습 포인트: 계층적 검색 패턴이 실제로 어떻게 파일 구조로 표현되는지 확인. AI에게 "현재 페이지 컨텍스트"를 어떻게 명시적으로 전달하는지 학습.
1. 레포를 clone → src/ui-ux-pro-max/templates/platforms/에 my-agent.json 추가
2. paths, trigger 방식, file structure 정의
3. cli/src/commands/init.ts에서 분기 케이스 추가
4. uipro init --ai my-agent --offline으로 로컬 테스트
5. 출력된 폴더 구조가 정상인지 확인
학습 포인트: "한 코어 멀티 어댑터" 아키텍처의 실전 확장. CLI 도구의 동적 코드 생성 기법.
이 레포의 ui-reasoning.csv는 영미권 산업 중심이다. 한국 산업에 특화된 룰(예: K-팝 팬덤 사이트, 한국 부동산 앱, 한국 배달 앱, 한복 쇼핑몰, 한국 카드뉴스 뉴스앱, 노년층 친화 UI, 입시 학원 사이트…)을 161개 직접 큐레이션해 본다.
학습 포인트: 디자인 큐레이션 자체가 어떤 노동인지 체감. 자기 분야의 "디자인 지도"를 직접 그려 보는 것 — OSS에 PR로 기여하면 더 의미 있다.
| 주차 | 주제 | 구체적 작업 |
|---|---|---|
| 1주차 | Agent Skill 표준 입문 | · anthropics/skills 레포 읽기 · SKILL.md 1장 직접 작성 · Progressive Disclosure 패턴 이해 |
| 2주차 | BM25 + 정보 검색 | · 이 레포의 core.py 직접 읽고 주석 달기 · 자기 노트 폴더에 BM25 검색기 직접 구현 · 임베딩 검색과 결과 품질 비교 |
| 3주차 | UI 스타일 67종 완전 정복 | · 67 스타일 모두 1개씩 Tailwind로 구현 · uupm.cc에서 시각 자료 보며 키워드 외우기 · 산업별 추천 매핑 암기 |
| 4주차 | 컬러 이론 + 161 팔레트 분석 | · 161 팔레트를 HSL로 변환해 분석 · "산업 무드 → 색상" 매핑 룰 도출 · WCAG AA/AAA 대비 검사 자동화 스크립트 작성 |
| 5주차 | 타이포그래피 페어링 | · 57 폰트 페어링 모두 Google Fonts로 다운 · "엘레강스 vs 신뢰감 vs 장난기" 무드 매트릭스 · 한글 본고딕·Pretendard와 페어링 실험 |
| 6주차 | CLI 도구 + npm 배포 | · uipro-cli의 init.ts 코드 읽기 · 자기만의 미니 CLI를 TypeScript로 작성 + 배포 · 템플릿 엔진(handlebars vs ejs vs eta) 비교 |
| 7주차 | 코딩 에이전트 트리거 메커니즘 | · Claude Code Plugin · Cursor Rules · Windsurf Skills 표준 비교 · 같은 스킬을 3개 에이전트에서 호출해 결과 비교 · 어떤 트리거 단어가 가장 잘 잡히는지 실험 |
| 8주차 | 자기 도메인 스킬 출시 | · 자기 직업/취미 도메인(요리·음악·운동·법무 등)의 "Pro Max" 스킬 설계 · 데이터 큐레이션 100건 이상 · GitHub에 OSS로 공개 + Claude Marketplace 등록 |
backdrop-filter: blur(20px); background: rgba(255,255,255,0.1)npx shadcn add button으로 컴포넌트 소스를 복사해와 자기 코드처럼 수정. Tailwind + Radix UI 기반. 현재 사실상 React 표준..claude/skills/가 src/ui-ux-pro-max/로 symlink돼 있어, src만 수정하면 모든 어댑터에 자동 반영된다.{{name}}, {{path}})가 들어 있는 텍스트 템플릿에 데이터를 주입해 최종 결과물을 만드는 도구. Handlebars·EJS·Eta 등이 유명. uipro-cli는 자체 mini 엔진을 사용.