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