ProofShot: 브라우저 녹화로 UI 코드를 검증하는 AI 에이전트용 CLI

ProofShot의 기능

ProofShot은 AI 코딩 에이전트에 시각적 검증 기능을 제공하는 CLI 도구입니다. 에이전트가 구축한 UI가 브라우저에서 실제로 어떻게 보이는지 확인하고, 레이아웃 문제를 감지하며, 콘솔 오류를 캡처할 수 있게 합니다.

작동 방식

이 도구는 세 가지 주요 명령어로 작동합니다:

• proofshot start --run "npm run dev" --port 3000 - 개발 서버를 실행하고, 헤드리스 크로미움을 열며, 비디오 녹화를 시작합니다
• AI 에이전트는 proofshot exec navigate "http://localhost:3000" 및 proofshot exec screenshot "homepage"와 같은 작업을 실행하여 탐색, 클릭, 양식 작성 및 스크린샷을 찍습니다
• proofshot stop - 오류를 수집하고, 녹화를 중지하며, 유휴 시간을 제거하고, 증명 아티팩트를 생성합니다

출력 및 기능

ProofShot은 다음을 포함하는 독립형 HTML 파일을 생성합니다:

• 작업 타임라인과 동기화된 브라우저 세션의 비디오 재생
• 세션 중 찍은 스크린샷
• 각 작업에 대한 요소 레이블
• 세션 중 캡처된 브라우저 콘솔 오류
• JavaScript, Python, Go, Rust 및 기타 언어에 대한 패턴 매칭으로 스캔된 서버 로그
• SUMMARY.md 및 풀 리퀘스트용 형식화된 출력을 포함한 PR 준비 아티팩트
• 기준선에 대한 시각적 차이 비교

기술적 세부사항

이 도구는 다음과 같습니다:

• Vercel Labs의 agent-browser 기반 구축 ("Playwright MCP보다 훨씬 우수하고 빠름"으로 설명됨)
• 테스트 프레임워크가 아닙니다 - 에이전트가 합격/불합격을 결정하지 않고, 단지 증거를 제공합니다
• 에이전트 독립적 - Claude Code, Cursor, Codex, Gemini CLI, Windsurf 및 모든 MCP 호환 에이전트와 작동합니다
• AI 에이전트가 정확히 어떻게 작동하는지 알 수 있도록 스킬로 패키징됨
• MIT 라이선스 오픈 소스

설치 및 설정

$ npm install -g proofshot

$ proofshot install

이 도구는 녹화에서 유휴 시간을 자동으로 제거하므로, 에이전트가 실제로 수행한 작업만 볼 수 있고 대기 시간은 보이지 않습니다.