DriftCheck

A visual linter that catches design-system drift as LLMs write UI code.

Why I built it

I built DriftCheck alongside Dog Mode, a production iOS app I shipped with AI coding tools doing most of the engineering. They were excellent at moving features forward, but on their own would quietly invent new spacing values, repaint with off-brand colors, and reintroduce styles I’d already consolidated. Catching that in code review worked, but it was slow and demoralizing. DriftCheck pushes consistency-checking into the loop where code is being written: the model hands it a screenshot and the project’s design.md, and gets back a structured report of where the implementation has drifted — each finding with the expected value, actual value, and a one-line fix.

How It Works

DriftCheck runs an Anthropic Claude vision model against your screenshot, compares it to a plain-Markdown design.md, and returns the original image with translucent highlighter strokes over each drifted region plus a legend listing each finding’s expected value, actual value, and suggested fix. A JSON report carries the same findings as structured data, and a non-zero exit code on drift makes the same tool work in CI.

In Practice

Below is the Activity screen from Dog Mode. The reference on the left matches the spec. The right is a drifted version run through DriftCheck — the linter caught both injected issues: the “ALL ACTIVATIONS” header set in all-caps instead of Title Case, and the human-triggered activity row painted in Bold Blue (#2563EB, reserved for interactive elements) instead of the spec’s Dusty Blue (#7EBADA).

Reference — matches the spec

Output — two drifts flagged

Two Interfaces

DriftCheck runs as a CLI for one-shot or CI use, and as an MCP server so a coding agent (Claude Code, Cursor) can call it inline as part of its own dev loop: edit a screen, take a screenshot, run DriftCheck, read the findings, re-edit, and repeat until the report comes back clean. The model never has to guess what the design system requires — it can just ask.

A Small Thing I’m Proud Of

Vision models are good at what is wrong but unreliable at where on tall mobile screenshots. DriftCheck does a two-pass call: pass one finds the drifts on the full image, pass two crops a region around each rough bbox and asks the model to localize tightly within that crop. The annotations actually land on the offending pixels.

DriftCheck is on GitHub, open source under the MIT license.

I wrote about how it fits into the workflow in The Drift.

Role. Engineer. Designer.