The hardest part of building with an agent is not the code. It is describing a rectangle.
You are looking at the thing Claude Code just built. The card spacing is wrong, the button belongs under the title, the empty state says nothing useful. You know exactly what you want. Now put that in a sentence an agent can act on.
So you write a paragraph. It changes the wrong thing. You write a longer paragraph with more precise words. It changes a different wrong thing. Somewhere in round three you give up and go edit the file yourself, which was the thing you were trying not to do.
I did this for months before noticing the obvious.
Your agent takes images
Claude Code, Cursor, Codex, all of them accept a pasted image. Most people use this for screenshots of errors. Almost nobody uses it for the thing it is actually good at, which is pointing.
Try this instead of the paragraph:
- Screenshot the running UI
- Open it in any annotation tool
- Circle the button. Draw an arrow to where it should go. Write "too tight" next to the padding
- Paste that image into your agent with one line of text
The one line is usually something like "make these changes". That is it. The agent reads the arrows.
The difference is not small. A paragraph describing four changes to a layout is a paragraph that can be misread four ways. A screenshot with four arrows on it has no ambiguity in it at all, because you did not describe the position, you indicated it.
Why handwriting beats boxes and labels
Most annotation tools give you shapes, arrows and a text box. Those are fine. But a text box forces you back into words, and words are the thing that failed.
Handwriting does not. You can write "32 not 16" sideways in a margin next to the padding you mean. You can draw the layout you want in the empty space beside the layout you have. You can scribble out a whole section and write "cut this". None of that is expressible in a toolbar.
The agent reads handwriting fine, which surprised me the first time. Not perfectly, but well enough that "move up" scrawled next to an arrow does what you would expect.
Where this stops helping
It is worse than words for anything you cannot see. Logic, state, timing, error handling. A screenshot cannot show you that the thing flickers on the second render.
It is also worse for changes that are genuinely verbal. "Rename this to match the other component" is a sentence, not a picture, and drawing it would be daft.
So this is a layout and visual-design tool, which is maybe forty percent of what I ask an agent to do and roughly ninety percent of the rounds I used to waste.
The part where I made it fast
The loop above works with any screenshot tool and any image editor. You should try it today with what you already have.
The reason I ended up building something is that the manual version has a tax. Screenshot on the Mac, AirDrop to the iPad, accept, find it in Files, open it in an annotation app, draw, export, AirDrop it back, find it again, then paste. Nine steps around one drawing, and by the third time in an afternoon I stopped bothering.
So I built the two ends of it. Screenshot on the Mac, it is on the iPad a second later. Draw on it with the Pencil. Flick it back, and the marked-up image is on the Mac clipboard, ready to paste into the agent.
It is called Pen Friend, an iPad app plus a small Mac one. Both free, no account, and the two machines talk over your own network.
But the technique is the point and it costs nothing. Screenshot, draw, paste.
What I want to know
I only have my own answer to this, which is not a sample.
When your agent builds the UI almost right, what do you actually send back? A paragraph, an annotated screenshot, a Figma link, or do you give up and open the file?
Top comments (0)