The problem

It is hard to tell a coding agent which part of a page you mean.

You take a screenshot, paste it in and describe where to look. The agent still has to guess which element that is and which file it is written in.

The solution

This Chrome extension writes that part of the prompt for you.

Click an element and type what should change. The prompt you copy carries its selector, text and classes, and on React and Vue development builds its component and source file.

You use it in two steps.

  1. Click what you want changed and say what should change.

    Click an element, drag across words, or drag a box around a region. Type your comment and press Enter.

  2. Copy the prompt and paste it into your agent.

    One prompt covers every comment you left. Paste it into Claude Code, Cursor, Codex or any agent that takes text.

What your agent gets with each comment

The context is written for you.

Each comment carries the element's selector, text and classes, and a screenshot when you mark a region. You do not take a screenshot or explain where to look.

- Selector: `[data-testid="pay-button"]`

It gets the component by name.

On React and Vue development builds, each item names the chain of components the element is rendered in.

- React component: `Basket > PayForm > Button`

It gets the file and line to open.

The source path comes with the element, so the agent can go straight to the code that renders it.

- Source: `src/components/PayForm.tsx:42`

What each button on the toolbar does

Click the extension icon to start

Or press Alt+Shift+A. A toolbar appears at the bottom of the page you are on. The extension reads a page only after that click.

Drag the toolbar out of the way

Drag it by the dotted grip, or by any gap between the buttons. It stays where you leave it.

Click an element to comment on it

Type what should change and press Enter. A numbered marker stays on the element. Hold Cmd+Shift (Ctrl+Shift on Windows and Linux) and click several elements to give them one comment.

Drag across text to comment on wording

The comment is tied to the words you selected, so the agent knows which sentence to rewrite.

Drag a rectangle to mark a region

Start the drag off the text. The region can cover several elements, or empty space where something should be added. A screenshot of it is attached to the prompt.

Press L to move an element

Drag it to where it should be. The prompt records how far it moved and what it was dropped over.

Press P to pause animations

CSS animations, transitions and videos stop, so you can mark a single frame. Press P again to resume.

Press H to hide the markers

The page shows without them. They are still saved, and H brings them back.

Settings change what the prompt carries

Choose how much detail each item has: Compact, Standard, Detailed or Forensic. Pick a marker colour, clear the markers after each copy, and turn component names and source files on or off.

Press R to review before you copy

The list shows each comment with its screenshot. Edit a comment, remove an image, or edit the prompt by hand.

Press C to copy the prompt

Every comment goes to the clipboard as one prompt. Each item has the element's selector, and on React and Vue development builds its component and source file. Paste it into Claude Code, Cursor or Codex.

Press X twice to delete every marker

The first press turns the button red and the second deletes. To delete one marker, click it.

Close turns it off on this tab

Markers you kept are saved in your browser for that page and return when you open the toolbar again. Nothing is sent to a server. Markers not touched for 7 days are deleted.