Blog
4 min read

How to Give Claude Code Images and Screenshots

Claude Code can read screenshots, mockups and error images. How to paste or drag an image into the terminal, reference an image file by path, the Ctrl+V vs Cmd+V gotcha on Mac, and the prompts that get the best results from visual input.

A screenshot is often the fastest way to explain a problem: the button is in the wrong place, the layout breaks on mobile, the error dialog says something cryptic. Claude Code can look at images, not just text. Here's how to get them in, and how to ask so the result is useful.

Three ways to add an image

1. Paste from the clipboard

Take a screenshot to your clipboard, then paste it into the Claude Code prompt.

  • macOS: take the screenshot with Cmd+Ctrl+Shift+4 (copies a region to the clipboard). Then paste into Claude Code with Ctrl+V. In most terminals Cmd+V pastes only text, so Ctrl+V is the reliable choice; iTerm2 is the exception, where Cmd+V pastes images too.
  • Windows: Win+Shift+S to snip a region, then paste with Ctrl+V, or Alt+V if Ctrl+V doesn't work (common in WSL).
  • Linux: use your desktop's screenshot-to-clipboard shortcut, then Ctrl+V.

You'll see a placeholder like [Image #1] appear in your prompt. Type your question after it and press Enter.

2. Drag and drop

Drag an image file from your file manager onto the terminal window. Most terminals insert the file's path; Claude Code recognises it as an image and reads it.

3. Give a file path

If the image is already on disk — a design mockup in your repo, a screenshot in your Downloads folder — just mention the path:

Look at docs/mockups/checkout.png and make the checkout page match it.

This is the most reliable method, especially over SSH or on a remote server where your local clipboard isn't available.

In VS Code, the desktop app and the web

In the VS Code extension, the desktop app and Claude Code on the web, you can paste images directly or attach them with the paperclip/attach button — the same way you would in a chat app. See Claude Code on the web, desktop or terminal.

What images are good for

  • "Make it look like this." A mockup, a Figma export, or a screenshot of a site you like. Claude can build the layout, spacing and colours from it.
  • "This is broken." A screenshot of a misaligned layout or a page that renders wrongly at a certain width.
  • Error dialogs and console output you can't easily copy as text.
  • Diagrams — a whiteboard photo of your database tables or an architecture sketch.
  • Charts and dashboards — "the latency graph spikes every hour; what in the code could cause that?"

Prompts that work well with images

An image alone is ambiguous. Pair it with what you want:

  • "Here's the current page [Image #1] and the design [Image #2]. List the differences, then fix them one by one."
  • "At 375px wide the nav overlaps the logo [Image #1]. Find the CSS responsible and fix it without changing the desktop layout."
  • "This is the error I see after deploying [Image #1]. Explain what it means before changing anything."

Asking for a list of differences first works especially well: you can check Claude saw the image the way you did before it edits code.

Let Claude take its own screenshots

For web projects, Claude Code can check its own work visually if you connect a browser tool such as the Playwright MCP server. It can then load your page, take a screenshot, compare it to the mockup and iterate. See Claude Code MCP servers.

Things to know

  • Images use tokens. A screenshot costs roughly as much as a page or two of text. Crop to the part that matters; it's cheaper and clearer. See what are tokens in AI?.
  • Don't paste secrets. A screenshot of your dashboard may include API keys, emails or customer data. Crop or blur first.
  • Very small text is hard to read. Zoom in before screenshotting, or paste the text itself.
  • Over SSH, use file paths. Clipboard paste reads the clipboard of the machine Claude Code runs on. Copy the file to the server (or save it into the project) and reference it by path.

The summary

  • Paste with Ctrl+V (on a Mac too, except iTerm2 where Cmd+V also works; Alt+V on Windows/WSL), drag a file in, or mention an image path.
  • Always say what you want done with the image.
  • Ask for a list of differences before asking for fixes.
  • Crop images and remove sensitive information first.

EasySpawn runs Claude Code next to your running app on a persistent server, so the agent can open the real page, compare it with your mockup and fix it in one place. See how it works or join the waitlist.

Related: Claude Code Tutorial for Beginners · Claude Code Slash Commands · How to Prompt AI Coding Tools · Responsive Design Basics

Keep reading