Caliper

Turn a clicked element into a machine-precise defect annotation.

Visual bug reporters give you a screenshot and a sentence. Someone then has to open devtools, find the element, guess which component owns it and which design token that colour came from. Caliper skips that step. Click an element while the picker is armed, type what is wrong, and it records: • a stable CSS selector, with an honest confidence level — it tells you when the selector is brittle instead of pretending otherwise • the owning application component, looked past design-system wrappers like ion-* or mat-* • the computed styles that the element actually sets, matched against your design tokens, so a padding of 20px is reported as --offset-20px rather than a bare number • a screenshot cropped to the element, captured at the moment you clicked it Export the session as TOON (a compact, token-efficient format built for AI agents), as JSON, or as a zip holding both plus the screenshots. Paste it into Claude Code, Cursor or any coding agent and it can go straight to the file and the variable. Everything stays on your machine. No account, no backend, no telemetry. Keyboard: Alt+Shift+C toggles the picker, Alt+Shift+P opens the panel, Escape steps back. Open source, MIT: https://github.com/DenDiem/caliper