Working with Images & Visual Assets

Claude Code is a multimodal tool. It can see images, read PDFs, and analyze visual content just as naturally as it reads your TypeScript files. This opens up workflows that feel almost magical: paste a screenshot of a broken layout, and Claude tells you exactly which CSS property to fix. Drop in a design mockup, and Claude generates the matching component code.

This lesson covers every way to get visual content into Claude Code and the practical workflows that make image support genuinely useful in day-to-day development.

Getting Images into Claude Code

There are four ways to share visual content with Claude. Each has its sweet spot depending on your workflow.

Method 1: Paste from Clipboard (Ctrl+V)

The fastest method. Take a screenshot, then paste it directly into the Claude Code terminal:

1. Take a screenshot (Win+Shift+S, Cmd+Shift+4, or any screenshot tool)
2. Focus the Claude Code terminal
3. Press Ctrl+V (Cmd+V on Mac)
4. Type your question alongside the pasted image

This is ideal for quick questions: "Why does this button look wrong?" or "What font is this using?" The image gets sent as part of your message, and Claude analyzes it inline.

Method 2: Drag and Drop

Drag an image file directly from your file explorer into the Claude Code terminal window. The file path gets attached to your message, and Claude reads the image contents automatically.

This works well when you have mockups or design files saved locally. Drag in homepage-v3.png and say "Implement this design as a React component."

Method 3: @ Mentions

Reference image files using the @ syntax, just like you reference code files:

You: "What's wrong with this layout? @screenshots/broken-nav.png"

You: "Build this component @designs/card-mockup.png using our existing Button component from @src/components/ui/button.tsx"

This method shines when you want Claude to look at an image alongside code files. The @ mention tells Claude to read the file before responding, giving it full context of both the visual and the code.

Method 4: Direct File Paths in Conversation

You can also simply ask Claude to read an image file by describing its path:

You: "Read the file at screenshots/error-state.png and tell me what's happening"

Claude's Read tool supports PNG, JPG, GIF, WebP, and other common image formats. It processes them as multimodal input, meaning Claude genuinely sees the image rather than reading metadata about it.

Screenshot Analysis for Debugging

This is probably the most immediately useful image workflow. When you hit a visual bug, a screenshot is worth a thousand words of description.

You: [paste screenshot] "The navbar items are overlapping on mobile.
They should stack vertically below 768px. Here's my nav component:
@src/components/layout/navbar.tsx"

Common visual bugs Claude excels at diagnosing:

• Overlapping or misaligned elements
• Incorrect spacing or padding
• Wrong colors or missing dark mode styles
• Broken responsive layouts
• Text overflow and truncation issues
• Z-index stacking problems

Building UI from Design Mockups

One of the most powerful workflows: give Claude a visual design, and ask it to write the code.

You: [paste mockup image] "Implement this pricing card as a React component
using Tailwind CSS. Match the spacing, typography, and colors as closely
as possible. Use our existing design tokens from @src/app/globals.css"

Claude will analyze the mockup and generate a component that matches the visual design, including layout structure, typography hierarchy, colors, spacing, and interactive states.

Tips for better mockup-to-code results:

• Provide your design system context. Reference your CSS variables, existing components, or Tailwind config so Claude uses your actual tokens instead of hardcoded values.
• Specify the tech stack. "React with Tailwind" produces different code than "Vue with vanilla CSS." Be explicit about what you need.
• Break complex pages into sections. Instead of pasting an entire page design, break it into header, hero, features, and footer. Claude handles focused sections more accurately.
• Include both states. If you have mockups for default and hover states, share both. Claude will implement the transitions.

Working with Diagrams and Architecture Images

Visual assets are not limited to UI. Claude can analyze and reason about:

• Architecture diagrams -- Paste a system architecture diagram and ask Claude to scaffold the project structure, set up API routes, or create Docker Compose files that match the diagram.
• Entity-relationship diagrams -- Share a database ERD and ask Claude to generate Prisma schemas, SQL migrations, or TypeScript interfaces.
• Wireframes -- Low-fidelity wireframes work just as well as high-fidelity mockups. Claude interprets the layout intent and generates appropriate code.
• Flowcharts -- Share a user flow diagram and Claude can generate route structures, state machines, or step-by-step form wizards.

You: [paste ERD image] "Generate a Prisma schema that matches this
entity-relationship diagram. Include all the relationships shown."

Reading PDF Documents

Claude Code can read PDF files directly, which is useful for working with design specifications, API documentation, or technical requirements that come as PDFs.

You: "Read @docs/api-specification.pdf and generate TypeScript interfaces
for all the endpoints described in sections 3 and 4"

For large PDFs, specify page ranges to focus Claude's attention:

You: "Read pages 12-18 of @docs/design-system.pdf and list all the
color tokens defined there"

Understanding the Limitations

Claude's visual capabilities are powerful but bounded. Knowing the limits helps you set the right expectations.

What Claude can do:

• Analyze screenshots, mockups, diagrams, photos, and PDFs
• Describe visual content in detail
• Generate code that matches visual designs
• Identify visual bugs and suggest fixes
• Read text embedded in images (OCR-like capability)
• Interpret charts, graphs, and data visualizations

What Claude cannot do:

• Generate, create, or edit images (no image output)
• Modify screenshots or visual files in place
• Perfectly match every pixel of a complex design in one pass
• Read extremely small or blurry text reliably
• Process video files or animated content (individual frames/stills are fine)

You: [paste screenshot] "This component looks broken. The cards should
be in a 3-column grid but they're stacking vertically. Here's the
component: @src/components/sections/features.tsx. What's wrong and
how do I fix it?"