plugin87/ux-ui-agent-skills

해결하는 문제

AI 에이전트는 종종 '슬롭(slop)'을 생성합니다. 이는 범용적이고 초점이 없으며, 하드코딩된 값을 사용하고 기본적인 접근성 표준을 충족하지 못하는 UI를 의미합니다. 본 프로젝트는 구조화된 지식 레이어와 객관적인 검증 도구 세트를 제공하여 LLM(특히 Claude)을 시니어 디자인 아키텍트로 변환합니다. 이를 통해 모든 프레임워크에서 즉시 배포 가능하고 접근성이 뛰어나며 토큰 기반의 UX/UI 디자인을 생성할 수 있습니다.

작동 방식

이 키트는 런타임 라이브러리가 아닌 순수한 지침 및 지식 레이어로 작동합니다. 다음과 같은 요소들을 결합합니다:

• 구조화된 지침: 에이전트의 '디자인 교리'를 정의하는 CLAUDE.md 및 규칙 파일.
• 디자인 토큰: DTCG 형식을 사용하는 3계층 아키텍처(Primitive $\rightarrow$ Semantic $\rightarrow$ Component).
• 객관적 게이트: 52개의 자동화된 검사(그중 34개는 Playwright를 통해 실제 브라우저에서 실행)를 통해 WCAG 2.2 대비, 타겟 크기, 반응형 오버플로우 및 '슬롭'을 검증합니다.
• 실행 가능한 기술: 에이전트가 특정 디자인 작업이나 감사를 수행하기 위해 호출할 수 있는 25개의 기술 및 슬래시 명령어(예: /brandkit, /critique, /gate).
• 프레임워크 어댑터: React와 Tailwind부터 SwiftUI와 Flutter까지, 에이전트가 모든 스택을 타겟팅할 수 있도록 하는 프로토콜.

대상 사용자

AI 코딩 에이전트(Claude Code, Cursor, Codex, Aider 등)를 사용하는 개발자 및 디자이너로서, 수동 핸드오프 없이 전문적인 디자인 시스템 표준을 준수하는 고충실도 및 접근성 높은 UI 컴포넌트와 전체 화면이 필요한 분들.

주요 특징

• 안티 슬롭 교리: 범용적인 그라데이션이나 일관성 없는 모서리 반경과 같은 일반적인 AI 생성 UI 패턴을 구체적으로 감지하고 거부합니다.
• 포괄적인 접근성: 포커스 트랩 및 모션 감소 정책을 포함한 WCAG 2.2 AA/AAA 표준 감사를 내장하고 있습니다.
• 방대한 지식 베이스: 138개의 브랜드급 디자인 시스템과 52개의 컴포넌트 사양이 포함되어 있습니다.
• 멀티 에이전트 워크플로우: 정량화할 수 없는 UX 발견 사항을 근거로 작업 거부를 주장하는 design-critic 에이전트가 포함되어 있습니다.
• 프레임워크 독립성: 유연한 어댑터 프로토콜을 통해 모든 프론트엔드 프레임워크를 지원합니다.