Show, don't tell: screenshots as cheat codes

Your mission

Make your quiz page look like a design you love by showing Claude a screenshot, then fix a layout bug by showing Claude what it actually looks like on your screen.

Why it’s worth it

Describing a look in words is hard. “Kind of glassy, rounded, with a glow, but not too much glow” could mean a thousand things. A screenshot means exactly one thing. It’s the closest thing to a cheat code for design: show Claude what you want, and skip ten rounds of describing.

There’s a second reason, and it’s sneakier. Claude writes your page’s code, but it doesn’t see the page in your browser. It’s like a game developer who never gets to play their game. When something looks off, a screenshot is how you let Claude actually see the problem.

Three ways to give Claude an image

1. Paste it. Take a screenshot, then paste it into the Claude Code prompt: Ctrl+V on macOS and Linux (Cmd+V in iTerm2), Alt+V on Windows. A placeholder like [Image #1] appears in your prompt.
2. Drag and drop an image file into the terminal window.
3. Point at a file with @, like @inspo.png, if the image is already in your project folder.

To take a screenshot of part of your screen: Win+Shift+S on Windows, or Cmd+Ctrl+Shift+4 on a Mac (that copies it straight to your clipboard, ready to paste).

Build it

Start Claude in your speedrun-lab folder.

1. Find some inspiration. Pick an app, game menu or website whose look you like. Screenshot just the part you like, such as a card, a menu or a button style.

2. Copy the vibe. Paste the screenshot and tell Claude which parts matter:

[paste your screenshot here]
Restyle quiz.html to match the look in this image: copy the colours, the
rounded cards and the button style. Keep my questions and my layout. Don't
copy any text or logos from the image.

What you’ll see: Claude describes what it notices in the image (colours, shapes, spacing) and restyles your page. Open quiz.html in your browser. It won’t be pixel-perfect, but it should clearly have the same vibe.

3. Show Claude the real result. Now screenshot your page in the browser, and paste that:

[paste a screenshot of your quiz page]
This is how it actually looks right now. Compare it with the first image
and fix the three biggest differences.

What you’ll see: Claude names specific differences (“the buttons are square, the inspiration’s are rounded”, “the heading is much bigger”) and fixes them. Refresh and compare again. Two or three rounds usually gets you really close.

4. Hunt a layout bug. Make your browser window narrow, like a phone screen. Screenshot anything that looks broken, such as overlapping text or buttons off the edge, and paste it:

[paste screenshot]
On a narrow screen this is what happens. Fix it so it looks good on phones.

What you’ll see: Claude spots the problem from the image and adjusts the layout so it fits small screens.

Clean. You just did a proper design loop: inspiration, build, compare, fix.

When Claude gets confused

• Claude can’t see your image. On Windows, paste with Alt+V. Or save the screenshot into your project folder and use @ with its file name.
• It copied too much, like the other app’s text or logo. Claude sometimes takes “make it like this” too literally. Be explicit about what to keep from your page: “Keep all my text, only copy the style.”
• It says it fixed something, but your screenshot still shows the problem. It can’t see your browser, so it may genuinely think it’s fixed. Refresh first; if it’s still broken, paste a fresh screenshot and say “still happening”.

Did it work?

• You gave Claude an image by pasting, dragging, or with @
• Your quiz page picked up the style of your inspiration screenshot
• You pasted a screenshot of your own page and Claude fixed what it saw
• The page looks good in a narrow, phone-sized window