Images, Screenshots, and Visual Input

Five minutes describing a broken layout in words. The padding is wrong, the button overlaps the sidebar, the card border vanishes on mobile but only in dark mode. Claude Code tries. Guesses wrong. Three more rounds of back-and-forth. Then you paste a screenshot.

Fixed in one shot.

Visual input sounds like a nice-to-have until you actually try it. Then you can't go back.

What Visual Input Gets You

Claude Code processes images directly in conversation. Screenshots, mockups, architecture diagrams, whiteboard photos, error popups, gnarly terminal output that'd be a mess to copy-paste.

It doesn't just read pixels. A React component rendering wrong? It spots the CSS problem. A database schema diagram? It suggests migration steps. A design mockup? It writes matching HTML and CSS.

Formats: JPEG, PNG, GIF, WebP. 5MB limit per image, 8000x8000 max resolution. Most screenshots are well within bounds.

Multiple images per conversation work great. Compare before and after, show the mockup next to the broken render, put the error screenshot beside the config file.

Three Ways to Add Images

Drag and drop. Grab an image from your file manager, drop it into the terminal. Works on most terminal emulators.

Paste from clipboard. Screenshot, paste. Fastest path by far.

• macOS (iTerm2): Cmd+V
• VS Code terminal: Ctrl+V or Cmd+V
• Windows Terminal: Alt+V
• Linux: Ctrl+V

No saving to disk. Screenshot, switch to Claude Code, paste. Done.

Reference a file path. Point Claude Code to an image on disk:

Analyze this image: /Users/me/Desktop/screenshot.png

Here is the current UI: ./screenshots/dashboard-broken.png

Claude Code reads the file and processes it inline. Useful when you've got a folder of screenshots or design assets.

When Claude Code references images in its output (like "[Image #1]"), Ctrl+Click (Cmd+Click on macOS) opens that image in your default viewer. Worth doing to verify it's looking at the right thing.

When Images Beat Text

If describing the problem takes more than two sentences and involves anything spatial or visual, just screenshot it.

UI bugs. "The button is 3 pixels too far to the right" is nearly impossible to convey in words. A screenshot makes it obvious:

Here is a screenshot of the dashboard. The sidebar overlaps the main content on screens under 768px. Fix the CSS.

Design implementation. Figma mockup, sketch, napkin drawing. Way easier than describing every spacing value and color:

Generate CSS to match this design mockup.

What HTML structure would recreate this component?

Error messages. Some stack traces and error dialogs are just easier to screenshot. Especially when formatting matters or the error lives in a GUI:

Here is a screenshot of the error. What is causing it?

Architecture diagrams. Database schemas, system diagrams, flowcharts. These lose all their meaning when flattened to text:

This is our current database schema. How should we modify it to support multi-tenancy?

Visual verification. Underrated. After Claude Code makes a CSS change, screenshot the result and paste it back. "Does this match what I asked for?" Creates a feedback loop that catches issues before they compound. I do this constantly for anything visual.

The Browser Extension

Claude Code has a Chrome extension (@browser) that takes this further. Instead of screenshotting manually, Claude Code goes and looks:

@browser go to localhost:3000 and check if the header renders correctly

@browser open localhost:3000/dashboard and check the console for errors

It opens new tabs, shares your browser login state, interacts with the page. Claude Code makes a code change, checks the result in the browser, fixes issues. You don't lift a finger. For UI iteration, nothing else comes close.

Try It

1. Open any web page or your project in a browser.
2. Screenshot it (Win+Shift+S on Windows, Cmd+Shift+4 on macOS).
3. Paste into Claude Code (Alt+V on Windows, Cmd+V on macOS in iTerm2).
4. Try:

What UI elements do you see in this screenshot? List them with their approximate positions.

5. Try referencing an image by path too:

Describe what this image shows: /path/to/any-image.png

Claude Code understands layout, colors, text, spatial relationships. Same capability you'll use for real debugging.

Quick Reference

Three input methods: drag and drop, clipboard paste, file path reference. Paste is fastest. If it's spatial or visual, just screenshot it instead of describing it. Multiple images per conversation work fine for before/after comparisons or mockup vs. render comparisons. The @browser extension automates the whole visual feedback loop, and Ctrl+Click (Cmd+Click) on image references in output opens them in your viewer.