claude-design-auditor-skill은(는) 무엇을 하나요?
19가지 전문 디자인 규칙에 따라 디자인을 감사하는 Claude 스킬입니다.
개요
이 스킬은 Claude가 UI 디자인을 19가지 미리 정의된 전문 디자인 규칙에 대해 평가할 수 있게 해줍니다. 디자인 감사 프로세스를 자동화하여 일관성, 접근성, 시각적 계층 구조 및 기타 주요 디자인 원칙을 확인합니다.
지원 플랫폼
- Claude Code
- Claude Desktop (이미지 입력 지원)
- 기타 Claude 통합 환경
사용 방법
Claude와의 대화에서 디자인 스크린샷, 와이어프레임 또는 구성 요소 코드를 공유하면 스킬이 자동으로 분석합니다. 스킬을 명시적으로 활성화할 필요 없이 자연어 프롬프트로 요청할 수 있습니다.
예시 질문
- "이 디자인을 감사해 주세요."
- "이 UI에 디자인 규칙 위반 사항이 있나요?"
- "이 화면의 접근성 문제를 확인해 주세요."
19가지 디자인 규칙 목록
- 일관성 - 유사한 요소는 전체 디자인에서 일관된 스타일을 가져야 합니다.
- 접근성 - 색상 대비, 포커스 상태 및 키보드 탐색이 WCAG 지침을 충족해야 합니다.
- 시각적 계층 구조 - 가장 중요한 요소가 시각적으로 눈에 띄어야 합니다.
- 간격 및 여백 - 요소 간 간격이 일관되고 적절해야 합니다.
- 타이포그래피 - 글꼴 크기, 줄 간격 및 가중치가 읽기 쉬워야 합니다.
- 색상 사용 - 색상이 목적에 맞게 사용되고 과도하게 사용되지 않아야 합니다.
- 정렬 - 요소가 그리드 또는 기준선에 정렬되어야 합니다.
- 대비 - 텍스트와 배경 간 대비가 충분해야 합니다.
- 크기 및 배치 - 터치 대상 및 대화형 요소의 크기가 적절해야 합니다.
- 피드백 - 사용자 상호작용에 시각적 피드백이 제공되어야 합니다.
- 로딩 상태 - 로딩 중에는 적절한 표시기가 보여야 합니다.
- 오류 상태 - 오류 메시지가 명확하고 도움이 되어야 합니다.
- 빈 상태 - 데이터가 없을 때 안내 메시지가 표시되어야 합니다.
- 아이콘 일관성 - 아이콘이 동일한 스타일과 의미를 가져야 합니다.
- 버튼 계층 구조 - 기본, 보조 및 링크 버튼이 명확히 구분되어야 합니다.
- 양식 디자인 - 레이블, 입력 필드 및 오류가 명확해야 합니다.
- 반응형 고려 사항 - 디자인이 다양한 화면 크기에서 작동해야 합니다.
- 모션 및 애니메이션 - 애니메이션이 목적에 맞고 부드러워야 합니다.
- 하위 수준 원칙 - 그림자, 테두리 반경 및 기타 미세한 세부 사항이 일관되어야 합니다.
구성
이 스킬은 추가 구성이 필요하지 않습니다. Claude가 이미지 또는 코드 컨텍스트를 처리할 수 있는 모든 환경에서 작동합니다.
기여
이슈 또는 풀 리퀘스트를 통해 개선 사항이나 추가 규칙을 제안해 주세요.
라이선스
MIT