plugin87/ux-ui-agent-skills

해결하는 문제

이 프로젝트는 AI 에이전트(특히 Claude)를 고급 UX/UI 설계 아키텍트로 전환할 수 있는 포괄적인 지식과 지침 계층을 제공합니다. 일관성 없는, 접근성 없는, 또는 '잡다한' AI 생성 UI 문제를 해결하기 위해 구조화된 디자인 토큰, 접근성 기준(WCAG 2.2), 그리고 138개의 디자인 시스템 라이브러리를 제공하여 어떤 프론트엔드 프레임워크에서도 프로덕션 준비 완료된 토큰 기반 출력을 보장합니다.

작동 방식

이 키트는 CLAUDE.md 파일을 통해 Claude Code 또는 Claude 기반 IDE와 통합되는 순수한 지침 및 지식 계층으로 작동합니다. 필요에 따라 특정 규칙과 지식을 로드하기 위해 요청 라우터(Request Router) 를 사용합니다. 이 시스템은 세 가지 주요 구성 요소로 구성되어 있습니다:

1. 지식 계층: DTCG 형식의 방대한 디자인 토큰 라이브러리, 아토믹 디자인을 따르는 컴포넌트 사양, 그리고 미적 아키타입을 포함하는 '맛 레이어'.
2. 실행 가능한 스킬: /brandkit, /a11y-audit, /design-code 등 17개의 호출 가능한 /skills로 복잡한 디자인 워크플로우를 오케스트레이션합니다.
3. 목표 게이트: 토큰 유효성, 라이트 모드 및 다크 모드에서의 WCAG 대비 비율, 접근성 요구사항을 프로그래밍 방식으로 검증하여 정확성을 보장하는 Python 및 Node.js 스크립트 세트.

대상 사용자

UI 코드를 생성하기 위해 AI 에이전트를 사용하는 프론트엔드 개발자, 제품 디자이너, 팀으로서 전문 수준의 디자인 시스템, 엄격한 접근성 준수, 프레임워크에 의존하지 않는 구현을 필요로 하는 분들.

주요 특징

• 프레임워크 독립성: React, Next.js, SwiftUI, Vue, Svelte, Flutter 등 모든 스택을 대상으로 하는 어댑터 프로토콜 사용.
• 접근성 우선: 내장된 WCAG 2.2 AA/AAA 감사 및 자동 대비 비율 검증 스크립트.
• 디자인 토큰 아키텍처: DTCG 표준을 사용한 3단계 계층(Primitive → Semantic → Component) 구현.
• 풍부한 라이브러리: 시각적 방향성을 제공하는 138개의 브랜드 등급 디자인 시스템과 50개의 상세한 컴포넌트 사양 포함.
• 대립적 리뷰: design-critic 에이전트로 구동되는 /critique 스킬을 통해 작업을 렌더링하고 고급 디자인 증거를 바탕으로 거부를 주장합니다.