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

✍️ OpenClawRadar📅 게시일: March 24, 2026🔗 Source
ProofShot: 브라우저 녹화로 UI 코드를 검증하는 AI 에이전트용 CLI
Ad

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 준비 아티팩트
  • 기준선에 대한 시각적 차이 비교
Ad

기술적 세부사항

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

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

설치 및 설정

$ npm install -g proofshot

$ proofshot install

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

📖 Read the full source: HN LLM Tools

Ad

👀 See Also

TradingView MCP 서버를 통해 Claude가 트레이딩 전략 백테스트 가능
Tools

TradingView MCP 서버를 통해 Claude가 트레이딩 전략 백테스트 가능

한 개발자가 야후 파이낸스 데이터를 사용해 API 키 없이 6가지 트레이딩 전략을 백테스트할 수 있는 MCP 서버를 공개했습니다. 설정은 claude_desktop_config.json 파일에 한 줄을 추가하는 것으로 이루어집니다.

OpenClawRadar
onWatch: SQLite 저장소를 사용한 오픈소스 로컬 API 할당량 추적기
Tools

onWatch: SQLite 저장소를 사용한 오픈소스 로컬 API 할당량 추적기

onWatch는 모든 데이터를 로컬 SQLite 데이터베이스에 저장하며 클라우드 서비스, 원격 측정 또는 계정 생성이 필요 없는 로컬 퍼스트 API 할당량 추적기입니다. ~13MB 크기의 단일 바이너리로, 백그라운드 데몬으로 실행되며 <50MB의 RAM을 사용하고 localhost에 대시보드를 제공합니다.

OpenClawRadar
Clawdbot이 어떻게 6개의 AI 에이전트를 프로덕션-안정적인 작업 큐로 조율하는가
Tools

Clawdbot이 어떻게 6개의 AI 에이전트를 프로덕션-안정적인 작업 큐로 조율하는가

Clawdbot 팀은 AI 운영 매장을 운영하는 6개의 AI 에이전트(디자인, 코드, 마케팅, 운영)를 조율하기 위한 작업 큐 시스템을 구축했습니다. 이 시스템은 원자적 작업 클레임, 상태 머신, 백오프를 통한 재시도 로직, 작업 체인, 하트비트 추적, 데몬 오케스트레이터 기능을 갖추고 있습니다.

OpenClawRadar
Snip 도구는 AI 코딩 에이전트와의 시각적 커뮤니케이션을 가능하게 합니다.
Tools

Snip 도구는 AI 코딩 에이전트와의 시각적 커뮤니케이션을 가능하게 합니다.

Snip은 개발자가 스크린샷을 찍고, 주석을 달고, 그림을 그려 AI 에이전트에게 시각적으로 의미를 전달할 수 있는 무료 도구입니다. 반면 에이전트는 CLI나 MCP를 통해 다이어그램을 생성하거나 이미지를 직접 불러올 수 있습니다. 현재 Apple Silicon Mac에서 실행되며 Mermaid 다이어그램을 지원하고 HTML 지원은 진행 중입니다.

OpenClawRadar