community-automations/screenshot-analyzer

DevOps & 코드

PublicClaude 서브에이전트

스크린샷 분석기

시각적 버그는 기술적으로 에러가 발생하지 않기 때문에 테스트를 통과합니다. 페이지가 그저 이상해 보일 뿐이죠. 이 분석기는 URL을 렌더링하고 사람이 보는 방식으로 검토합니다.

sonnet3일URLboxOpenAI VisionSlackS3
ClaudeClaude
ROI for
README.md

왜 이 서브에이전트인가

시각적 버그는 기술적으로 에러가 발생하지 않기 때문에 테스트를 통과합니다. 페이지가 그저 이상해 보일 뿐이죠. 이 분석기는 URL을 렌더링하고 사람이 보는 방식으로 검토합니다.

URLbox로 전체 페이지 스크린샷을 캡처하고, 감사 체크리스트와 함께 비전 모델에 전달한 뒤 오버플로, 깨진 이미지, 낮은 대비를 페이지상의 위치와 함께 표시합니다. 구조화된 발견 목록과 스크린샷을 함께 받게 되어, QA 전수 조사나 라이브 페이지의 시간 경과 모니터링에 활용할 수 있습니다.

작동 방식

    • Read

      Used at step 01 to kick off the pipeline.

    • Write

      Used at step 01 to kick off the pipeline.

    • WebFetch

      Used at step 01 to kick off the pipeline.

    • WebSearch

      Used at step 01 to kick off the pipeline.

샘플 출력

json
// Sample output
// (generated when the pipeline finishes)

Given a URL and viewport, capture a screenshot and return a JSON findings list of visual issues with element locations and severity.

Unlock the rest

The full agent definition, install snippet, and starter task are gated for community members.

Members get the full `.md` agent file, the npm / pnpm install one-liners, a starter prompt that we've tuned against real runs, and the open-source repo when this automation ships there. One email, magic link, done.