PixelCheck: AI 에이전트가 웹 페이지를 시각적으로 확인할 수 있게 해주는 npm 패키지

PixelCheck는 AI 에이전트가 자신이 배포한 웹페이지를 시각적으로 검증할 수 있게 해주는 npm 패키지입니다. 사용자가 모든 버튼, 흐름, 로케일, 기기를 수동으로 확인하는 대신, 에이전트가 페이지를 열고, 버튼을 클릭하고, 양식을 작성하고, 구조화된 데이터를 추출하고, UI를 평가할 수 있습니다.

만들어진 이유

비개발자인 저자는 Claude를 사용하여 프론트엔드 코드를 작성했지만 한계에 부딪혔습니다: Claude는 눈이 멀었습니다. 모든 로그인 흐름, 일본어 번역, 또는 아랍어 RTL 레이아웃은 수동 브라우저 확인이 필요했습니다. 스크린샷을 찍고, 다시 붙여넣고, 무엇이 잘못되었는지 설명하는 데 주당 몇 시간이 걸렸습니다. PixelCheck는 이 루프를 없애기 위해 만들어졌습니다.

주요 기능

• 페이지 열기 및 자연어 명령으로 상호작용
• 버튼 클릭 및 양식 작성
• 모든 페이지에서 구조화된 데이터 추출
• 실제 사용자처럼 UI 평가
• 페이지 두 버전 비교
• 다양한 사용자 페르소나로 앱 탐색: MacBook을 사용하는 도쿄 주부, Tecno를 사용하는 라고스 창업자, iPad를 사용하는 72세 미국 은퇴자, RTL 아랍어 비즈니스맨, Xiaomi를 사용하는 상하이 학생

기술 세부 사항

• 로컬에서 실행 — SaaS 개입 없음
• 저자는 단 한 줄의 코드도 작성하지 않았습니다. 모든 문자는 Claude Code가 생성했습니다.
• 모든 로직은 일반 영어로 Claude Code에 설명되었고, 이를 소프트웨어로 전환했습니다.

대상

AI 코딩 에이전트를 프론트엔드 작업에 사용하며 수동 스크린샷 없이 자동화된 시각적 검증을 원하는 개발자.

사용해보기

현재 npm에서 사용 가능합니다. 저자는 이것이 코드 한 줄도 입력하지 않고도 Claude Code를 통해 제품 직관을 소프트웨어로 전환할 수 있다는 증거라고 제공합니다.