Three kinds of target: a canvas (by slug), a local HTML file, or any public URL. Width and height are flags, past versions are addressable, and --full captures the whole page rather than one viewport.

What does --annotation do?

Given a comment's id, the shot reproduces that comment's captured view — same width, same version — and draws a highlight box around the anchored element. It's the difference between an agent reading "buttons squished" and an agent looking at the squished buttons.

Do I ever run it myself?

Usually not. It's built for the agent: Claude runs it when a comment needs looking at, or to check its own work before pushing. You can run it by hand, but the normal path is just leaving a comment and letting the agent do the looking.

Where does the rendering happen?

Locally, in the Chrome already on your machine — which is why private canvases and local files are fine: their content never leaves your computer. No cloud renderer sees your page on the happy path.

Can it render phone widths?

Yes, including real sub-500px viewports. (Headless Chrome silently clamps narrow windows — the kind of lie that produces "phone-width" renders that aren't. drafty shot works around it, after our own testing caught it.)

How is this different from a screenshot I paste into chat?

A pasted screenshot is a one-off with no context. A shot is reproducible: the agent can render the same view again after a fix, at the same width and version, and verify the change actually worked — that's the verify-before-claim loop.

Updated June 11, 2026

What is drafty shot?

Quick answer

drafty shot is the agent's eyes: one command that renders a canvas, a local HTML file, or any public URL to an image and prints the file path. It can render at any width (including phone widths), at any past version, and with the element from a specific comment highlighted — so an agent can see exactly what a commenter saw, and verify its own fix by rendering again before claiming it works. Rendering happens locally in your Chrome, so private content never leaves your machine.

Coding agents work in text — they can write a page they've never seen render. drafty shot closes that gap: one command that renders something to an image and prints the file path, so the agent can read the result like any other file. It's the agent's eyes.

What it renders

Three kinds of target:

A canvas, by slug — at any width, and at any past version.
A local HTML file — the mockup the agent just wrote, before anyone else sees it.
Any public URL — your staging deploy, someone else's site.

Width and height are flags; --full captures the whole page instead of one viewport. Phone widths are real — actual sub-500px viewports, not a desktop window pretending.

Rendering a comment's exact view

The flag that matters most is --annotation. Given a comment's id, the shot reproduces the view that comment captured — the commenter's width, the version they were on — and draws a highlight box around the element they tapped. The agent isn't interpreting "squished" any more; it's looking at the squished thing.

Verify before claiming

The same command closes the loop on the other side: after a fix, the agent renders the same view again and checks the result before pushing. A "fixed!" backed by a render it has actually seen — instead of a claim about CSS it never watched take effect.

Where rendering happens

Locally, in the Chrome already on your machine — so private canvases and local files never leave your computer. Public canvases use a shared render service with caching, since their pages are already public at the link.

You'll rarely run any of this yourself: the normal path is leaving a comment and letting the agent do the looking. For the full story, see Stop screenshotting other people's websites.

Get started

Frequently asked

What can it render?: Three kinds of target: a canvas (by slug), a local HTML file, or any public URL. Width and height are flags, past versions are addressable, and --full captures the whole page rather than one viewport.
What does --annotation do?: Given a comment's id, the shot reproduces that comment's captured view — same width, same version — and draws a highlight box around the anchored element. It's the difference between an agent reading "buttons squished" and an agent looking at the squished buttons.
Do I ever run it myself?: Usually not. It's built for the agent: Claude runs it when a comment needs looking at, or to check its own work before pushing. You can run it by hand, but the normal path is just leaving a comment and letting the agent do the looking.
Where does the rendering happen?: Locally, in the Chrome already on your machine — which is why private canvases and local files are fine: their content never leaves your computer. No cloud renderer sees your page on the happy path.
Can it render phone widths?: Yes, including real sub-500px viewports. (Headless Chrome silently clamps narrow windows — the kind of lie that produces "phone-width" renders that aren't. drafty shot works around it, after our own testing caught it.)
How is this different from a screenshot I paste into chat?: A pasted screenshot is a one-off with no context. A shot is reproducible: the agent can render the same view again after a fix, at the same width and version, and verify the change actually worked — that's the verify-before-claim loop.