클로드스킬마트스킬 둘러보기스킬이 뭐예요?
 
← 목록으로

Visual QA (비주얼 검증)

웹 UI와 터미널 UI를 스크린샷·픽셀 디프 증거와 두 개의 독립 리뷰어로 이중 검증해 GOOD/NEEDS WORK 판정을 내리는 스킬.

디자인·UI고급★ 67,531⑂ 5,507AI 점수 8/10마지막 업데이트: 2026. 8. 9.

무엇을 해주나

UI를 만들거나 수정한 뒤 "정말 제대로 보이는가"를 객관적으로 검증합니다.

  • 표면 판별: 웹/페이지 UI, 터미널(TUI) UI, 레퍼런스 클론 작업을 구분해 각각 다른 캡처 트랙을 돌립니다.
  • 증거 수집: 모든 페이지·탭·모달·브레이크포인트를 빠짐없이 열거해 캡처하고, 번들 스크립트로 image-diff(diffRatio, similarityScore, hotspots, 알파 채널)와 tui-check(maxWidth, overflowLines, borderMisaligned, wideCharColumns) JSON을 남깁니다.
  • 이중 오라클 리뷰: 읽기 전용 서브에이전트 2개를 병렬로 띄워 (A) 진짜 디자인 시스템인지·기능이 실제 동작하는지, (B) 픽셀 충실도와 한국어/일본어/중국어 줄바꿈·클리핑 정밀도를 검사합니다.
  • 완료 게이트: 최신 빌드에서 새로 캡처한 전체 페이지에 대해 독립 리뷰어가 BLOCKING 없이 PASS할 때까지 루프를 강제합니다. 스크립트 수치는 리뷰어를 조준할 참고 자료일 뿐, 그 자체가 판정이 아니라고 명시합니다.
  • 모션 검증: 호버·포커스·스크롤 애니메이션을 rest/mid/settled 3프레임으로 캡처해 "애니메이션 때문에 픽셀이 다르다"는 변명을 차단합니다.

이런 분께 추천

  • 목업(Figma, Imagen/Stitch 생성 이미지)이나 기존 사이트를 코드로 재현하는 클론 작업을 자주 하는 분
  • 한국어·일본어·중국어 텍스트가 잘리거나 조사만 다음 줄로 넘어가는 문제에 민감한 프로덕트 팀
  • 박스 드로잉 테두리, 와이드 문자 정렬이 중요한 CLI/TUI 앱 개발자
  • AI 에이전트의 "다 됐습니다" 자체 인증을 신뢰하지 않고 독립 검증을 강제하고 싶은 분

활용 예시

  1. 랜딩 페이지 클론: 원본 사이트 캡처와 구현 결과를 동일 뷰포트로 찍고 image-diff를 실행 → similarityScore 97에도 헤더 우상단 hotspot이 잡히면 그 영역을 확대 비교해 간격/그림자 토큰 차이를 수정.
  2. 한국어 대시보드 QA: 카드 제목이 에이전트 오케스트 / 레이션 처럼 어색하게 끊기는지 전 페이지 스크린샷을 검사해 REVISE 판정 후 word-break/줄바꿈 규칙을 고침.
  3. TUI 리팩터링 회귀 검사: xterm.js 웹 터미널로 실제 pty 출력을 렌더링해 PNG를 남기고 tui-check --cols 80으로 3번째 줄 2칸 오버플로와 테두리 어긋남을 잡아냄.

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 code-yeongyu/oh-my-openagent 의 packages/shared-skills/skills/visual-qa 폴더를 내 ~/.claude/skills/visual-qa/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/code-yeongyu/oh-my-openagent.git /tmp/oh-my-openagent && mkdir -p ~/.claude/skills && cp -r /tmp/oh-my-openagent/packages/shared-skills/skills/visual-qa ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 열고 저장소를 임시 폴더에 복제합니다: git clone https://github.com/code-yeongyu/oh-my-openagent.git /tmp/oh-my-openagent
  2. 스킬 폴더를 준비합니다: mkdir -p ~/.claude/skills
  3. 이 스킬만 복사합니다: cp -r /tmp/oh-my-openagent/packages/shared-skills/skills/visual-qa ~/.claude/skills/
  4. ~/.claude/skills/visual-qa/scripts/visual-qa.mjs 파일이 있는지 확인합니다. Node.js 18 이상이 설치돼 있어야 실행됩니다(node -v로 확인).
  5. 웹 캡처 도구가 없으면 설치합니다: npm install -g agent-browser && agent-browser install (또는 프로젝트에 설정된 Playwright/dev-browser 사용).
  6. Claude Code를 재시작하고 "이 페이지 비주얼 QA 해줘", "스크린샷 픽셀 디프로 목업과 비교해줘" 같은 요청으로 스킬을 호출합니다.
  7. 참고: 문서의 script/qa/web-terminal-visual-qa.mjs(TUI 캡처)와 서브에이전트 호출은 원 저장소/OpenCode·Codex 환경 기준이므로, Claude Code에서는 Task 도구나 자체 캡처 스크립트로 대체해야 합니다.
GitHub에서 원본 보기 ↗라이선스: NOASSERTION