Design against build.
Design from Figma or an image, build from a screenshot or a URL. Scored per category, every comparison kept.
- Design against build
- Put the Figma frame and the built screen side by side. Every value that drifted is named.
- Figma in, screenshot or URL in
- Nothing to install and no plugin to keep up to date.
- Scored per category
- Text, colour, spacing, radius and layout each get their own number rather than one overall verdict.
- Kept, not thrown away
- Every comparison is saved and filterable, so the screen that slid between two releases is easy to find.
What a comparison gives back
Pick a capability to see it drawn from a sample audit.
Text and typography, colour, spacing and gaps, radius and borders, layout and sizing — each scored on its own, so a wrong colour cannot hide inside a good layout.
Where the build drifts
Usually quietly, and usually in spacing.
Check the build against the file before anyone argues about it
Side by side, overlay, or design and build alone. The disagreement becomes a list of named tokens.
Watch a screen go from 72 to 96
Run it again after the fixes. The history keeps both, so the improvement is a line rather than a claim.
Give an agent something mechanical to do
A radius that should be 12 and renders 8 needs no discussion. Export the work order and let the agent close them.
The least arguable findings in the product
- /100overall, plus five category scores
Scored where it drifted
One score to notice that something drifted, and five category scores that say where.
- radius: 12 found 8
Named, not described
Expected, found, and the token to change — no screenshots to squint at.
- 7296
A trend, not a verdict
Every comparison is kept, so the screen that slid is the one you open.
Two sides, four inputs
Whatever the design lives in, and whatever the build is reachable as.
A Figma screen
A link to the frame, or the Figma file itself.
An image
An image, for when the design only exists as an export.
A live URL
A live URL, rendered at mobile, tablet or desktop width so you compare like with like.
A screenshot
A screenshot of the build exactly as it rendered for you.
The other two reads
What a front-end lead asks first
What goes on each side?
Design: a Figma screen, frame link or image. Build: a screenshot or a live URL, at mobile, tablet or desktop.
How is the score made?
Issues carry a category and a severity. Overall fidelity is out of 100, with a per-category score beside it.
Why keep the history?
Fidelity is a trend. The screen that slid is the one worth opening.
Can I hand the issues to whoever fixes them?
Yes — a Markdown work order for a coding agent, or CSV for a backlog.
Test from your pocket
The uTestMe tester app runs a study on a phone. Taps and screens recorded, consent first, results in the same view.
- Tap tracking
- Screen recording
- Consent first