← 2.62.8 →
944 words Slides

2.7 Working with Images

Course: Claude Code - Essentials Section: Core Workflows Video Length: 2-5 minutes Presenter: Daniel Treasure

Opening Hook

Sometimes a picture is worth a thousand words. A screenshot of a bug, a mockup of a design, or a diagram of your system architecture—Claude Code can understand and work with images. In this video, we'll show how to use screenshots, mockups, and diagrams to guide development.

Key Talking Points

  1. Sharing Screenshots of Bugs
  2. Paste a screenshot of an error message, UI glitch, or unexpected behavior
  3. Claude sees the visual issue and can help diagnose it
  4. Much faster than describing a UI problem in text

  5. Show on screen: Take a screenshot of something broken; share it with Claude; see Claude understand it

  6. Using Mockups to Guide Implementation

  7. Share a design mockup or wireframe
  8. Ask Claude: "Implement this UI based on this mockup"
  9. Claude translates visual design into code

  10. Show: A mockup image; Claude generates the HTML or React code

  11. Interpreting Diagrams

  12. Share an architecture diagram or data flow diagram
  13. Claude can explain what it shows and suggest improvements
  14. Or ask Claude to generate code based on the diagram

  15. Show: A simple diagram; Claude interprets it

  16. Attaching Images to Prompts

  17. Drag and drop images into Claude Code
  18. Reference them in your prompt: "Fix this bug from the screenshot"
  19. Images become part of the session context

  20. Show: Demonstrate drag-and-drop; ask a question about the image

  21. Generating Diagrams from Code

  22. Ask: "Create a diagram showing the architecture"
  23. Claude generates ASCII or Markdown diagrams
  24. Or suggests tools for creating diagrams
  25. Show: Claude generates a simple ASCII diagram explaining the project structure

Demo Plan

Demo Project: Continue with the same project from 2.1-2.6

Setup: - Have 1-2 screenshots or images prepared (or create them during the video) - A simple mockup or diagram to share (can be hand-drawn, simple, or ASCII art) - Terminal with Claude Code session ready

On-Camera Sequence (2-3 minutes):

  1. Share a Screenshot of an Issue
  2. Take a screenshot of a browser error or terminal output showing an issue
  3. Or use a prepared screenshot
  4. Ask Claude: "What's wrong in this screenshot?"
  5. Claude analyzes the visual and explains the issue

  6. ~40 seconds

  7. Use a Mockup to Guide Code Here's a mockup of a form. Can you create the HTML/React component for it?

  8. Drag-and-drop a mockup image (or simple sketch)
  9. Claude generates code matching the design
  10. Show the code generated

  11. ~40 seconds

  12. Ask Claude About a Diagram Explain the data flow in this diagram

  13. Share a simple architecture or flow diagram
  14. Claude describes what it shows
  15. Optional: ask Claude to suggest improvements

  16. ~30 seconds

  17. (Optional) Generate a Diagram Create an ASCII diagram showing how the authentication flow works

  18. Claude generates a text-based diagram
  19. Show the result
  20. ~20 seconds

Code Examples & Commands

Asking Claude about images:

What's wrong in this screenshot?
Implement this UI design from the mockup
Explain the architecture shown in this diagram
Generate code based on this mockup
What does this diagram represent?
Create a diagram showing the data flow

In prompts with images:

Fix the bug shown in this screenshot
Based on this design, create the React component
The error in this image. How do I fix it?

Sharing images: - Drag and drop into Claude Code prompt - Or reference: "Here's a screenshot: [image]" - Claude includes the image in its analysis

Gotchas & Tips

  1. File Formats Matter – PNG, JPG, SVG work well. Very large files may take longer to process.

  2. Crop to the Relevant Area – If you're sharing a screenshot, crop to just the problem area. Easier for Claude to focus.

  3. Add Context with Text – "Here's a screenshot of the error" + the screenshot is better than just the screenshot alone.

  4. Mockups Don't Need to Be Perfect – A sketch or simple wireframe is enough. Claude understands intent even from rough mockups.

  5. Describe Complex Diagrams – If a diagram is very complex, add a text description: "This diagram shows the flow of user data from login to dashboard."

  6. OCR Limitations – If your image has text, Claude usually reads it well. But very small or blurry text might not be recognized perfectly.

Lead-out

You can now share visual context with Claude to guide development. But what if you want to explore without making changes? What if you want to plan before diving in? That's where Plan Mode comes in. In our final Core Workflows video, we'll show how Plan Mode lets you think through changes before committing to them.

Reference Material

  • Common Workflows - Working with Images: https://code.claude.com/docs/en/common-workflows
  • Quickstart - Use Images: https://code.claude.com/docs/en/quickstart
  • VS Code Integration (Images): https://code.claude.com/docs/en/vs-code

Relevant Articles & Posts

  • Workflow Patterns: Joe Njenga's "17 Best Claude Code Workflows" (Medium)
  • Best Practices: Lukasz Fryc's "15 Tips from Running 6 Projects" (DEV Community)
  • Official Resource: Common Workflows - Claude Code Docs (https://code.claude.com/docs/en/common-workflows)

Additional Notes

  • Emphasize: visual context speeds up communication
  • Show real, practical examples (bug screenshots, simple mockups)
  • If time, demo drag-and-drop to show how easy it is to add images
  • Note: Claude's image understanding is powerful for UI issues, diagrams, and design mockups
  • Mention that in VS Code, you can right-click and attach images easily