Pro tip: the screenshot trick

This is the single most useful debugging technique you'll learn as a vibe coder. Bookmark this mentally.

The problem

Sometimes your website doesn't look right, and you struggle to describe what's wrong. The nav is overlapping the content. The mobile layout is broken. A button is in the wrong place. These things are hard to explain in words but immediately obvious in a picture.

The solution

Take a screenshot of your webpage showing the problem
- Mac: ⌘ + Shift + 4 → drag to select the area → screenshot saved to Desktop
- Windows: Windows + Shift + S → drag to select → click the notification to save
Go to Claude Code and paste the screenshot directly into the chat (⌘V or Ctrl+V)
Describe what you see and what you want:

"Here's a screenshot of my website on mobile. The header text is overlapping the navigation menu. Can you fix the CSS so there's proper spacing?"

Claude will look at the screenshot, identify the problem, and fix it. It can see images — you don't have to describe everything perfectly.

What else you can use it for

"Here's what the page looks like — can you redesign the hero section to feel more modern?"
"Something looks off in this screenshot — what's wrong with the layout?"
"Here's a website I like [screenshot] — can you make mine look more like this?"

That last one is particularly powerful. Screenshot something you admire and ask Claude to build you something similar.

On mobile too

Take a screenshot of your page on your actual phone (or in Chrome's mobile preview mode) and paste that in. Mobile issues are the most common visual bugs, and the screenshot trick solves them faster than any other method.

This technique alone is worth the price of admission. Use it every time you build.