프로젝트 소개

# ux-skill — AI 코딩 도구를 위한 디자인 인텔리전스 엔진 ux-skill은 AI가 생성한 UI를 일반적이지 않고 독특하게 만들기 위해 설계된 **디자인 인텔리전스 엔진**입니다. Claude Code, Cursor, Windsurf, GitHub Copilot, Gemini CLI, Codex 등 17개 AI 코딩 도구와 통합됩니다. 이 엔진은 무료이며 MIT 라이선스이고, 오프라인으로 작동하며 LLM을 호출하지 않습니다. ## 주요 기능 - **결정론적 7축 신시사이저**: 템플릿에서 고르지 않고 브리프를 새로운 디자인 토큰(따뜻함, 대비, 밀도, 기하학, 격식, 모션, 타입 개성)으로 컴파일합니다. - **152개 안티 AI 슬롭 린터 규칙**: CI에서 실행되고 Critical/High 문제 시 비정상 종료하는 결정론적 정규식 기반 규칙입니다. - **160개 브랜드 스펙**: Apple, Stripe, Linear, Figma, Tesla, BMW, Notion, Spotify, Airbnb, Vercel, Supabase, Cursor, Raycast, Claude 등 브랜드의 실제 DESIGN.md 스펙입니다. - **12개 쿼리 가능 JSON 매니페스트**: 84개 스타일, 176개 팔레트, 70개 타입 페어링, 148개 컴포넌트, 184개 산업, 35개 차트 유형, 57개 모션 프리셋, 112개 UX 법칙, 152개 안티 패턴 규칙, 25개 기술 스택, 160개 브랜드 스펙. - **25개 슬래시 명령**: 디스커버리, 생성, 감사, 린트, 폴리시, 수정 루프, 케이스 스터디, 워크숍, 카피, 모션, a11y, 대시보드, 컨덕터 명령. - **5개 서브 에이전트**: 프런트엔드 엔지니어, 모션 엔지니어, 카피라이터, 리서치 신시사이저, 디자인 시스템 아키텍트. - **18개 MCP 도구**: ux_synthesize, ux_decisions_query, ux_decisions_stats 포함. - **17개 IDE 지원**: 동일한 엔진에 IDE별 다른 글루. - **오프라인 및 결정론적**: LLM 호출 없음, 동일 입력은 항상 동일 출력을 생성합니다. ## 설치 세 가지 설치 경로가 있습니다: ### 경로 1 — Claude Code 마켓플레이스 (표준) ```bash /plugin marketplace add Laith0003/ux-skill /plugin install ux@ux-skill ``` ### 경로 2 — pip (범용) ```bash pip install uxskill uxskill init # IDE를 자동 감지하고 올바른 아티팩트를 설치 uxskill stats # 설치 확인을 위해 매니페스트 개수 출력 uxskill lint . # 현재 디렉터리에 대해 린터 실행 ``` ### 경로 3 — npx (Python 불필요) ```bash npx uxskill init # 첫 실행 시 pipx + uxskill 다운로드 npx uxskill recommend --industry=fintech-neobank --tone=warm --stack=nextjs-15-app-router ``` ## 작동 방식 1. **입력**: `/ux-discover`(10개 필드) 또는 `ux recommend` 플래그를 통해 브리프를 제공합니다. 2. **5개 병렬 검색**: 엔진이 매니페스트 전반에 걸쳐 다섯 개 조회(산업, 스타일, 톤, 스택, 금지/지역)를 동시에 실행합니다. 3. **병합**: 결정론적 병합기가 후보 순위를 매기고 충돌을 해결합니다. 4. **출력**: 스타일, 팔레트, 타입 페어, 모션 프리셋, 컴포넌트, 브랜드 예시, 안티 패턴 가드레일이 포함된 JSON 문서. 5. **생성**: 다운스트림 명령이 추천을 소비하여 서브 에이전트를 통해 코드를 생성합니다. 6. **검증**: `/ux-lint`가 생성된 코드를 152개 정규식 규칙에 대해 재검사합니다. ## v3.1.0 하이라이트 - **브랜드 충실도 강제**: 로고 픽셀에서 기본 색상을 읽고, 기본 글꼴을 거부하며, 브랜드 색상/로고를 누락하거나 실제 이미지를 제공하지 않는 출력을 실패시키는 evaluate의 하드 플로어. - **모바일 우선 게이트**: 새로운 크래프트 기반과 가로 스크롤, 줄바꿈되는 내비/워드마크/버튼 라벨, 과도하게 높은 스티키 헤더에서 실패하는 랩 인식 게이트. - **와우 레이어**: 엔진이 페이지당 2-3개의 조화된 시그니처 모먼트를 도출합니다. - **더 예리한 린터**: 이미지 필수, 아이콘 전용 감지, 플레이스홀더 토큰 및 100vw 규칙을 포함한 152개 규칙. - **310개 통과 테스트**: 오프라인, 결정론적, LLM은 절대 호출되지 않음. ## 아키텍처 엔진은 다음으로 구성됩니다: - **data/**: 쿼리 가능 JSON 매니페스트(스타일, 팔레트, 타입 페어, 컴포넌트, 산업, 차트 유형, 기술 스택, UX 가이드라인, 모션 프리셋, 안티 패턴, 브랜드). - **engine/**: Python 추론 코어(신시사이저, 결정, 추천기, 린터, 디스커버리, 생성기, 설치기, CLI). - **commands/**: 25개 Claude Code 슬래시 명령(.md 파일). - **agents/**: 5개 서브 에이전트(.md 파일). - **references/**: 데이터 및 데모 페이지용 산문 소스. - **bin/**: npx 래퍼 및 린터 스크립트. - **.ux/**: 프로젝트별 상태 디렉터리. ## 비교 README에는 8개 다른 Claude UX 플러그인과의 정직한 비교가 포함되어 있으며, ux-skill이 이기는 부분(컴포넌트 라이브러리, 모션 프리셋, 안티 패턴 린터, 브랜드 스펙, 17개 IDE 지원, 25개 슬래시 명령)과 지는 부분(인지도, 브랜드 인지, 마케팅 완성도)을 명시합니다. ## 라이선스 MIT 라이선스. 저자: Laith Aljunaidy, 암만의 디자이너 겸 CTO. 사이트: uxskill.laithjunaidy.com. GitHub: Laith0003/ux-skill. PyPI: uxskill. npm: uxskill.