X-Ray
See exactly how on-system your prototype is
X-Ray is two lenses on a live prototype. Inspect reads the real tokens behind any one element. Suspect scans the whole screen for the pieces that went off-system. Both read the running code — not a picture of it.
Inspect — read the tokens from one element
Click an element. See its component, the exact design tokens wired to it, and the CSS — ready to copy.
Design tokens
CSS
Click any element and Inspect reads the design tokens, spacing, and styles wired to it — resolved to their live values, with copyable CSS. It is a two-layer read: the authored CSS rule tells you which token, the live cascade tells you what value. Neither alone is enough, which is the whole trick.
A computed-style read can give you the final value, but the browser has already resolved var() away — so the token name is gone. Inspect recovers the name by walking the page's own stylesheet rules (recursing into @layer, @media, and @supports, where modern design systems actually declare tokens), matching them to the element you clicked, then resolving each var(--token) on that element. The result is the real wiring an engineer ships — accurate on hover, focus, and active states too, which a static design file can't show.
Suspect — find what went off-system
Scan the whole screen. Get a Coverage score, and a list of the hand-rolled pieces that should have used a component.
Suspects (2)
Inspect drills into one element. Suspect does the opposite: it scans the whole screen and scores how much of it is actually on your design system. It walks every interactive and structural piece, marks the ones that resolve to a real component as mapped, and flags the ones that were hand-rolled where a component already exists as suspects — outlined right on the prototype.
The output is one honest number, Coverage, plus a list you can click through. It's the verification half of building on a design system: the template guides generation, Suspect catches the drift that slipped through. It only flags a suspect when your design system genuinely offers that component — so a from-scratch prototype reads as "no design system detected," not a wall of false alarms.
Together: X-Ray
Together, the two lenses are X-Ray — one panel in the prototype viewer with an Inspect tab and a Suspect tab. They share the same engine reading the same running page, so the tokens you read in Inspect and the coverage you measure in Suspect always agree: they come from the same source of truth, the code that ships.
One element, in depth. Component, wired tokens, CSS — the handoff detail an engineer copies.
The whole screen, at a glance. A Coverage score and every off-system piece, outlined where it lives.
X-Ray is in active development.