UI UX Pro Max

84개 스타일·192개 제품 규칙·22개 스택을 검색해 에이전트용 디자인 시스템을 만드는 스킬

npm install -g ui-ux-pro-max-cli && uipro init --ai codex

AI 코딩 에이전트가 화면을 만들기 전에 제품 유형, 시각 스타일, 색상, 타이포그래피, 랜딩 구조와 금지 패턴을 검색해 일관된 디자인 시스템을 제안하도록 하는 MIT 스킬입니다. Basic 저장소에는 84개 UI 스타일, 192개 제품 유형·색상 팔레트, 74개 폰트 조합, 25개 차트 유형, 98개 UX 지침과 161개 산업별 추론 규칙이 들어 있습니다. BM25 검색과 조건 규칙으로 SaaS·금융·의료·커머스 등 문맥에 맞는 패턴을 고르고 React, Next.js, Vue, Svelte, SwiftUI, Flutter, Tailwind 등 22개 스택별 구현 지침을 냅니다. npm CLI로 Claude Code·Codex·Cursor·Qoder·Gemini CLI 등 대상 에이전트의 프로젝트 디렉터리에 설치할 수 있습니다. Premium은 로고·브랜드·프레젠테이션·이미지 자산과 팀 지원을 더하는 같은 브랜드의 상위 계층입니다.

판단

이럴 때 씁니다

  • 에이전트가 구현하기 전에 제품 유형에 맞는 스타일·색상·폰트·페이지 구조를 정해야 할 때
  • 여러 프레임워크에서 같은 디자인 의도를 유지하는 스택별 지침이 필요할 때
  • AI가 임의의 보라색 그라디언트 같은 업종 부적합 패턴을 선택하지 않도록 규칙을 제공할 때

이럴 땐 쓰지 마세요

  • 이미 확정된 사내 디자인 시스템과 토큰이 있어 외부 추천 규칙이 불필요한 프로젝트
  • 사용자 조사·접근성 테스트 없이 자동 추천만으로 최종 디자인을 승인하려는 경우
  • Python과 Node.js 런타임을 프로젝트에 둘 수 없는 환경

차별점

  • 192개 제품 유형과 161개 산업별 규칙을 이용해 스타일뿐 아니라 랜딩 구조·색상·타이포·금지 패턴을 함께 결정합니다.
  • BM25 검색으로 84개 스타일·192개 팔레트·74개 폰트 조합에서 요청 문맥에 가까운 항목을 찾습니다.
  • 웹·모바일·데스크톱을 아우르는 22개 구현 스택별 지침과 접근성·사전 납품 체크리스트를 제공합니다.
  • 하나의 CLI가 Claude Code·Codex·Cursor·Windsurf·Qoder·Gemini CLI 등 여러 에이전트용 디렉터리를 생성합니다.

워크플로

  1. 01공식 CLI를 설치하고 프로젝트 루트에서 대상 에이전트용 `uipro init`을 실행합니다.
  2. 02제품 유형, 사용자, 플랫폼, 브랜드 제약과 구현 스택을 요청에 명시합니다.
  3. 03스킬이 BM25 다중 도메인 검색으로 패턴·스타일·팔레트·타이포를 고르고 금지 패턴을 함께 냅니다.
  4. 04생성된 디자인 시스템을 기존 브랜드 토큰과 접근성 기준에 맞춰 수정합니다.
  5. 05에이전트가 구현한 화면을 실제 뷰포트와 키보드·스크린리더·성능 조건에서 검증합니다.

주요 명령

명령설명
npm install -g ui-ux-pro-max-cli공식 npm CLI를 전역 설치합니다.
uipro init --ai codex현재 프로젝트에 Codex용 스킬 파일을 생성합니다.
uipro init --ai claude현재 프로젝트에 Claude Code용 스킬 파일을 생성합니다.
npx ui-ux-pro-max-cli init --ai <platform>전역 설치 권한이 없을 때 npx로 대상 에이전트 설정을 만듭니다.
uipro uninstall현재 프로젝트에서 생성된 에이전트 스킬 디렉터리를 제거합니다.

함정

설치 전에 확인하세요

  • 검색 스크립트에는 Python 3이 필요합니다. 에이전트가 임의로 설치하게 두지 말고 팀이 관리하는 런타임을 사용하세요.
  • Basic의 규칙은 좋은 출발점이지 브랜드 가이드나 사용자 조사 결과를 대체하지 않습니다. 실제 제품의 접근성·반응형·콘텐츠 조건으로 검증해야 합니다.
  • Premium은 같은 브랜드의 유료 기능 계층입니다. 오픈소스 Basic과 라이선스·지원·자산 생성 범위를 혼동하지 마세요.
  • v2.5.1 이전 캐시에는 심볼릭 링크 때문에 Claude 마켓플레이스 압축 설치가 실패한 이력이 있습니다. 오래된 설치는 최신 CLI로 다시 생성하세요.
  • 전역 npm 설치가 권한 오류를 내면 관리자 권한으로 강행하지 말고 Node 버전 관리자나 npx 경로를 사용하세요.

비교

Impeccable이 이미 만들어진 프론트엔드의 AI식 디자인 문제를 진단·수정하는 23개 명령에 가깝다면, UI UX Pro Max는 구현 전에 제품 문맥을 검색해 디자인 시스템과 스택별 규칙을 정하는 쪽입니다. OpenPencil이 시각 편집 캔버스라면 이 도구는 에이전트가 읽는 규칙·검색 데이터 계층입니다.

최근 변경

v2.15.0에서는 BM25 검색 relevance와 reasoning·data-quality 계약을 개편하고 UI style·framework guidance와 text·chip·badge·micro-interaction 지침을 보강했으며 release·provenance·catalog refresh gate를 강화했습니다.

공식 변경 내역