visual-verdict

<목적> 이 스킬은 생성된 UI 스크린샷을 하나 이상의 참조 이미지와 비교하고, 엄격한 JSON 판정을 반환하여 다음 편집 반복을 안내합니다. </목적>

<사용_조건>

• 작업에 시각적 충실도 요구사항(레이아웃, 간격, 타이포그래피, 컴포넌트 스타일링)이 포함된 경우
• 생성된 스크린샷과 최소 하나의 참조 이미지가 있는 경우
• 편집을 계속하기 전에 결정적인 합격/불합격 지침이 필요한 경우 </사용_조건>

<입력>

• reference_images[] (하나 이상의 이미지 경로)
• generated_screenshot (현재 출력 이미지)
• 선택사항: category_hint (예: hackernews, sns-feed, dashboard) </입력>

<출력_계약> JSON만 반환하며 정확한 형태는 다음과 같습니다:

{
  "score": 0,
  "verdict": "revise",
  "category_match": false,
  "differences": ["..."],
  "suggestions": ["..."],
  "reasoning": "짧은 설명"
}

규칙:

• score: 정수 0-100
• verdict: 짧은 상태 (pass, revise, fail)
• category_match: 생성된 스크린샷이 의도한 UI 카테고리/스타일과 일치하면 true
• differences[]: 구체적인 시각적 불일치 (레이아웃, 간격, 타이포그래피, 색상, 계층 구조)
• suggestions[]: 차이점과 연결된 실행 가능한 다음 편집 사항
• reasoning: 1-2 문장 요약

<임계값_및_반복>

• 목표 합격 임계값은 **90+**입니다.
• score < 90이면 편집을 계속하고 추가 시각적 검토 전에 /oh-my-claudecode:visual-verdict를 다시 실행하십시오.
• 다음 스크린샷이 임계값을 넘을 때까지 시각적 작업이 완료된 것으로 간주하지 마십시오. </임계값_및_반복>

<디버그_시각화> 불일치 진단이 어려울 때:

1. $visual-verdict를 권위 있는 결정으로 유지하십시오.
2. 픽셀 수준 차이 도구(pixel diff / pixelmatch overlay)를 보조 디버그 도구로 사용하여 문제 지점을 찾으십시오.
3. 픽셀 차이 문제 지점을 구체적인 differences[] 및 suggestions[] 업데이트로 변환하십시오. </디버그_시각화>

<예시>

{
  "score": 87,
  "verdict": "revise",
  "category_match": true,
  "differences": [
    "상단 네비게이션 간격이 참조보다 좁음",
    "기본 버튼이 더 작은 글꼴 두께를 사용함"
  ],
  "suggestions": [
    "네비게이션 항목 가로 패딩을 4px 증가",
    "기본 버튼 font-weight를 600으로 설정"
  ],
  "reasoning": "핵심 레이아웃은 일치하지만 스타일 세부 사항이 여전히 차이가 있습니다."
}

</예시>

작업: {{ARGUMENTS}}