Beginner6 min read
Was this chapter helpful?
Share
The fastest, clearest way to fix a UI bug or polish a layout: draw on a screenshot, paste it in, tell the AI what to change.
Try describing this in words: "The button on the right of the navbar should be slightly bigger, with more padding on the sides, and the gap between it and the logo feels too tight."
Now imagine the same thing as a screenshot with a red circle around the button, an arrow pointing at the gap, and the words "make this bigger" and "more space here" scribbled on top.
The image version takes 30 seconds to make and the AI gets it on the first try. Modern AI coding tools (Claude Code, Cursor, Lovable, v0, Bolt) all understand images — so use that to your advantage.
Once you do this twice it becomes muscle memory.
Capture just the area that needs work — not the whole screen. A tight crop helps AI focus on the problem.
Draw arrows or circles around what to change. Type short notes like "too small" or "add space" right on the image.
Paste the image into your AI tool's chat and write a one-line prompt. The AI sees your marks and edits the code.
You probably already have one of these installed.
Built-in · Mac
Press Cmd+Shift+5 to capture, then click the thumbnail that appears in the corner. The Markup view lets you draw arrows, circles, and text before saving or copying.
Best for: Quickest option on a Mac — no install needed
Built-in · Windows
Press Win+Shift+S to snip. The notification opens the editor where you can draw, highlight, and add shapes. Copy to clipboard with Ctrl+C.
Best for: Quickest option on Windows — no install needed
Mac · paid
The most loved screenshot app among designers and developers. Beautiful arrows, blur tool, scrolling capture, and instant clipboard copy. Worth the one-time price if you do this a lot.
Best for: Power users who annotate every day
Four marks cover 90% of the feedback you'll ever give.
Point at a specific element you want to change. Use a single arrow with a one-word label like "shrink" or "move".
Surround the area that's wrong. Great for highlighting a misaligned section or showing where a new element should go.
Write short instructions on the image: "too tight", "make this purple", "hide on mobile". Keep them brief.
Use red for problems, green for things to keep. Number multiple changes so you can refer to them in your prompt ("fix 1, 2, and 3").
Your hero section looks crowded on mobile. The headline overlaps the image and the button is jammed against the edge of the screen. You take a screenshot, draw red circles around the three issues, and paste it into Cursor with this prompt.
Build this with AI
"Here's a screenshot of my homepage on mobile with notes on top. Please fix the three issues circled in red: 1. The headline is overlapping the image — add more space between them. 2. The CTA button is touching the right edge — add 16px horizontal padding to the section. 3. The image is too tall — cap it at 60vh on screens under 768px wide. Keep all other styling the same."
Paste your annotated screenshot, then send this prompt with it.
Here's a screenshot of [which page/section] with my notes drawn on top. Please make the following changes: 1. [what the first red mark means] 2. [what the second red mark means] 3. [what the third red mark means] Don't change anything that isn't marked. Keep the rest of the design exactly as it is.
Here's a screenshot of my pricing page. The middle plan card (circled in red) is taller than the other two — please make all three cards the same height. Also the price text in the third card (arrow) is overflowing the card. Don't change anything else.
Screenshot of the dashboard sidebar with three notes. (1) The active link's background should be purple, not gray. (2) The icons should be 20px, not 16px. (3) The gap between sections marked with the arrow needs to be larger — try 32px. Keep typography and spacing elsewhere identical.
Here's my landing page hero. I drew an empty box where I want a new component: a trust bar with five logos under the CTA button. Use placeholder logos for now. Don't touch the headline, subhead, or button.
Small habits that make the AI understand you on the first try.
