Caliper — Design Mode & UI Annotation for AI Coding Agents

Description

Mark up any web UI — click, strike, or lasso an element — and hand a precise defect to Claude Code, Cursor or any AI agent. 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 Three ways to mark what you mean: click an element to annotate it, strike one through to flag it for removal, or lasso an area when no single element is the right target. 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

Details & SEO