Communitygithub.com

HDC327/ai-visual-audit-skill

AI 시각적 개선 어시스턴트 — 디자인 리뷰 제안을 위한 에이전트 스킬

ai-visual-audit-skill란 무엇인가요?

이 스킬은 AI 에이전트(예: Claude Code, Cursor, Codex)가 디자인 리뷰를 수행할 수 있도록 지원합니다. 사용자 인터페이스의 시각적 요소를 분석하고 일관성, 접근성, 가독성 등의 측면에서 개선 제안을 제공합니다. 주로 웹 및 모바일 UI 컴포넌트를 대상으로 하며, 명확한 기준(예: 색상 대비, 여백, 타이포그래피)에 따라 리뷰를 자동화합니다. 개발자는 이 스킬을 사용하여 디자인 품질을 향상시키고 코드 리뷰 프로세스에 시각적 피드백을 통합할 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add HDC327/ai-visual-audit-skill

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

ai-visual-audit-skill은(는) 무엇을 하나요?

AI 시각적 개선 어시스턴트 — 디자인 리뷰 제안을 위한 에이전트 스킬

이 스킬은 AI 에이전트가 사용자 인터페이스의 시각적 요소를 분석하고 개선 제안을 제공할 수 있도록 합니다. 지원 플랫폼: Claude Code, Cursor, Codex.

사용 방법

  1. 에이전트에게 분석할 UI 컴포넌트 또는 페이지의 스크린샷, 코드 스니펫, 또는 설명을 제공합니다.
  2. 에이전트가 다음 기준에 따라 리뷰를 수행합니다:
    • 색상 대비 및 접근성
    • 여백 및 정렬 일관성
    • 타이포그래피 계층 구조
    • 시각적 계층 구조
  3. 각 항목에 대한 구체적인 제안을 받습니다.

예시

  • "이 버튼의 색상 대비를 확인해줘."
  • "로그인 페이지의 여백 일관성을 검토해줘."

참고 사항

  • 이 스킬은 디자인 시스템 가이드라인이 있는 프로젝트에서 특히 유용합니다.
  • 에이전트가 코드 컨텍스트를 이해할 수 있도록 관련 코드 조각을 함께 제공하는 것이 좋습니다.

관련 스킬