Images, screenshots and visual work

Give Claude screenshots, mockups and diagrams, and build a UI loop where it compares its result to a target image.

What you’ll be able to do

Use screenshots and mockups as context, and run a “match this design” loop that reliably gets close to the target.

Three ways to give Claude an image

Paste an image from your clipboard into the prompt: Ctrl+V on macOS and Linux (Cmd+V in iTerm2), Alt+V on Windows and WSL. An [Image #1] chip appears, which you can refer to in your prompt.
Drag and drop an image file into the terminal.
Reference a path: “Look at @designs/checkout.png and…”

What images are good for

Bug reports: “This modal overflows on mobile. Here’s what it looks like. Expected: it scrolls internally.”
Mockups to code: “Build this card component to match the image.”
Diagrams: a whiteboard photo of an architecture becomes a starting point: “Turn this into a Mermaid diagram and a list of services.”
Error dialogs you can’t copy as text.

Exercise: match a design

Create a tiny static page project:

mkdir visual-practice && cd visual-practice
git init

Find a simple UI you like (a pricing card, a login form) and take a screenshot. Save it as target.png. Then:

Build index.html + styles.css that reproduces @target.png as closely as
possible. Use plain HTML/CSS, no frameworks. When done, list the differences
you expect between your version and the target.

Open index.html in a browser, take a screenshot of your result, and paste it in:

Here's how it renders now. Compare it with @target.png and fix the three
biggest differences.

Repeat two or three times. Each round should get visibly closer.

Let Claude take the screenshots itself. With Claude in Chrome (claude --chrome, or /chrome in a session), Claude can open your page in your browser, screenshot it, read the console and fix what it sees. That closes the loop completely. The Desktop app has a built-in browser pane, and Module 5 shows an MCP-based alternative. For native apps, computer use lets Claude click through a real GUI.

Tips

Crop to what matters. A full-screen screenshot of a small bug makes Claude hunt for it.
Annotate with arrows or boxes if several things are wrong.
Say what’s correct, too. “The layout is right, only spacing and font sizes are off” stops it from changing things that already work.

Verify it worked

You gave Claude an image by pasting, by drag and drop, or with a path
You ran at least two compare-and-fix rounds against a target image
Your final version is recognisably close to the target