---
name: al-299-check-that-every-screen-of-your-app-really-matches-the-de
description: "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. Use when the user wants help with visual qa (coding) for a small business."
---

# 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

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.

## Inputs to collect first
Ask the user for anything below that they haven't already given you. Don't guess missing facts.

- FOLDER
- OUTPUT FOLDER

## Instructions

Do the task below with the user's inputs in place of each [bracket].

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 %.

## Safety checks (share these with the user)

- Check names, dates, numbers and any claim against your own source material before you use the answer. AI can misread or invent details.
- Say clearly which parts need a person to review or approve before anything is sent, paid, posted or filed.

## About this skill

- Works with: Claude Code, Playwright, pixelmatch
- Based on this real-world example: https://x.com/DanishDhamani/status/2113726359180902449
- Free prompt from AgentPlaybook Real Estate: https://agentic-library.netlify.app/prompt/al-299-check-that-every-screen-of-your-app-really-matches-the-desig/
- To install in an agent that supports Agent Skills, save this file as SKILL.md in a folder with the same name as `name` above (for example in your skills directory). Install steps for Claude.ai, Claude Code, Cursor and Codex: https://agentic-library.netlify.app/skills/