# Show Your AI Coding Tool the Exact Element to Change

> Point at the element, add a note, and copy a reference with an annotated screenshot and observed styles, then paste it into the AI coding tool you use today.

- Canonical: https://www.superchargebrowser.com/features/ai-element-reference/
- Extension: inspect
- Published: 2026-10-08
- Updated: 2026-10-08
- Source: SuperchargeBrowser (https://www.superchargebrowser.com)

"Make the second button bigger." The instruction names a change but not a location, so your AI coding tool has to guess which button you mean. [SuperchargeInspect](/inspect/) ends the guessing. Point at the element, write a note describing the change, and copy a reference that carries the note, an annotated screenshot, and the element's observed styles. In one reference you hand the tool the element, how it looks, and the change you want.

## The Four-Step Workflow

You start an inspection with Alt+Shift+E or the toolbar button, then move over the page by hovering or with the arrow keys. The workflow is four steps.

1. **Select the element.** Hover to it, or move with the arrow keys, then press Enter to lock it.
2. **Add your note.** Press Enter again to write your note. Write the change in words, for example "make this button full width". The reference marks the note as the only requested change.
3. **Copy the reference.** Press Ctrl+Enter, or Cmd+Enter on macOS. One clipboard item holds the text reference and the annotated PNG.
4. **Paste.** Paste into your AI coding tool, and let it decide which part it uses.

The sample card above runs this same flow. Click a part to lock it, then press Copy reference. The demo copies the text reference and the annotated PNG, just like the extension does.

## What the Reference Contains

The text reference is plain text you can skim. After a short header and a safety line, it lists your note and the source URL, then the element with its locator hint and the visible text, which is labeled as reference data. It goes on with the viewport size and scroll position, the element's bounds, and the observed styles: the declared `font-family` stack, the color values, padding and margin on each side, `gap`, border radius, and `display`. It closes with a short markup excerpt of the element as the page composed it.

The annotated screenshot is the visible crop with a footer under it: your note, the source, the element, and a short style line.

The safety line labels the page text as reference data, so page text cannot pose as an instruction. Only your note counts as the request.

## Pasting Into Your AI Coding Tool

Your AI coding tool decides whether it uses the text, the image, or both. Not every tool and operating system combination has been certified.

| AI coding tool | How to paste |
| --- | --- |
| Claude Code | Text: terminal paste. Image: Ctrl+V, Cmd+V in iTerm2, or Alt+V on Windows or WSL. |
| Codex CLI | Text: terminal paste. Image: Ctrl+V or Ctrl+Alt+V, or `codex -i path/to/image.png`. |
| Codex desktop or IDE composer | Attach the saved PNG and paste the text if the combined paste omits a format. |
| OpenCode TUI | Ctrl+V prefers the image when both are present. Use Copy text only too for the full metadata. |
| OpenCode desktop or web | Use the composer's image attachment or paste, and the text input. |
| ChatGPT web | Paste into the composer, or attach the saved PNG. |
| Claude web | Paste into the composer, or attach the saved PNG. |

If a paste keeps only one format, use Copy text only, Copy image only or Save PNG from the More ways to copy menu.

## Limits of the Reference

A copied reference is an observed snapshot. It captures what the page shows, not what built it. Inspect does not recover source files, component names, or the author's CSS rules. The font value is the declared `font-family` stack, the list the page asks for. The receiving tool controls which formats it keeps. Over SSH, in a remote container, or in a hosted coding environment, the local image does not travel with the paste. Save the PNG first, then attach it the way the remote tool takes files. The saved PNG is the clean crop without the footer, so your note travels in the pasted text.

## Privacy

Inspect makes no network calls, has no account, and never sends anything to an AI service or submits a prompt. Nothing you inspect leaves your device until you paste it yourself or save the PNG. It remembers your last pick on each page, in session storage that clears when you close the browser.

[Read and copy CSS values with the CSS inspector](/features/css-inspector/).

---

Canonical URL: https://www.superchargebrowser.com/features/ai-element-reference/