Images and Multimodal: Paste a Screenshot, and It Understands
📚 Series Navigation: The previous article 16 Common Workflows went over the daily routines of reading code, fixing bugs, and writing tests. This article adds a new dimension—not only can you type to it, but you can also directly show it pictures: error screenshots, design mockups, architectural diagrams, just throw them in and it understands.
For example, restoring a page screenshot given by a designer into a webpage. In the past, we had to measure pixel by pixel against the image—how much spacing here, what font size, what degree of button border radius, just figuring out the values would grind away a whole morning.
At this time, just drag that PNG directly into the Claude Code window, and type the sentence "Generate the corresponding CSS following this design mockup".
A few minutes later, it spits out a whole block of CSS—layout, color scheme, border radius, shadows all match up, paste it into the project, refresh the browser, and it's almost identical to the design mockup. The efficiency gap is immediately apparent: showing it is much faster than telling it.
To put it plainly, the saying "a picture is worth a thousand words" is literally true here with Claude Code. Today we will thoroughly explain "how to feed images + what feeding images can do".
After reading this article, you will get:
- Three ways to shove images into Claude Code, just follow along (includes a shortcut pitfall Mac users must step on)
- The three major proper uses of images: pasting error screenshots, restoring design mockups, reading charts / architectural diagrams
- A judgment standard: when should you use an image, and when typing is enough
- How to use multiple images, how Claude references images, and how to one-click open the one it's talking about
01 Why Show It Pictures Instead of Just Typing
Let's state the conclusion first: When something is "more tedious to describe than to screenshot", it's time to use an image.
This is the judgment standard clearly written in black and white in the official documentation—"Use images when text descriptions are unclear or cumbersome".
Analogy: A picture is worth a thousand words. You try to describe to a friend what a red-and-green error popup looks like, talking for ages "there's a red cross in the top left, a line of small text below, and a button on the right..." the other person is still confused; but you snap a screenshot and throw it over, they go "oh" and understand everything instantly. Showing pictures to Claude is the same principle—saving you the effort of organizing language, and also saving it the effort of guessing.
Which scenarios are particularly suitable for images? After using it, it's mainly these three categories:
| Scenario | How tiring is typing description | How time-saving is an image |
|---|---|---|
| Page misalignment / wrong styles | "This div shifted to the right by about twenty pixels, and overlapped with the block below" | Take a screenshot, it sees the misalignment at a glance |
| Error popup / console red text | Manually typing or copying & aligning a long string of stack trace | Throw the screenshot in, giving context along with it |
| Restoring design mockups / copying a component | "The main color is a purplish blue, the border radius is medium..." | Give the picture, let it measure itself |
There is a key difference here that must be clarified: What Claude Code looks at is "the content in the image", it doesn't take screenshots for you. You still have to do the screenshot step yourself (the system's built-in screenshot tool is fine), it is responsible for "understanding the image you gave".
💡 One-sentence summary: The judgment standard is just one sentence — if it's more tiring to describe than to screenshot, use an image; the official original words are "Use images when text descriptions are unclear or cumbersome".
02 Three Ways to Feed Images: Drag, Paste, Give Path
How to shove the image in? The official documentation gives three methods, choose any one, the effect is the same. I'll order them from lowest to highest "learning difficulty".
This picture merges three paths of adding images into one place: dragging into the window, ctrl+v pasting after copying (Mac is also ctrl+v), or directly giving the file path—three methods reach the same goal, which is feeding the picture to Claude and letting it "work by looking".
Method 1: Drag directly into the window (Most Intuitive)
Drag the image file from Finder / File Manager into the running Claude Code terminal window, let go, and it's in.
This is the most brainless way—feels the same as dragging a file into a WeChat chat box to send an image. Beginners usually start with this, zero learning cost.
Method 2: Copy image, ctrl+v to paste (Highest Frequency, but has a pitfall)
Many times the image isn't saved as a file at all—you just took a screenshot, or right-clicked "Copy Image" from a webpage, at this time pasting directly is the most refreshing.
But here lies the biggest pitfall of the whole article, the official documentation specifically emphasized it:
Copy an image and use ctrl+v to paste it into the CLI (do not use cmd+v).
Note: On Mac, pasting images also uses ctrl+v, not your accustomed cmd+v.
How counter-intuitive is this point? Mac users have copied and pasted text with cmd+v for ten years, the muscle memory is deeply rooted. The first time pasting a screenshot, it's very easy to habitually press cmd+v, and as a result a long string of garbled path text pops out in the terminal, the image didn't go in at all, making you think it's not supported. Flipping through the documentation makes it clear—in many terminals, cmd+v pastes the file path text, only ctrl+v steadily feeds the image itself to Claude.
(Adding a sentence: some terminals like iTerm2 also recognize cmd+v for pasting images, but terminal behaviors are inconsistent, ctrl+v is the path that works everywhere, remembering it avoids pitfalls.)
Memorize this rule:
| Platform | To paste image use | Don't use |
|---|---|---|
| Mac | ctrl+v | ❌ cmd+v (Most terminals will paste as path text) |
| Windows / Linux | ctrl+v (If WSL terminal intercepts ctrl+v, switch to alt+v) | —— |
A small detail: After pasting successfully, a [Image #1] placeholder marker (officially called a "chip") will appear in the input box, indicating the image is hung up, and you can continue typing in this prompt.
Method 3: Give image path directly (Best for scripts / saved images)
If the image is already saved as a file, and you know the path, the most straightforward way is to type the path directly in the prompt, letting it read it itself:
Analyze this image: /path/to/your/image.pngJust replace /path/to/your/image.png with the real path of your image (relative paths, absolute paths are both recognized). This method doesn't rely on mouse dragging, it's best used when writing in scripts, or when the image is hidden deep in some directory of the project.
💡 One-sentence summary: Drag into window /
ctrl+vpaste / directly give path, choose one of three; Mac users memorizectrl+v, don't presscmd+v.
03 Use Case 1: Paste Errors and UI Screenshots, Give it the "Scene"
The first most practical scenario—throw the problematic screenshot at it, let it judge the case looking at the scene.
Why is this trick so useful? Because for many errors and styling issues, words simply cannot convey everything. An error popup has icons, colors, layout, you can only describe an approximation by typing manually; UI misalignment is even more so, a few pixels difference is visible to the naked eye, but hard to explain with mouth.
Analogy: Going to the hospital, don't just rely on your mouth to describe "it hurts here", take an X-ray for the doctor. You say "my lower right abdomen aches vaguely", the doctor can only guess; put up a CT scan, and where the problem is becomes clear at a glance. A screenshot is that "X-ray" for Claude.
How to do it exactly? Feed the screenshot in (choose any of the three methods), then accompany it with a sentence pointing out your request. The demonstration prompt given officially is very on point:
Here's a screenshot of the error. What's causing it?Or, for UI issues:
Describe the UI elements in this screenshotFor instance, when tweaking a React page, a button adamantly shifts to the right, and looking back and forth at the CSS reveals no flaws. At this time, directly take a screenshot of the misalignment and throw it in, accompanied by "why is this button pushed to the right", Claude looks at it and says "your parent container has a padding-right, added to the button's own margin, they stacked together" — one sentence points it out, you change one line and it's fixed. If relying on typing to describe this misalignment, you'd probably have to go back and forth for several rounds.
💡 One-sentence summary: For errors and UI issues, a screenshot is the "scene photo" — showing it to it is much faster for judging cases than telling it.
04 Use Case 2: Restore Design Mockups, Screenshots Directly to Code
This is the scenario from the beginning where "the efficiency gap is immediately widened", singled out to talk about—give it a design mockup, let it spit out runnable code.
Why is this trick the most amazing? Because it saves the most grinding physical work of "design → code". Measuring values against the picture, adjusting spacing, trying color schemes, which were originally the most boring part of frontend, are now thrown to it to produce a version that's eighty to ninety percent there, and you just tweak it.
Analogy: Taking a photo and asking a tailor to make clothes based on it. You don't need to report every dimension to the tailor, put the photo of the sample clothes in front of him, and he can figure out the pattern, materials, and stitching himself. A design mockup screenshot to Claude is that "sample clothes photo".
The official demonstration prompts, remembering these two sentences is enough to start work:
Generate the corresponding CSS following this design mockupWhat HTML structure would recreate this component?The first sentence lets it generate CSS following the design mockup, the second sentence lets it infer the HTML structure capable of replicating this component. Using both sentences together, the skeleton of a static component emerges.
To be honest, you must have a reasonable expectation: it's not pixel-perfect replication, it gives you a highly complete starting point. Like the CSS at the beginning, the overall layout and color scheme were all correct, but the padding in two places was off by a few pixels, just adjust it manually. But this has already saved at least an hour—writing CSS from scratch versus modifying its 80% draft are entirely different workloads.
| Restoring design mockups | ❌ Purely hand-written | ✅ Feed screenshot to it |
|---|---|---|
| Measure values | Dig out pixels one by one yourself | It estimates based on the picture |
| Produce skeleton | Type from an empty file | Directly gives a runnable version |
| Your work | Entirely from scratch | Modify the last ten or twenty percent |
💡 One-sentence summary: Design mockup screenshot + "Generate corresponding CSS following this design mockup", it gives you an 80% draft, you fill in the last 20%, what's saved is all physical work.
05 Use Case 3: Read Charts and Architectural Diagrams, Let it "Understand Structure"
The third use case, charts, database schemas, architectural diagrams—these "structural" diagrams, it can also understand.
Why list this as a separate category? Because the previous two categories (errors, design mockups) contain "interfaces" in the pictures, while this category of pictures contains "relationships" — who connects to whom, how data flows, how modules are layered. Such relationships are particularly convoluted to string together with text, but clear at a glance with a diagram, which is exactly Claude's cup of tea.
Analogy: Explaining a system to a new colleague, drawing a block diagram on a whiteboard is more effective than talking for half a day. You verbally dictate to the newcomer "user service calls order service, order service also depends on inventory and payment...", and they are totally lost listening; connect a few boxes on the whiteboard, draw arrows, and they get it immediately. Taking a screenshot of this block diagram to Claude has the same effect.
The official demonstration prompts cover both directions of "reading" and "modifying":
This is our current database schema. How should we modify it for the new feature?Are there any problematic elements in this diagram?The first sentence is taking the existing database schema diagram, asking it how tables should be modified for new features; the second sentence is asking it to review if there are unreasonable places in this diagram.
A very common usage: taking over an unfamiliar project, the other party throws over an architectural diagram PNG, directly feed it to Claude, let it first talk about how this system roughly runs. It can read modules and invocation relationships from the diagram, giving you an overview—much faster than staring blankly at the diagram yourself, equivalent to someone taking you through the diagram first.
💡 One-sentence summary: Diagrams like charts, schemas, architectural diagrams that "talk about relationships", feed them to it as background, let it understand the structure before helping you modify or review.
06 Multiple Images, Referencing, One-Click Open: A Few Handy Little Operations
Finally, fill in a few details that make your usage smoother, all mentioned in the official documentation.
Can Feed Multiple Images at Once
You don't need to do it one by one—you can stuff multiple images into the same prompt. For example, "This is the old design mockup, this is the new design mockup, tell me what places have changed", give both together, let it compare. This is often done when design mockups are revised, saving back-and-forth descriptions.
How Claude References Images: [Image #1]
When Claude mentions a certain picture you gave in its reply, it will use numbers like [Image #1], [Image #2] to refer to it—whichever picture it is is the number. When there are multiple images, this number lets you match up "which one it's talking about" at a glance.
One-Click Open the One It's Talking About
The [Image #N] that appears in its reply is clickable, according to official statements:
When Claude references an image (e.g.
[Image #1]),Cmd+Click(Mac) orCtrl+Click(Windows/Linux) the link to open the image in your default viewer.
That is to say, if you want to confirm exactly which picture it's referring to, Cmd+Click on Mac, Ctrl+Click on Windows/Linux that number, and the system's default image viewer will open the picture for you.
| Operation | Mac | Windows / Linux |
|---|---|---|
| Paste Image | ctrl+v | ctrl+v |
Open [Image #N] | Cmd+Click | Ctrl+Click |
Note that the "division of labor" for these two shortcuts is reversed: pasting images uses ctrl, but opening image links on Mac uses Cmd. Don't mix them up.
💡 One-sentence summary: A prompt can stuff multiple images, Claude refers to them with
[Image #N], clicking that number (Mac isCmd+Click) opens the image for checking.
07 Hands-on: Drag an Image Let it Read, Run Through in Three Steps
All talk and no action is useless. Below use any picture randomly on your computer, run through the complete process of "feeding image → it understands" in three steps. No project needed, just have a picture on the desktop.
Step 1: Randomly find a picture, remember its location
Take a screenshot, or just find an existing PNG / JPG. Mac screenshots default to saving on the desktop, file name looks like Screen Shot 2026-06-10 at 3.20.15 PM.png. Drag it to an easy-to-type path, like leaving it directly on the desktop.
Step 2: Start Claude Code in any directory
claudeExpectation: Welcome screen appears, with input box at bottom. (Reading images doesn't pick directories, starting anywhere is fine.)
Step 3: Feed the image in, let it describe
Choose any of the three methods, beginners are recommended to drag directly: drag that picture from the desktop into the terminal window, let go, the [Image #1] marker will appear in the input box. Then continue typing:
What is in this picture? Describe what you see in EnglishPress Enter.
Expectation: Claude reads this picture, tells you what's in the picture in English—if it's a screenshot it says interface elements, if it's a photo it describes the scene content. Seeing it accurately state the things in the picture = feeding image successful, full process run through.
⚠️ Mac users who want to try the "copy paste" path: First copy the image in Preview / Browser, go back to the terminal and press ctrl+v (not cmd+v). If after pressing, a string of file path text pops out instead of the [Image #N] marker, chances are your hand slipped and pressed cmd+v, delete and try again.
💡 One-sentence summary: Drag in /
ctrl+v/ give path, three steps to feed image, seeing Claude accurately describe image content means it's run through.
08 Summary
In this article you learned to open the "vision" channel for Claude Code — from only being able to type, to being able to directly show it pictures.
Stringing the key points together:
| Dimension | Key Point |
|---|---|
| How to feed | Drag into window / ctrl+v paste / give path, choose one of three |
| Biggest pitfall | Mac paste image uses ctrl+v, don't press cmd+v |
| Three major uses | Error / UI screenshots for scene, restore design mockups to code, read charts / architectural diagrams for structure |
| When to use image | When text description is more tiring than screenshotting |
| Multi-image & reference | One prompt stuffs multiple, Claude refers with [Image #N], click number to open |
You should now be able to: Feed any screenshot, design mockup, or architectural diagram to Claude Code, letting it diagnose errors, produce code, and organize structures by looking at the picture; and remember that most counter-intuitive ctrl+v on Mac. This set of "showing it" capabilities will make your cost of describing problems drop straight down in the future—many requirements that previously took ages to type out can now be solved with one picture and one sentence.
The next article is 18 "CLAUDE.md Guide"—previously we have been constantly feeding pictures, feeding requirements, but we have to repeat the project background every time. Is there a way to let Claude automatically know what this is and what rules to follow upon entering a project? The next article will talk about that "onboarding manual" for it — CLAUDE.md, configure it once and it never needs you to repeat it again.