Design Diff gives coding agents a number to climb, and a box that only half points

Do the arithmetic on the sample output in the dev.to write-up and the rectangle turns out to be a blunt pointer. The box measures 1440 by 168 pixels, which is 241,920 pixels out of a 1,411,200 pixel frame ^[8][7][18]. Of those, 107,251 actually differ ^[7]. The box is therefore about 2.26 times the area of the damage, and roughly 56 per cent of what it encloses already matches the design ^[19].

The frame works out to 1440 by 980, and the box starts at y=812 and runs to the bottom edge across the full width ^[17][20]. An agent reading those coordinates has ruled out everything above that line and learned nothing about which node inside the band is wrong. It is still a large gain over the status quo the post describes, where the agent glances at a screenshot and misses a heading sitting a few pixels low, a colour that has cooled, a font that quietly failed to load ^[21].

What makes the loop worth running is less the score than the gate in front of it. Design Diff turns off animation and the blinking caret before it captures [c10b], and it refuses to hand back a quiet bad number when fonts have not arrived, saying so in the output instead [c10a]. For an agent hill-climbing on that value, the distinction is the whole mechanism: a scorer that answers mid-render teaches the model to keep making edits that were really fixing a render race, and the write-up is explicit that the number should move only when the page truly changed ^[11].

One scalar still cannot separate a shifted heading from a wrong colour, and the author does not pretend otherwise. The instruction is to read the shape: a small box on a button means a colour mistake, a box that spans the page means a font that never loaded or a viewport that does not match ^[12]. Because the design sets the capture size and matching happens per pixel ^[9], a wrong margin high in the document displaces every pixel under it and produces the same wide silhouette as a font failure, with a score far worse than the count of actual errors. The rectangle is a hypothesis. The agent has to test it.

Each run writes its artifacts to a timestamped folder with the metrics alongside them ^[6][14], so a loop that ran unattended leaves a record you can reread afterwards. The awkward cases matter more than the clean demo: a Figma file key instead of a manual export, pages behind a login, content that was always going to change, a design that exists only as a PNG on disk ^[16].

So the primitive on offer is two things wearing one name, a value to optimise and a box to argue with, and only the first of them is a reward.