Claude Code Probe

Inspect, edit, and copy any element on any webpage — styles, text, design tokens, even WebGL shaders.

Claude Code Probe turns any webpage into an inspectable, editable design surface — built for people who pair with AI coding tools. POINT AND UNDERSTAND • Hover to highlight any element; click to select it. • Copy Code puts a precise, greppable pointer on your clipboard — selector, source anchor, component chain, position — ready to paste into Claude Code or any AI assistant. • Screenshot any element straight to the clipboard. • Hold Option (Alt) to measure spacing between elements, in px or rem. EDIT LIVE, COPY THE DELTA • The edit panel tunes the selected element in place: typography, spacing, size, surface, border, shadow. • Edit the element's own text inline, or pop out a small editor for longer copy. • Every change lands in a delta block — before → after, written in your design system's own names — so applying the change in source is a paste, not a hunt. • One undo timeline across every element you touched. Switching the extension off restores the page exactly as it was found. SPEAKS DESIGN SYSTEM • Detects the tokens and utility classes your page actually uses, and steps values along those scales instead of nudging pixels. • Understands composite type styles: stepping text-lg → text-xl moves size and leading as one action, drift from the system is named, and one click conforms it back. TUNES SHADERS • Select a WebGL canvas and the Advanced section lists the shader's uniforms as live controls — scrub values, pick colours, even freeze time. Overrides live only while you edit and revert when you leave. PRIVATE BY DESIGN • No accounts, no servers, no analytics, no tracking. Everything happens in your browser; the only things stored are your own settings. Full policy: https://github.com/Jingquank/Claude-Code-Probe/blob/main/PRIVACY.md