Claude Code can look at an image and write code from it. A mockup becomes a component. A screenshot of a competitor’s pricing page becomes your pricing page. A photo of a whiteboard becomes a schema. I build most UI this way now, and the workflow is worth getting right: the difference between a lazy screenshot prompt and a good one is about three rounds of rework.

Why screenshots beat describing UI in words

Try describing a layout precisely in prose. “A card with the image on the left, title top right, and the button aligned to the bottom edge of the image, except on mobile where…” You’ll write a paragraph and Claude will still guess the spacing wrong.

A screenshot carries all of it at once: hierarchy, spacing, alignment, color, font weight, what’s grouped with what. The model reads that faster and more accurately than your prose. Words are for what the image can’t show, like behavior and constraints.

The basic workflow

  1. Get the screenshot into Claude Code. Ctrl+V paste if your terminal supports it, a file path if it doesn’t. Terminal support is genuinely messy, so if paste does nothing, here’s every method that works.
  2. Tell it what to build and in what stack.
  3. Run it, screenshot the result, and feed that back.

Step three is the part people skip. The first output is usually 80% right. Screenshot your rendered version next to the target and say “mine is on the left, target is on the right, fix the differences.” Claude compares them and closes the gap. Two or three rounds of this beats any amount of up-front prompt engineering.

Prompts that work

Bad: paste a full-page screenshot, say “build this.”

You’ll get a thousand lines of guessed markup with made-up copy and something that resembles your image the way a police sketch resembles a face.

Better, and what I do:

Here's a screenshot of a pricing card: /home/zach/.screenshots/pricing.png

Build it as a React component with Tailwind. Constraints:
- Use the colors from our theme in tailwind.config.js, not the colors in the image
- The "Buy" button should use our existing <Button> component
- Just the card, not the whole section

The rules that matter:

One component per screenshot. Crop tight. A cropped image of one card gets you a faithful card. A full page gets you approximations of everything and a faithful nothing.

Name the stack. “React with Tailwind” and “Vue with vanilla CSS” produce completely different code from the same image. Claude Code will scan your project for context, but saying it removes the guess.

Say what NOT to copy. The image’s colors, fonts, and copy text are usually placeholders from someone else’s design. Tell it to map to your theme, or you’ll be hand-replacing hex values for an hour.

Annotate when precision matters. A red arrow drawn on the screenshot with “this gap should be 8px” outperforms any sentence describing where the gap is.

> Sounds interesting?

Invoke is $49 once. Free 7-day trial, all features, no credit card.

Try it free →

It works in reverse: screenshot the bug

The same loop is my main debugging tool for visual bugs. CSS is miserable to describe in words. “The dropdown is clipped behind the modal overlay somehow” is a guess. A screenshot is evidence.

Snip the broken state, attach it, and say what should be true: “the dropdown should render above the overlay.” Claude Code sees the z-index disaster in context and goes hunting in the right file. I fix layout bugs faster this way than by reading my own CSS.

Making the loop fast

The whole thing lives or dies on how fast you can get pixels into the prompt. If every screenshot costs you a save-and-type-the-path detour, you’ll stop bothering, and the iteration loop is where the quality comes from.

My loop, using Invoke:

  1. Win+Shift+S, snip the mockup or the bug
  2. Middle click, Invoke saves it and pastes the file path into Claude Code
  3. Hold the dictation key and talk: “build this as a React component, use our theme colors, just the card”
  4. Release. The transcribed prompt lands next to the image path. Enter.

Snip, click, speak. The entire screenshot-to-code round trip takes maybe ten seconds, which is fast enough that iterating three times feels like nothing instead of feeling like a chore.

Limits worth knowing

Images cap at 5 MB and very large ones get downscaled before the model reads them, so small text in a full-desktop 4K capture can turn to mush. Crop first. And Claude reads the image at prompt time; it can’t watch you interact with a live page, so animation and hover states still need words.

Try the fast loop

Invoke handles the tedious half of this workflow: local GPU dictation, push-to-talk, auto-paste, and the screenshot-to-path hotkey. $49 once, free 7-day trial, no credit card. Download here.