You spot a broken dropdown on your staging build. The label overlaps the chevron, and the options render behind the header. You want Claude Code to fix it on the first attempt, not spend a turn asking you where the element is or what "broken" means. The difference between a one-turn fix and three rounds of back-and-forth is almost entirely in how you package the report.
Here is the full path from spotting the bug to pasting something Claude Code acts on, with no re-typing at any step.
Step 1: Capture the frame with the bug on screen
Open a new review in a browser tab. Get the broken dropdown into the state you want, then click Capture screen. The browser prompts you to share the window or tab, and the current frame draws to a canvas. Outcome: you have a still of the exact broken state, not a fresh page load that hides the problem.
No install, no extension, no signup. It runs in the tab you already have open, which matters when the bug only shows up after five clicks and you do not want to reproduce it inside a separate capture app.
Step 2: Crop to the element and add a numbered pin
Drag a rectangle around the dropdown and the header it collides with. Cropping the still is the only image edit, and that is the point: you hand Claude Code the region that matters instead of a 1440-pixel-wide screenshot where the bug is a speck. Then drop a numbered pin on the exact spot, the overlapping chevron, so there is no ambiguity about which element you mean.
A pin does more work than an arrow drawn on a picture. It gives the agent a reference it can name in its own reasoning. Numbered pins that order the steps also help when one screenshot carries two problems.
Step 3: Dictate or type the fix, with specifics
Each captured screenshot becomes an item. Add a comment by typing or by dictating with the browser's built-in speech recognition (Chrome and Edge support it; on Firefox you type). Say what is wrong and what correct looks like:
Pin 1: the dropdown chevron overlaps the selected label at viewport widths below 900px. The chevron should sit right-aligned with 12px padding, and the open menu should render above the header, not behind it. The z-index on the menu is lower than the header.
That last line matters. "Fix the dropdown" makes the agent guess. Naming the likely cause and the expected result gives it a target. If you tend to write thin comments, feedback specific enough to act on walks through the fields that close the gap.
Step 4: Publish and grab the markdown
Click Publish. The review saves and gets a short public URL at /r/<slug>. The same review is available as plain-text markdown at /r/<slug>/markdown. That markdown is the format a coding agent reads: the screenshot is embedded, the pin is referenced, and your comment is right there as text. No re-typing, no describing the picture in prose, no copy-pasting an image into a chat that flattens it.
Outcome: one artifact that carries the image and the instruction together. This is why the agent should read the screenshot, not a link. A bare URL to a live page gives Claude Code nothing to reason over; the markdown gives it the frame and the words in one read.
Step 5: Feed the markdown to Claude Code
Paste the markdown into your session, or connect it directly so Claude Code reads the review without a copy-paste step. Either way, Claude Code gets the cropped still, the pin location, and your description of the correct behavior in one pass. Because you named the viewport, the padding, and the z-index, it has the constraints to write the fix rather than asking you to clarify.
If you have more than one finding, publish them as separate items in the same review. A captured review becomes a task list Claude Code can work through in order, each item carrying its own screenshot and instruction.
Why this lands in one turn instead of three
The turns you lose are almost always spent on questions the report should have answered. Where is the element? A pin answers that. What does correct look like? Your comment answers that. What screen size? You said 900px. What is the likely cause? You named the z-index. Every clarifying question you preempt is a round trip you skip.
Two habits kill a one-turn fix, and both are avoidable. Sending a full-page screenshot forces the agent to find the bug before it can fix it. Writing "this is broken" forces it to invent a definition of fixed. The common mistakes when handing UI feedback to Claude Code covers the rest.
The same published review still serves a human. Anyone with the link reads it in the browser, and you can export it as a PDF or Word document for a teammate who wants the visual, not the markdown. One capture, two audiences. Cobalt Capture is free to use, and you can publish this report without an account at all.
Next time a layout bug shows up, capture it, crop it, pin it, say what correct looks like, and hand Claude Code the markdown. The fix arrives on the first try more often than you would expect.