Show and tell: PixelProof — local visual diffs for AI coding UIs

[flower1201]

I built PixelProof because AI coding tools often change UI without a clear “did this match the design?” signal.

It is a local-first CLI: compare a design PNG to a screenshot or a loopback URL, then write an offline HTML report, result.json, and a rule-based fix-instructions.md checklist agents can read. No cloud upload. No LLM API key.

Pre-release (not on npm yet): https://github.com/flower1201/pixelproof

git clone https://github.com/flower1201/pixelproof.git
cd pixelproof && npm install && npm run build && npm run demo
# open examples/out-demo/index.html

Limits: pixel mismatch ≠ design quality; it does not find the CSS root cause or auto-patch; --url is loopback-only for now; image sizes must match.

Looking for feedback from people who ship front-end with Cursor / similar tools. Feedback welcome here or in Issues — stars not required.

---

本地优先的视觉对比 CLI：设计稿 PNG 对比截图（或本机 URL），输出离线 HTML、JSON 指标，以及给 Coding Agent 读的修复清单。本人作者，欢迎试用反馈。

[bomtobe-hgkim]

Could result.json include region boxes and browser/viewport/device-scale metadata? That helps agents distinguish UI changes from capture noise. I work on Orke at BOMTOBE; haven’t tried PixelProof.