Claude를 디자인 아키텍트로: 52개 컴포넌트와 52개 검증 규칙

핵심 요약

• Claude를 시니어 디자인 아키텍트로 변환하는 UX/UI 에이전트 스킬 킷 공개 — 디자인 토큰, 컴포넌트, 접근성, 138개 디자인 시스템 규칙과 19개 실행 가능한 스킬을 포함한다.
• DTCG 형식 토큰 생성, Atomic Design 기반 컴포넌트 설계, React·Vue·Swift·Flutter 등 모든 프레임워크를 대상으로 한 코드 생성 어댑터를 제공한다.
• 52개의 객관적 검증 규칙을 실행할 수 있으며, 이 중 34개는 실제 브라우저를 열어 렌더링된 HTML을 검사한다 — WCAG 2.2 AA/AAA 명도 대비, 포커스 트랩, RTL, 반응형, 터치 타겟 크기, 이모지 금지, 하드코딩 값 제거 등을 자동으로 확인한다.
• 19개의 검증 규칙은 파일을 읽는 방식으로 토큰 유효성, 컴포넌트 선언, 의도 선언, 코드 구조를 검사하며, 클라우드 기반 재해석을 통해 디자이너의 판단력도 AI 비평 에이전트로 포함한다.
• Claude Code 플러그인으로 설치하면 25개 스킬과 design-critic 에이전트를 사용할 수 있으며, MCP 서버·Homebrew·npx로도 설치 가능하다.
• 콜드 스타트 평가에서 두 에이전트가 독립적으로 브리프를 받아 14/14점을 획득했으며, 비평 단계에서만 8개 발견 사항(5개 Major)이 검출되었는데 이 모두 정성적(empty state 혼동, 토스트 신뢰성, 로딩 상태 혼동)이었다.
• 52개 검증 규칙은 나머지 18개 규칙이 놓친 4가지 결함(초점 부족, empty state 막힘, 토스트 무관성, 로딩 상태 혼동)도 설계된 테스트 세트에서 모두 통과했으므로, 통과 자체는 품질을 보장하지 않는다는 점을 명시한다.
• 산업 스크린 20개, 컴포넌트 하니스 모든 개, 참조 앱을 두 테마로 렌더링한 49개 라이브 페이지 데모와 명도·상태·포커스·RTL·감소 모션 조건별 풀 렌더링 검사 로그를 공개한다.
• 라이선스는 MIT이며 PR은 병합하지 않고 게이트 갭·재현·제안을 이슈로 받는다 — gate gap(통과해야 할 결함을 놓친 규칙)은 템플릿을 제공한다.
• CLAUDE.md와 AGENTS.md를 동기화 상태로 유지하며, Codex·Cursor·Copilot·Aider 같은 다른 에이전트도 AGENTS.md 규칙으로 138개 디자인 시스템과 모든 검증 규칙에 접근할 수 있다.