Your pricing table renders fine on desktop and falls apart at 768px. The middle plan card overflows its column, the price wraps under the button, and the CTA sits half off screen. You can see it. Now you have to describe it to Zed AI in a way that gets the right element changed, not a guess three files away.
Here is the whole thing, start to finish, with the actual inputs and the actual output. No install, no extension, nothing to sign up for.
Capture the broken frame and crop to the problem
Open the staging build in a tab. Go to start a new review, click Capture screen, and pick the browser window showing the page. The current frame draws to a canvas. Resize your window to 768px first so the capture shows the bug, not the working layout.
Now crop. Drag a rectangle around the middle plan card and the two columns beside it. That crop is the only image edit you make. You are not drawing an arrow or a red box on the screenshot, because the crop already tells Zed AI where to look. A tight still of the broken region beats an annotated live page for exactly this reason: the agent reads what is in frame, not scribbles over it.
Drop a numbered pin on the CTA button that runs off screen. Pin 1 now points at the specific spot you care about.
Write the comment the way Zed AI can act on it
Add a comment to the item. Type it, or dictate it with the browser's built-in speech recognition if you are in Chrome or Edge. Say what you see, where, and what it should do instead. Concrete beats polished:
At 768px the middle plan card (.plan--featured) overflows its grid column. The price ($29/mo) wraps under the Choose plan button, and the button at pin 1 clips past the right edge of the viewport. Expected: all three cards keep equal width and the price stays on one line above the button. The grid uses a fixed 3-column template that does not collapse below the breakpoint.
That is the difference between feedback that gets fixed and a vague nudge. Field names, the breakpoint, the expected behavior. If you want the full pattern, what an agent-readable bug report contains lays it out.
Publish and hand the markdown to Zed AI
Click Publish. The review saves and gets a short public URL like /r/pricing-768-overflow. The same review is available as plain-text markdown at /r/pricing-768-overflow/markdown. That markdown is the format you paste into Zed AI.
The markdown for the example above comes out roughly like this:
# Review: pricing-768-overflow
## Item 1 (screenshot, pin 1)
At 768px the middle plan card (.plan--featured) overflows its grid column. The price ($29/mo) wraps under the Choose plan button, and the button at pin 1 clips past the right edge. Expected: three equal-width cards, price on one line above the button.
In Zed, open the assistant panel and paste the markdown along with a short instruction: fix the layout described in this review. Because the comment names .plan--featured and the fixed 3-column template, Zed AI can jump to your CSS and change the grid rule instead of hunting. The Zed AI workflow page covers how the review link and markdown export fit alongside the editor.
In the example, Zed proposed swapping the fixed grid-template-columns: 1fr 1fr 1fr for a responsive rule that collapses to a single column below 768px, and moved the price above the button with a flex order change. One edit, in the file you meant, because the input said what the input needed to say.
Why the still, not a recording
A screen recording of you resizing the window and pointing at the card gives Zed nothing to read. It cannot parse video, and neither can you skim it later. A cropped still plus a written comment is text an agent consumes directly. That distinction is the whole argument in screen capture versus screen recording as agent input, and it is why the markdown route works where a Loom link stalls.
The same review link serves everyone else too. Your PM opens the public URL and reads the comment. Zed reads the markdown. If a designer wants a record, export the review as a PDF or Word document. One capture, three outputs, none of them requiring the receiver to learn a tool.
What to do next
Pick one layout bug you already know about. Capture the frame at the width where it breaks, crop to the region, pin the exact element, and write the comment with real class names and the expected result. Publish, copy the markdown, paste it into Zed AI. If you want to tighten the framing so the agent lands on the right element every time, read how to frame a screenshot so the agent edits the right element. Cobalt Capture is free to use, and you can publish this first review without an account.