Parity check
How I prove my rebuilt screens match their Figma files.
I rebuilt two products screen by screen, and eyeballing them against the design file kept missing things. So I subtracted one from the other: identical pixels come out black, everything else lights up.
Result
No documented changes on this screen, so anything lit is worth a look.
What it is
The recreation and the design file’s export, one on top of the other, subtracted. Identical pixels come out black and everything else lights up, so a screen that is right is a black rectangle and the mistakes are the only thing on it.
Why I needed it
Reading a screen against its design file is the kind of checking eyes are worst at. Nine of mine had been rendering in the wrong typeface for weeks, every one of them sat 25 points low, and a page was silently cutting off its own checkout button — all of it past me on screen, repeatedly.
How I did it
It is four lines of CSS: the export positioned over the live screen on a black backing at mix-blend-mode: difference. No canvas, no pixel-diffing library, and because the recreation underneath is still live, the check runs on the thing itself rather than on a screenshot of it.