Claude Design Auditor MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

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

라이브 데모

실제 사용 모습

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

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "claude-design-auditor-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "claude-design-auditor-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/Ashutos1997/claude-design-auditor-skill",
        "~/.claude/skills/claude-design-auditor"
      ]
    }
  ]
}

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "claude-design-auditor-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/Ashutos1997/claude-design-auditor-skill",
          "~/.claude/skills/claude-design-auditor"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add claude-design-auditor-skill -- git clone https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/claude-design-auditor

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: Claude Design Auditor

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

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

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

사전 조건

스킬 장착 — 자식 클론 https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/

흐름

감사자를 호출합니다.

이 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