Capture a live page, diff it against a Figma source, surface every drift as a triagable mismatch. Score each comparison 0–100 so a glance tells you what's on design and what isn't.
Visual QA against Figma
/design lists every comparison the workspace has captured. Each card shows the source (web URL → Figma URL), the 0–100 score with its color band, the mismatch count by severity, the last-run time, and a screenshot preview. New comparisons collect a Figma URL, a target URL, and viewport dimensions, then run the diff.
Open any comparison to see the Figma render and the web render side by side. Toggle overlay modes — Figma only, Web only, or Diff. Bounding boxes wrap every drift element. Click a box to drill into the underlying mismatch.
/design/mismatches gives you a cross-comparison view of every drift. Filter by category (typography / color / layout / content) and severity (critical / major / minor). Useful for triaging a sprint's worth of design drifts in one place rather than walking comparisons one at a time.
Each mismatch shows the element label, the Figma value (font, hex, dimension) vs the Web value, a description, and a status that progresses new → reviewing → fixed → accepted. Actions sidebar lets you mark fixed, request a PR, comment, or ignore.
/design/live shows the running web capture on one side and the Figma source on the other, with bounding boxes drawing in as drifts are detected. Useful when you're authoring a flow and want to confirm fidelity as it executes, rather than after the fact.
Every comparison resolves to a 0–100 score. ≥90 reads as "on design" (green). ≥70 reads as "drifting" (amber). <70 reads as "heavy drift" (red). The banding is the same everywhere a score shows up — comparison cards, run-detail tabs, dashboard widgets — so the visual language stays consistent across the product.
See how design fits the rest of Traceback.