Advanced Communication and Planning

When working with Claude Code in your development environment, you’ll often need to make changes to existing projects. This lesson covers practical techniques for implementing changes effectively. This includes clear visual communication with screenshots and leveraging Claude’s advanced reasoning capabilities to ensure your instructions are understood and executed correctly.

How do we use screenshots in Claude Code?

Communicating visually with Claude can dramatically improve clarity when describing UI changes, layout tweaks, or error states. One of the most effective ways to point Claude to a specific part of your interface is by providing a screenshot. Instead of relying on lengthy text descriptions, a screenshot lets Claude see exactly what you’re referring to, which reduces ambiguity.

You can paste a screenshot directly into the Claude chat. Use “Ctrl+V” (even on macOS) or drag it to the interface to insert the image. Once the screenshot is attached to your conversation, you can ask Claude to analyze it or make changes related to that visual. For example: “See the highlighted button in the screenshot? Please adjust its color and alignment according to our design.”

Screenshots provide Claude with a concrete reference. Claude can interpret UI elements or design mockups from images and then modify your code to match the visual reference. For instance, you could paste a design mockup image and ask Claude to update the front-end code until the application output matches the mockup. This represents an iterative process where Claude generates code, you review the result (possibly with another screenshot), and refine further. This visual feedback loop helps ensure the changes Claude makes align with the intended design.

Let’s take a look at a small example. We have a tiny demo chat app running where the “Reset Chat” button is neutral/unstyled. Moreover, the application isn’t really a proper AI chatbot; it just returns some placeholder messages we have added beforehand.

We can take a screenshot showing the gray button in context and paste it with “Ctrl+V,” or drag it into your Claude Code chat. Give a concrete request tied to the screenshot, for example: “Change the color of the buttons shown in the screenshot.”

Note: Due to platform limitations that restrict copy-pasting files, we cannot run a live demo here. The following slides illustrate the approach.

When we paste the image into Claude Code, we see a ...