Check that every screen of your app really matches the design: have a coding agent screenshot each screen, pixel-diff it against the design file, rank the worst matches and fix them until only text smoothing differs: AI agent prompt
Apps often drift from their designs a few pixels at a time. Danish Dhamani (@DanishDhamani), CEO of Orai, posted on X (Oct 23, 2026) that he had Claude screenshot all 207 screens of his app and pixel-diff them against the design files. Some screens were 20% off, and one prompt found every one. He shared the prompt: render each screen in the exact state of its design PNG through a dev-only route, screenshot it with Playwright at the PNG's size and pixel ratio, diff with pixelmatch while masking the phone status bar, save side-by-side comparisons, write a report sorted worst to best, then fix spacing, font and component sizes and re-run until only text anti-aliasing differs.
CodingVisual QAadvancedThe prompt
Compare my app against its design files pixel by pixel. The designs are PNG files in [FOLDER]. For each design PNG, find the screen and the sample data that should reproduce it, and add a dev-only route that renders that screen in that exact state with animations turned off (this route must never ship to production). Write a script that uses Playwright to open each route at the PNG's exact size and pixel ratio, take a screenshot, and diff it against the PNG with pixelmatch. Mask out OS chrome like the status bar first. For each screen, save the design, the app screenshot and the diff side by side in [OUTPUT FOLDER], then write a report sorted from worst match to best with the % of pixels that differ. Show me the report before changing any code. Then go through the worst [NUMBER] screens: measure where spacing, font sizes and component sizes differ, fix the code, and re-run the diff until each one differs only by text anti-aliasing. Commit each screen's fix separately with the before/after match %.
How to use it
- Copy the prompt above.
- Replace every [bracket] with your own details (or fill in the blanks on AgentPlaybook Real Estate, which remembers your answers for the next prompt).
- Paste it into Claude Code, Playwright, pixelmatch and review the answer before you use it.
Works with: Claude Code, Playwright, pixelmatch
Real-world example: x.com/DanishDhamani/status/2113726359180902449
Featured in: AI prompts for writing SOPs, reports, policies and checklists
Before you use it: what to check
Check yourself
- Check names, dates, numbers and any claim against your own source material before you use the answer. AI can misread or invent details.
Using an AI agent? Download this prompt as a SKILL.md agent skill with these checks built in, or get the .zip for Claude.ai. How to install skills.
Want to make this prompt even better? Grade it with the free prompt grader or build your own with the AI prompt generator.
32 copy-paste agent prompts (PDF) plus 5 new prompts every week.
Get it free