Phoneproof: UI reviewed on a real phone, with proof

A screen gets approved on a laptop, then breaks on a phone: form fields zoom on tap, a long name overflows the card, the focus ring disappears for keyboard users. Screenshots of tidy demo data hide all of it. Phoneproof gives your agent a review loop where a UI change is only called done after it was seen on a real device and proven in screenshots.

What it does

• Brand lock stores palette, fonts, logo and tone as design tokens and a /brand page before any building starts.
• Mockups first produces two or three clickable concepts, desktop and mobile, for the reviewer to pick before wiring.
• Real phone review serves the build over LAN, a quick tunnel (only when asked) or a preview deploy.
• Screenshot tweaks turns "screenshot plus one line" into a direct edit, one instruction per commit.
• Worst-case and access gate adds a dev-only worst-case data toggle and runs keyboard and screen-reader walks, each finding tied to a WCAG 2.2 criterion.
• Screenshot proof uses Playwright to capture desktop and mobile viewports for every change.

How it works

1. Lock the brand or the native reference you want to match.
2. Mock up 2 or 3 concepts and get one approved.
3. Review on a real phone and apply tweaks from screenshots.
4. Gate with worst-case data, keyboard and screen-reader passes.
5. Prove each change with headless screenshots, then port in phases and run a polish pass (copy, PWA, SEO, assets, accessibility, performance).

Frameworks & tools

Playwright, cloudflared quick tunnel, Vercel preview deploys, VoiceOver or NVDA, Canva brand kit, Google Stitch, pdftoppm or PyMuPDF.

Why this beats prompting it yourself

A plain prompt edits the UI and says it looks good. Phoneproof does not ask for approval until the worst-case toggle, keyboard walk and screenshots are done, and it carries guards from real incidents such as the iOS zoom on inputs under 16px.

Use cases

• UI revamps that should feel native on a phone.
• PWA polish for manifest, service worker and safe areas.
• Client site polish for speed, SEO, accessibility and copy.

Known limitations

Not for logic bugs with no visual symptom or pixel-perfect handoff from a finished design file. Real-phone review needs a device on the same network or a preview deploy.