Images & Screenshots

Using Claude Code's vision capabilities to analyze screenshots, debug UI, and review designs.

Claude Code can read images. You can paste screenshots, reference image files, and ask Claude to analyze what it sees. This turns visual debugging from “let me describe what I see on screen” to “look at this and tell me what’s wrong.”

How to share images

Drag and drop

Drag an image file directly into the Claude Code window. Claude adds it to the conversation automatically.

Paste from clipboard

Copy a screenshot to your clipboard (Cmd+Shift+4 on macOS, Win+Shift+S on Windows), then paste it directly into the Claude Code prompt:

  • macOS: Cmd+V
  • iTerm2: Cmd+V
  • VS Code terminal: Ctrl+V
  • Windows/Linux: Ctrl+V or Alt+V

Claude shows [Image #1] in the prompt to confirm it received the image.

Reference an image file

Look at @screenshots/login-page.png and tell me what's broken

Or use a full path:

What does this mockup show? @/Users/me/Desktop/design-v2.png

Claude can read PNG, JPG, GIF, WebP, and SVG files.

When to use images

Debugging UI issues

The fastest path from “something looks wrong” to a fix:

[paste screenshot]
The button alignment is off on this page. The "Submit" button should be
right-aligned with the form fields above it. What CSS needs to change?
[paste screenshot]
This modal has a z-index issue -- you can see the nav bar bleeding through.
Find and fix it in @src/components/Modal.tsx

Comparing expected vs. actual

[paste screenshot of expected design]
This is the Figma mockup.

[paste screenshot of actual implementation]
This is what we shipped. Find the differences and fix them.

Reading error messages from the browser

Instead of transcribing a stack trace from the browser console:

[paste screenshot of browser console]
Explain these errors and fix the root cause.

Reviewing design mockups before implementation

[paste mockup]
Implement this design as a React component. Use Tailwind CSS.
Match the spacing, colors, and typography exactly.

Accessibility review

[paste screenshot]
Review this UI for accessibility issues: color contrast, touch target
sizes, missing labels, and reading order.

Mobile debugging

[paste screenshot from device/simulator]
This layout breaks on narrow screens. The sidebar is overlapping the
main content. Fix the responsive CSS.

What Claude can and cannot see

Can see clearly:

  • Layout and spacing
  • Colors and contrast
  • Text content (reads text in images)
  • UI component structure
  • Error messages and stack traces
  • Charts and data visualizations

Limited or unreliable:

  • Exact pixel measurements (approximate)
  • Subtle color differences (similar shades)
  • Very small text or low-resolution images
  • Complex animations (static frames only)

For pixel-perfect work, describe the exact values alongside the image:

[paste screenshot]
The card should have 16px padding, 8px border-radius, and #F3F4F6
background. Fix whatever doesn't match.

Tips

  • Screenshots are often faster than describing a UI problem in words. When in doubt, paste a screenshot.
  • Pair images with file references: “[paste screenshot] Fix this in @src/components/Header.tsx” gives Claude both the visual problem and the code location.
  • For responsive issues, paste screenshots at multiple viewport widths so Claude can see what breaks where.
  • Image analysis costs tokens — one screenshot is roughly equivalent to a few hundred words of text. Use it when the visual context actually helps, not for every message.
  • If Claude misinterprets something in an image, follow up with a specific correction: “No, the issue is the gap between the two cards, not the card content.”
Used in