Repolode
제출하기
plugin87

plugin87/ux-ui-agent-skills

Claude를 비롯한 코딩 에이전트를 UX/UI 디자인 전문가로 만들어 주는 순수 지침·지식 키트로, DTCG 토큰, 컴포넌트 명세, 138개 디자인 시스템, 52개의 객관적 검증 항목을 제공합니다.

GitHub에서 보기웹사이트
스타
2,375
포크
253
열린 이슈
11
마지막 커밋
13시간 전

어떤 프로젝트인가요?

UX/UI Agent Skills는 구조화된 지침, 디자인 토큰, 실행 가능한 스킬, 참조 디자인 시스템으로 구성된 키트로, AI 코딩 에이전트가 디자인 작업을 수행하도록 안내합니다. Primitive, Semantic, Component의 3단계로 구성된 DTCG 형식 토큰을 생성하고, 구조·상태·접근성 명세를 포함해 아톰부터 템플릿까지 컴포넌트를 설계합니다. 또한 React with Tailwind, Next.js, SwiftUI, Vue, Svelte, Flutter 등을 비롯한 다양한 프레임워크용 코드를 어댑터 프로토콜을 통해 생성합니다.

프로젝트에는 결과물을 객관적으로 검사하는 52개의 검증 항목이 포함되어 있습니다. 이 중 약 34개는 헤드리스 브라우저를 실행해 렌더링된 HTML의 각 상태별 WCAG 대비, axe-core 역할, 키보드 조작, 타깃 크기, 모션 감소 설정, 좁은 화면에서의 가로 넘침을 측정합니다. 나머지 검사는 토큰 파일, 컴포넌트 명세, 소스 코드를 확인해 하드코딩된 값, 이모지, 의도 선언 없이 정의된 파괴적 컨트롤을 찾습니다. 138개 항목으로 구성된 디자인 시스템 라이브러리와 모든 MCP 클라이언트에 검증 항목, 설계 원칙, 토큰을 제공하는 MCP 서버도 포함되어 있습니다.

설치 방법으로는 Claude Code 플러그인, npx 명령어, Homebrew, Codex, Cursor, Copilot, Aider용 AGENTS.md 인터페이스가 있습니다. 규칙을 자동으로 적용하는 훅은 Claude Code 경로에서만 사용할 수 있습니다.

핵심 기능

  • 013단계 Primitive, Semantic, Component 구조로 DTCG 형식 디자인 토큰을 생성합니다.
  • 0252개의 객관적 검사를 제공하며, 그중 약 34개는 헤드리스 브라우저에서 렌더링된 페이지를 측정합니다.
  • 03검사 항목에서 WCAG 2.2 대비, 키보드 조작, 타깃 크기, 모션 감소 설정을 확인합니다.
  • 04참조용으로 이름이 지정된 디자인 시스템 138개를 라이브러리로 제공합니다.
  • 05React, Next.js, SwiftUI, Vue, Svelte, Flutter 등을 비롯한 프레임워크에 맞춰 결과물을 조정합니다.
  • 06MCP 서버를 통해 검증 항목, 설계 원칙, 토큰을 제공합니다.

활용 사례

  • 코딩 에이전트가 일관된 토큰과 접근성 검사를 적용해 새 UI를 설계하고 구현하도록 합니다.
  • 기존 인터페이스에서 WCAG 대비, 타깃 크기, 화면 넘침 문제를 점검합니다.
  • 팀의 프런트엔드 프로젝트에 디자인 토큰 파이프라인과 컴포넌트 명세를 추가합니다.
  • 시스템을 마이그레이션하거나 서로 매핑할 때 공유 디자인 시스템 참조 자료를 활용합니다.

빠른 시작

  1. 1

    Claude Code를 열고 키트를 Claude Code 플러그인으로 설치합니다(README의 옵션 A, 명령어 2개).

  2. 2

    docs/INSTALL.md를 살펴보고 다른 설치 방법(Codex와 Cursor용 AGENTS.md, MCP 서버, Homebrew, npx)을 비교합니다.

사용 전 알아둘 점

  • README 발췌본에서 플러그인 설치 명령어가 중간에 잘려 있어 정확한 명령어는 여기에 표시되지 않습니다.
  • 브라우저 기반 전체 게이트 검증은 실제 브라우저를 열기 때문에 키트 설치 외에 추가 설정이 필요합니다.

토픽

#design-system#design-tokens#accessibility#wcag#ai-agents#claude-code#ui#tailwindcss#claude#claude-skills

자주 묻는 질문

ux-ui-agent-skills은(는) 무엇인가요?
Claude를 비롯한 코딩 에이전트를 UX/UI 디자인 전문가로 만들어 주는 순수 지침·지식 키트로, DTCG 토큰, 컴포넌트 명세, 138개 디자인 시스템, 52개의 객관적 검증 항목을 제공합니다. UX/UI Agent Skills는 구조화된 지침, 디자인 토큰, 실행 가능한 스킬, 참조 디자인 시스템으로 구성된 키트로, AI 코딩 에이전트가 디자인 작업을 수행하도록 안내합니다. Primitive, Semantic, Component의 3단계로 구성된 DTCG 형식 토큰을 생성하고, 구조·상태·접근성 명세를 포함해 아톰부터 템플릿까지 컴포넌트를 설계합니다. 또한 React with Tailwind, Next.js, SwiftUI, Vue, Svelte, Flutter 등을 비롯한 다양한 프레임워크용 코드를 어댑터 프로토콜을 통해 생성합니다.
ux-ui-agent-skills은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
ux-ui-agent-skills은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
ux-ui-agent-skills은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. ux-ui-agent-skills의 마지막 커밋은 2026년 10월 19일입니다.
ux-ui-agent-skills은(는) 어디에 사용할 수 있나요?
코딩 에이전트가 일관된 토큰과 접근성 검사를 적용해 새 UI를 설계하고 구현하도록 합니다. 기존 인터페이스에서 WCAG 대비, 타깃 크기, 화면 넘침 문제를 점검합니다. 팀의 프런트엔드 프로젝트에 디자인 토큰 파이프라인과 컴포넌트 명세를 추가합니다. 시스템을 마이그레이션하거나 서로 매핑할 때 공유 디자인 시스템 참조 자료를 활용합니다.
ux-ui-agent-skills는 어떻게 설치하나요?
Claude Code를 열고 키트를 Claude Code 플러그인으로 설치합니다(README의 옵션 A, 명령어 2개). docs/INSTALL.md를 살펴보고 다른 설치 방법(Codex와 Cursor용 AGENTS.md, MCP 서버, Homebrew, npx)을 비교합니다.
ux-ui-agent-skills은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/plugin87/ux-ui-agent-skills

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트