You see a button sitting two pixels too low, you type three paragraphs describing where it is, and Windsurf edits the wrong component anyway. The problem is not the agent. It is that prose cannot point. A cropped screenshot with one numbered pin can, and it fits in a single review link the agent reads directly.
Here is a structure you can copy and reuse: one cropped still, one numbered pin, and three bullets. It works because it gives Windsurf a picture of the exact element, a marker that names the spot, and just enough written context to act without guessing. The Windsurf agent setup reads the same review through Cobalt's MCP server, screenshots included.
The template, in full
Capture the screen, crop to the element and its immediate surroundings, drop one numbered pin on the thing that is wrong, then write the comment like this:
Pin 1: [what element this is, in the words you would say out loud]
- Current: [what it does or looks like now]
- Wanted: [what it should do or look like]
- Constraint: [what must not change, or where to make the edit]
That is the whole thing. A cropped image, a single pin, and three bullets. Publish it and hand Windsurf the /r/<slug> link. The pin is baked into the exported image, so the agent sees the marked spot, not a description of it.
Why each part is there
The cropped still removes everything the agent does not need. A full-page screenshot forces Windsurf to scan the whole layout and decide which of six buttons you meant. Crop to the element and one ring of context around it, and the decision is made for it. There is more on what to crop in and out for an agent if you want the reasoning.
The numbered pin is the anchor. Your bullets say "Pin 1" instead of "the submit button near the top," and there is no ambiguity about which element the three lines describe. One pin per item keeps it clean. If a single still has two problems, make it two items with their own pins, or use numbered pins to set the order you want them read in.
The three bullets are deliberate. Current and Wanted give the agent the before and after. Constraint is the one most people skip, and it is the one that prevents collateral damage: "do not touch the mobile layout," or "change the padding, not the font size," or "the fix is in the header component, not the global stylesheet." Without it, Windsurf solves your stated problem and quietly introduces a new one.
A filled-in example
Say the primary call to action on a pricing card is cramped against the price. Crop to that card, pin the button, and write:
Pin 1: The "Start free" button on the Pro card
- Current: 4px gap between the price and the button, they read as one block
- Wanted: 16px gap so the button reads as a separate action
- Constraint: match the gap already used on the Starter card, do not change the button itself
Windsurf now has the element, the measurement, and the boundary. That is a one-turn edit instead of a back-and-forth.
When to adjust the three bullets
The structure holds, but the bullets flex with the kind of change.
For a behavior bug rather than a visual one, swap the layout language for steps. Current becomes "clicking Save shows a spinner that never resolves," Wanted becomes "Save writes the record and shows a confirmation," and Constraint names the file or handler if you know it. Pointing at a broken interaction needs the same precision as pointing at a broken layout; the words to use when describing a screen to an agent apply either way.
For a copy change, Current and Wanted hold the old and new text verbatim, and Constraint covers tone or length limits. Quote the strings exactly so the agent can find and replace them.
For a new element that does not exist yet, Current describes the gap ("no empty state when the list has zero items"), Wanted describes what should appear, and Constraint points at the component or pattern to match. The pin goes on the spot where the new thing belongs.
When you have several small edits on one screen, do not stuff them into one comment. Make each one its own item with its own pin and its own three bullets. Windsurf reads them as a list and works through them, and you can mark each comment resolved as it lands.
Getting the review to Windsurf
Capture happens in a browser tab. No install, no extension, no account needed to start. Cobalt asks for an email only when the review is ready so it can send the link. Once it is published, the /r/<slug>/markdown version is what an agent reads, and Windsurf pulls it over the MCP connection without you pasting anything. If you have not wired that up, connecting your coding agent over MCP takes a few minutes.
Free covers unlimited reviews. After seven days a review goes read-only for you, though the link keeps working for anyone you sent it to; Pro at $5 a month keeps everything editable with no cutoff. For the broader pattern of framing a screenshot so the agent edits the right element, this template is the compact version: one still, one pin, three bullets, published as a link.
Open a tab, start a review, and crop your first still to exactly one element. The constraint line is the one to never skip.