Inspect first
Hover and pin the element you care about, then copy the CSS variables visible from that element's computed context.
CSS variables extractor
Copy the variables behind a live component.
CascadePeek Pro extracts visible CSS custom properties from the selected element context and `:root`, then copies them as a small `:root` block for AI prompts, audits, and implementation notes.
Prompt-ready output
Paste the copied `:root` block into Cursor, Claude, v0, or ChatGPT so the agent has real token names and values.
Pair with design briefs
Use Copy vars for exact custom properties, and Design brief for the broader color, type, spacing, radius, and shadow system.
Local-first
Variable extraction happens inside the active tab after you start the inspector. CascadePeek does not upload page styles.
NeedManual DevToolsCascadePeek Pro
Find relevant variablesSearch computed styles and stylesheetsPin element, Copy vars
Use variables with AIManually assemble names and valuesPaste a ready `:root` block
Understand the page styleInspect many panelsPair variables with Design brief