Mark elements on any web page, note what should change, and hand the whole batch to your AI coding agent as a ready-to-paste prompt.
Stop typing "the button in the header on the pricing page" over and over. Agent Marker lets you click the elements you want changed, jot a one-line instruction for each, and generate a single prompt that tells Claude Code exactly what to change and where — complete with page URL and a CSS selector for every mark. Mark across multiple pages in one go; send once.
- Open
chrome://extensionsand enable Developer mode (top-right). - Click
Load unpackedand select this folder. - Pin the extension, then click its toolbar icon to open the panel.
- Open — click the toolbar icon. A small floating pill appears in the bottom-right corner with marking armed (reopening a tab that already has marks shows the marks panel instead). Drag the pill anywhere; drop it near a corner and it snaps there (and stays there across resizes).
- Mark — hover the page to highlight elements (↑/↓ walk to the parent/child), then click (or press ↵) to open a note.
- Describe — type what should change (e.g. "make this heading bigger") and Save. A numbered dot pins to the element, and the pill count ticks up. Repeat across as many pages as you like — marks follow the tab.
- Review — click the count on the pill (or press L) to open the marks panel. Hover a card to highlight its element, click its number to scroll to it, edit or delete inline.
- Generate — press G (or the terminal button). The prompt is copied to your clipboard immediately and shown for review — just paste it into Claude Code.
Feedback that isn't about one element ("overall spacing feels cramped")? Press N (or the sticky-note button in the panel) to add a page note.
Marks are per tab and last until the tab (or browser) closes — the toolbar icon just hides the tool without losing anything, and its badge shows each tab's mark count.
| Key | Action |
|---|---|
| M | Toggle marking |
| L | Toggle the marks panel |
| G | Generate prompt (auto-copies to clipboard) |
| N | Add a page note |
| ↑ ↓ | While marking: walk to parent / back to child |
| ↵ | While marking: mark the highlighted element |
| ⌥ ↑ / ⌥ ↓ | In the note composer: retarget to parent / back |
| ⌘ ↵ | Save the current note |
| Esc | Close the topmost thing (note → dialog → marking → panel) |
Each mark contributes its page title and URL, a CSS selector, the element (tag / id / classes + a text snippet), its verbatim HTML opening tag, the nearest labelled section it sits in, the viewport size, and your instruction — grouped by page. Page notes are listed alongside, flagged as applying to the whole page. That's enough for Claude Code to locate the code and make the change without any extra context from you.