Clickspex

Inspect, measure, and prototype UI changes directly in Chrome.

Clickspex is an in-browser UI inspector and prototyping tool for developers and designers. Pick any element on a page, understand exactly how it's built, try visual changes live, and leave with clean, structured output you can use in your codebase. INSPECT • Element picker with keyboard navigation (walk parents, children, and siblings) • Computed styles, matched CSS rules with cascade explorer, box model, and geometry • DOM tree, attributes, and parent layout context • Typography, color palette, and asset extraction for the whole page • Lightweight accessibility checks: missing labels, missing alt text, contrast signals PROTOTYPE • Edit styles live with validated inputs, responsive breakpoint and pseudo-state targeting • Move, hide, and edit text or images directly on the page • One undo/redo history across every kind of edit • Edits are temporary and per-tab, and survive a page reload while you work EXPORT • Clean CSS for the whole editing session • Conservative Tailwind class suggestions (when Tailwind is detected) • A ready-to-paste prompt for AI coding agents (Cursor, Claude Code, and others) • Structured JSON change sessions for tooling CODE SYNC (optional, local-only) Pair the extension with the open-source `clickspex connect` CLI running in your project to preview real diffs against your stylesheets. Applying changes to source files is off by default and only possible when you explicitly start the CLI with write access; every write is transactional, backed up, and reversible. PRIVACY Clickspex collects no data. Everything runs locally in your browser; nothing is sent to any server. The optional Code Sync bridge connects only to 127.0.0.1 on your own machine and requires a pairing code shown in your terminal.