Liên kết

ProofShot — cho AI coding agent cái mắt để verify UI thật sự hoạt động

29 tháng 3, 2026 · github

TL;DR

CLI tool cho AI coding agent (Claude Code, Cursor, Codex…) quay video browser, chụp screenshot, bắt lỗi — để agent tự verify UI thay vì “code xong rồi, chắc đúng.” Agent có mắt thật, không còn đoán mò.

Bài này dành cho ai?

1. Dev dùng AI coding agent nhưng không tin output UI

Vấn đề: AI viết code xong báo “done” nhưng UI thực tế bị lệch layout, button không click được, console đầy lỗi — phải tự mở browser check lại

Khi nào cần: Khi AI agent sửa frontend và mình muốn nó tự verify trước khi báo xong

Được gì: Agent chạy proofshot start, mở browser headless, interact thật với UI, chụp screenshot + quay video — rồi tự đánh giá kết quả trước khi nói “done”

2. Team muốn proof-of-work cho AI PRs

Vấn đề: Review PR do AI tạo mà không biết nó đã test UI chưa, phải checkout và chạy thủ công

Khi nào cần: Khi có quy trình AI tạo PR tự động, cần bằng chứng visual

Được gì: proofshot pr tự upload video + screenshot lên PR comment, reviewer xem luôn không cần chạy local

Các điểm chính

1. Cho AI vision thật — không phải prompt hack

Khác với việc bảo AI “hãy tưởng tượng UI trông thế nào”, ProofShot mở browser thật (headless Chromium qua agent-browser), agent điều khiển trực tiếp: mở URL, click, fill form, scroll — rồi screenshot kết quả. AI nhìn pixel thật, không đoán.

→ Làm gì: proofshot start --run "npm run dev" --port 3000, rồi dùng lệnh agent-browser để interact

2. Bắt lỗi cross-language tự động

Detect lỗi từ 10+ ngôn ngữ (JS, Python, Go, Rust, Ruby…) — cả console errors lẫn server logs. Agent không chỉ thấy UI mà còn biết backend có crash không.

→ Làm gì: Sau khi stop session, check SUMMARY.md — tất cả lỗi đã được gom lại

3. Visual diff — so sánh trước/sau

proofshot diff chụp screenshot rồi so với baseline. Biết ngay UI có bị regression không, không cần mắt người.

→ Làm gì: Chạy diff sau mỗi lần AI sửa CSS hoặc layout

4. Artifacts cho mọi session

Mỗi session tạo ra: session.webm (video), viewer.html (player có timeline + action markers), SUMMARY.md (báo cáo lỗi), screenshots. Đủ bằng chứng để review hoặc debug.

→ Làm gì: Mở viewer.html để xem lại chính xác agent đã làm gì trong browser

5. Agent-agnostic — chạy với mọi AI tool

Claude Code, Cursor, Codex, Gemini CLI, Windsurf — bất kỳ tool nào chạy được shell command đều dùng được. proofshot install tự detect và cài skill file cho từng tool.

→ Làm gì: npm install -g proofshot && proofshot install — nó tự setup cho tool đang dùng