You send a screenshot of a signup form and write "fix the button." The form has three buttons: Submit, Cancel, and a ghost "Skip for now" link styled like a button. The agent picks the wrong one, restyles it, and now you have two problems. The screenshot was correct. The framing was not.
An agent edits the element it can identify. If your crop, pin, and comment all point at the same thing, it edits that thing. If any one of them is ambiguous, it guesses. Here is how to remove the guessing.
Crop tight enough to name one element, wide enough to keep its context
The failure mode on both ends is real. A full-page screenshot with the comment "the spacing is off here" gives the agent no anchor; it sees forty elements and picks the first one that vaguely matches. A crop so tight it shows only the button strips out the label, the field above it, and the container that actually controls the spacing you are complaining about.
Aim for a crop that contains the element you mean plus one ring of context around it. For a misaligned checkout button, include the total line above it and the terms text below it. Now the agent can see that the button sits inside a summary card, not the page footer, and it edits the right container.
Cropping the still is the only image edit in the tool that turns a screenshot into an agent prompt, and that constraint is on purpose. You are not drawing arrows on a picture. You are choosing what the agent looks at. A cropped still beats an annotated live page for exactly this reason, which is a point worth reading in full.
Drop a numbered pin on the exact spot, not near it
A comment like "the icon on the left" assumes the agent parses left the way you do. It might read the layout in DOM order, which is not visual order. A numbered pin removes that assumption. It marks a coordinate on the screenshot, and your comment can say "pin 1 is the wrong icon; it should be a trash can, not a pencil."
Pins matter most when a screen repeats the same element. A settings page with six toggle rows looks identical to an agent until you pin the one at 60 percent down and write "pin 2, the Email notifications toggle, defaults to on and should default to off." Without the pin, the agent changes the first toggle it finds and reports success. You catch it two builds later.
Use more than one pin when a single comment spans two spots. "Pin 1 and pin 2 should have the same padding; right now pin 2 has less." The mechanics of pinning the exact spot cover the placement in detail.
Write the comment as a change, with element words the agent recognizes
The weakest comments describe a feeling: "this looks cramped," "something's off with the header." The agent cannot act on a feeling. It can act on "the header logo overlaps the nav links below 768px; add a wrap so the nav drops to a second row."
Say what element, what is wrong, and what right looks like. Use words that map to what an agent reads in code: button, label, input, placeholder, modal, dropdown, card, badge. "The primary button" is better than "the blue one," because color changes and role does not. If you know the copy, quote it: "the button labeled Continue," not "the second button." The vocabulary that agents recognize is worth borrowing directly.
Dictation helps here if you are on Chrome or Edge, because talking through a screen tends to produce more specific descriptions than typing does. You say what you see out loud, and the browser transcribes it. On Firefox you type instead. Either way, the comment attaches to the pinned item, so the element and the instruction travel together.
Why the three have to agree
Each of the three points at the element. When they disagree, the agent has to reconcile them and it will pick wrong. Crop shows the whole form, pin sits on the Cancel button, comment says "make the submit button larger." Which does the agent trust? It should not have to choose.
| Signal | Says what | Failure when vague |
|---|---|---|
| Crop | Which region matters | Agent edits an element outside your intent |
| Pin | The exact spot | Agent changes a repeated element, wrong instance |
| Comment | What change to make | Agent restyles by feel, misses the requirement |
When you publish, the review becomes a public link and a clean markdown version an agent can read straight through. The pin numbers and element words carry into that markdown, so the file an agent reads matches the picture a person sees. That is the whole point of turning a screenshot into a usable prompt: one artifact, no translation step.
Next time you capture a screen for a build change, check the three before you publish. Crop names one element. Pin sits on it. Comment states the change in element words. Start a review and frame the first item that way; the agent will edit what you meant.