접근성 - 구성요소 확인

대화 상자/메뉴/양식 컨트롤을 구축했으며 11y 문제를 조기에 파악하고 싶습니다. 접근성 검토 후에도 유지되는 구성 요소입니다.

Claude Design Auditor (Claude Skill) — 설치 & 라이브 데모

왜 쓰나요

핵심 기능

18가지 감사 카테고리 — 타이포그래피, 대비, 간격, 계층 구조, 일관성, a11y, 양식, 모션, 다크 모드, 반응형, 상태, 복사, i18n/RTL, 고도, 아이콘, 탐색, 토큰, 윤리
다양한 입력 형식: Figma, HTML/CSS, React/Vue, 스크린샷, 와이어프레임, 산문
0-100 점수, 심각도 레이블, 별도의 a11y + 윤리 점수
각 수정 사항에 대한 이전/이후 코드 예시
내보내기: Markdown, Canva, 개발자 핸드오프

라이브 데모

실제 사용 모습

claude-design-auditor-skill.replay ▶ 준비됨

0/0

설치

작성자 저장소 · Claude Skills 공식 문서

사용 사례

실전 활용법: Claude Design Auditor

엔지니어링 부서로 배송하기 전에 설계를 감사합니다.

👤 개발 핸드오프를 준비하는 제품 디자이너 ⏱ ~30 min intermediate

언제 쓸까: 디자인이 '완료'되었으며 개발자가 복제를 시작하기 전에 최종 청소를 원합니다.

흐름

감사자를 호출합니다.

이 Figma 링크를 감사하세요: <url>. 범위: 전체.✓ 복사됨

→ 18개 규칙을 참조한 점수 + 순위 문제
중요한 문제를 해결하세요

Figma에서 심각도가 높은 상위 5개 수정 사항을 적용합니다. 전/후를 보여주세요.✓ 복사됨

→ 각 수정 사항에 대한 미리 보기 전/후
핸드오프 내보내기

토큰 및 a11y 메모를 사용하여 개발 핸드오프 마크다운을 내보냅니다.✓ 복사됨

→ 마크다운이 티켓에 추가될 준비가 되었습니다.

결과: 주요 문제가 이미 해결된 상태로 디자인이 개발팀에 도착합니다.

함정

점수를 목표로 삼는다 — 점수는 취향이 아닌 규칙 준수를 측정합니다. 숫자뿐만 아니라 발견 목록을 사용하십시오.

함께 쓰기: claude-code-design-skills

재설계 우선순위를 위해 레거시 UI 분류

👤 재설계를 소유한 설계 리드 ⏱ ~60 min advanced

언제 쓸까: 재설계를 계획하고 있으며 어디서부터 시작해야 할지에 대한 데이터가 필요합니다.

흐름

피드 화면 또는 URL

app.<url>의 상위 10개 화면을 감사합니다. 심각도별로 결과를 집계합니다.✓ 복사됨

→ 핫스팟이 포함된 교차 화면 롤업
시퀀싱 선택

규칙 카테고리별로 그룹화된 재설계 순서 계획을 제안합니다.✓ 복사됨

→ 느낌이 아닌 결과와 연결된 계획

결과: 구체적인 결함을 뒷받침하는 재설계 계획.

조합

다른 MCP와 조합해 10배 효율

claude-design-auditor-skill + claude-code-design-skills

감사 → Figma-to-code → 코드 재감사

Figma를 감사하고 React로 변환한 다음 React를 다시 감사하여 패리티를 확인합니다.✓ 복사됨

claude-design-auditor-skill + motion-dev-animations-skill

모션 전문가가 애니메이션을 추가/조정한 후 감사자의 모션 범위를 실행하게 하세요.

모션 개발당 스프링 애니메이션을 추가합니다. 그런 다음 모션 + 모션 감소 동작을 감사합니다.✓ 복사됨

claude-design-auditor-skill + figma

MCP를 통해 Figma 자산을 가져오고, 감사하고, 댓글을 다시 작성하세요.

플래그가 지정된 각 프레임에 대해 결과를 요약하는 Figma 주석을 추가합니다.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
design-audit (SKILL)	asset (Figma URL / image / code) + optional scope	핸드오프 전, 코드 검토 중 또는 재설계 계획의 일부로	0

비용 및 제한

운영 비용

API 쿼터: 없음
호출당 토큰: 대형 - 스크린샷과 긴 코드 블록이 지배적입니다.
금액: 무료
팁: 빠른 반복을 위해 공격적으로 범위를 지정합니다(11y만 또는 타이포그래피만). 전체 감사에는 토큰이 많이 필요합니다.

보안

권한, 시크릿, 파급범위

자격 증명 저장: 없음; Figma URL이 비공개인 경우 이미지 내보내기를 통해 공유하거나 적절한 범위의 Figma MCP를 사용하세요.

데이터 외부 송신: 기술에서 네트워크 출구가 없습니다. 이미지와 코드는 채팅에 그대로 유지됩니다.

녹색 점수 ≠ 좋은 디자인. 감사자는 규칙을 시행합니다. 제품 시장 적합성, 브랜드, 감성을 판단하는 것은 귀하의 몫입니다.
윤리/다크 패턴 카테고리는 경험적입니다. 법정 판결이 아닌 논의를 위한 프롬프트로 사용하십시오.

문제 해결

자주 발생하는 오류와 해결

감사자는 명백한 문제를 놓친다

입력 크기를 늘리거나 여러 뷰포트/스크린샷을 제공하세요. 휴리스틱은 적용 범위가 더 좋습니다.

확인: Re-run with extra screenshots

너무 많은 출력에 대해 경고하는 토큰

18개 규칙의 하위 집합으로 범위를 설정합니다.

확인: Ask for 'scope: typography + contrast + a11y' only

수정으로 인해 기존 디자인 시스템이 중단되었습니다.

감사자에게 귀하의 토큰 세트 내에 머물도록 지시하십시오. tokens.json을 제공합니다.

확인: Before/after diffs reference token names

대안

Claude Design Auditor 다른 것과 비교

대안	언제 쓰나	단점/장점
claude-code-design-skills	기존 작업을 감사하지 않고 Figma에서 코드로 이동하고 싶습니다.	파이프라인의 반대쪽을 덮습니다.
ai-friendly-web-design-skill	엄격한 감사자가 아닌 광범위한 웹 디자인 지침을 원합니다.	덜 구조화된 출력
apple-hig-designer-skill	Apple 플랫폼을 위해 특별히 디자인하고 계십니다.	범용이 아닌 플랫폼별

Claude Design Auditor