You have a picture: a site you liked, and you want your own page to look the same. A site like that is hard to put into words. "Light, airy, cards in three columns, sans-serif type, large headings" - that's already longer than just opening the picture, and still not accurate. Which raises a fair question: the agent works with text. Can it see a picture at all?
It can. You can paste a screenshot straight into your prompt, and the agent gets the whole thing, not your description of it. But a picture is only half a brief: it says how the result should look and stays silent about everything else. You add the rest yourself, and below you'll see exactly what.
1. How to hand the image to the agent
There are two ways.
- Copy the image and paste it into the prompt:
Ctrl+V, orAlt+Von Windows and WSL. - Type
@and pick the path from the suggestions.
When you paste, the marker [Image #1] appears in the prompt. From then on both you and the agent refer to the image by number; the second one will be [Image #2], and so on. It looks like this:
[Image #1] Make my page look like this screenshot.Claude Code inserts the marker; you don't type it. That's a prompt made of one image and one sentence. Not enough, but more on that later. If the image already sits in the project, say a designer's mockup in the img/ folder, the second way is handier:
@img/reference.png Match index.html to the style of this reference.Type @, start typing the file name, and Claude Code fills in the path. An image like that is easy to come back to: in any later prompt you just write @img/reference.png again instead of pasting it once more. You can point to a file outside the project too, with a full path.
If your terminal grabs Ctrl+V for its own purposes, Alt+V saves the day. The formats are the usual ones: PNG, JPEG, WebP, GIF too, though from an animation the agent only gets the first frame. A screenshot from a phone works fine. A photo of a screen is worse: glare and a skewed angle cause misreadings.
And the order: image first, words after. The agent works better that way, and so do you - show first, explain second.
A screenshot lives in the conversation next to the text, and the agent rereads it on every turn. One or two references are fine. Ten in a row will weigh the session down noticeably, and there's no reason to drag images you're done with into a new task.
2. What the agent sees in the image
The image itself, not a description of it. A large screenshot is scaled down before it's sent, so small details on your screen can blur together for the agent. The big things it reads reliably: which blocks there are and in what order from top to bottom, their proportions, whether the page is light or dark and what the accent color is, readable text, the overall feel - tight or airy, sharp corners or rounded ones.
A simple way to make sure the agent is looking at the same thing you are: before any edits, ask it to describe the reference back to you without changing anything. Takes a minute. The answer looks roughly like this:
A light page. At the top, a narrow header with the name on the left and three links on the right.
Below it a large heading on two lines and a short paragraph under it.
Then three cards in a row, all the same width, image on top and text below.
One accent color, dark blue: the header button and the underlines.
Plenty of space between blocks, rounded corners, almost no shadows.Your reference will get a description of its own, and it may well contain a color code, "a gap of about 24 pixels", and a font name. That's an estimate by eye, not an eyedropper and not a ruler: check numbers like these against the reference; don't take them as measurements. The first pass gives you the right direction, not a one-to-one match. That's a property of pictures, not a mistake on the agent's part, and below you'll see why.
3. What is not in the picture
| Reads reliably | Does not see, or sees only roughly |
|---|---|
| the layout and order of blocks | exact sizes in pixels - approximate |
| the color scheme and the accent color | color codes - approximate |
| the character of the type | the font name - it picks a lookalike |
| readable text | very small text and icons - lost once scaled down |
| the overall feel: spacing, rounded corners, contrast | behavior: hover, click, animation - none of it |
| whatever is in the frame | other pages, the phone view, whatever is past the edge - none of it |
| how many large elements there are, usually right | an exact count of the small ones - approximate |
The agent will call a 24-pixel gap "about 24" and can be off by a third, give you a color code that's close but not the same, and pick a font that matches in character. Hover, click, animation, neighboring pages, the phone view - none of that is in the shot, and the agent won't learn about it until you say so.
The images, the logo, and the illustrations from the reference won't appear on your page. The agent understands images but draws no new ones. You have to add your own images to the project folder yourself and tell the agent where they are.
If a small detail matters, crop the screenshot down to it and hand it over as a second file - by hand, or by asking the agent to cut out the area you need. But don't cut away everything around it just to make the text bigger: the agent needs to see where that part sits and what's next to it.
A word about phones. A screenshot is taken at one screen width, and that width is all the agent sees. If the phone view matters and you have a link to the reference, take a shot from a phone as well: two shots, two markers. Without the second shot you'll have to describe the narrow screen in words, and the result will be the agent's version of it, not the reference's.
4. What to add in words
The picture answers "how it should look" and leaves four more questions open. Your part of the job is to give the reference and say what to do with it. Four lines, and later you check the result against the same four.
What matters most in the reference. The colors? The card grid? The header? The character of the type? Without this the agent takes everything at once and averages it, and the average usually isn't what you wanted. You already have the words for this line: take them from the description the agent gave you at the start.
What to keep on your side. The text, the page structure, the links, your own images. Otherwise the agent may rewrite your headings to match the reference: the reference had different ones, after all.
What not to copy. The logo, someone else's text, their products, their photos. A reference is style, not content.
The boundaries. One page, edits only in index.html and style.css, no libraries and no build step. What must not be touched.
Four lines feel like a chore next to a picture. Without them the result is pretty but wrong, and redoing it takes longer than writing those four lines.
5. One complete prompt
The image first, the four lines after:
[Image #1] Match my page to the style of this reference.
What matters: the light color scheme, cards in three columns, large sans-serif headings.
Keep my text, my page structure, and my images as they are.
Do not carry over the logo, the photos, or the text from the reference.
Edit only index.html and style.css, no libraries.Those four lines after the image are exactly the four things the image doesn't carry.
In reply the agent usually lists what it took from the reference and edits the files. The first result is a direction, not a copy. After that, refinements in words - short ones, because the reference is already in the conversation and there's no need to send the image again:
Bring the cards closer to the reference: softer shadows, rounder corners, more space between the cards.When the agent says "done", open the reference and your page side by side and check them against your four lines. If the result is off across the board, don't resend the same image with the same request: name the one thing that's most wrong and fix things one at a time. A report saying "made it like the picture" doesn't count as a check. no matter how confident it sounds.
6. What to remember
- The picture sets the look; the words set the boundaries. One without the other gets you either the wrong thing or a long detour.
- The agent takes the big things from a picture: structure, proportions, color scheme, character. The small details and the behavior are on you.
- The first pass is a direction. Refinements are short, because the reference is already in the conversation.
- A picture is useful for more than a style reference. Hand one over whenever describing something in words would take longer than just showing it.
Red text in the console, a block that slid somewhere odd, a window with a message you can't make sense of - take a shot and hand it over as is. The agent will read from the picture what you'd otherwise retype by hand, typos and all.
"Make it look like this" is still a good start. It turns into a good brief after four lines and one look at the result next to the reference.
Keyboard shortcuts and the look of the image marker may differ in newer versions of Claude Code; how you hand an image over, and the limits of what the agent sees, don't depend on the version.
GO TO FULL VERSION