Implement from a screenshot and self-check

Give Claude Code a design image; it builds the UI, screenshots the result, compares the two and fixes differences for a set number of rounds.

Task: Implement from a screenshot and self-check · Other tasks

Fill in the details

Where the design goes (required)

A page, component or file. Attach the design image in Claude Code itself; this page cannot hold images.

Address to screenshot

Optional. Where the running page can be opened.

Details the image does not show

Optional. Responsive behavior, hover states or content that changes.

Compare-and-fix rounds

Test or build command

Optional. Leave empty and Claude will look for how the project builds and tests.

Copy your prompt

This site doesn't run Claude or show model output. Results depend on your input and the model you use.

Your prompt (you can edit it)

Implement this design: the image attached to this message. Then take a screenshot of the result, compare it to the original, and fix any differences.

Where it goes: [fill in: Where the design goes]

1. Before coding, list what you see: layout, spacing, colors, type sizes, components and text. If no image is attached, stop and tell me. Also list details you cannot read and behavior the image does not specify, such as breakpoints, hover and focus states, and interactions. Ask me about the ones that change layout or behavior, and leave those parts until I answer.
2. Implement it with the project's existing components and styles. Do not add new dependencies.
3. Render the page and take a screenshot. If you have no way to take one, stop after step 2 and say so; do not judge the match from the code alone.
4. List each difference between the screenshot and the design, fix them, then screenshot and compare again. Stop after three rounds, or sooner when no differences remain.

Keep the build and existing tests passing. Do not commit.

Finish with the files you changed, the final screenshot, any differences that remain and why, and any minor details you assumed without asking.

1 required field is empty.

What you type is kept in this tab's session storage so a reload doesn't lose it. Use "Clear this task" to remove it. Browsers can restore session data when they reopen tabs, so closing a tab isn't a guaranteed way to erase it.

When to use this template

You have a design image for a page or component and want it built in the real codebase, with Claude checking its own result instead of you pointing out each gap. Paste, drag or give the path of the image in Claude Code before sending.
Claude can render and screenshot the page: the Desktop app has a built-in preview, and in the terminal you can install the Claude in Chrome extension or add a Playwright MCP server.
The design is settled and the remaining work is matching it closely: spacing, sizes, colors and alignment.

When not to use it

Claude has no way to take a screenshot in your setup. Set up the Desktop preview, the Chrome extension or a Playwright MCP server first; otherwise the compare step cannot run.
You only need a rough clickable version to discuss a flow. The mockup-to-prototype template is quicker and keeps the work out of the real app.
The design is still changing. Matching pixels on a screen that will be redrawn next week is wasted effort; settle the design first.

Why this structure

The screenshot-and-compare loop gives Claude a check it can run. Without it, Claude stops when the code looks right; with it, Claude sees the rendered page next to the design and can fix what differs.
Step 1 lists what Claude reads from the image before coding, so a misread color, font size or missing element shows up before it is built. It also asks Claude to name unreadable details and unspecified behavior, such as breakpoints or hover states, and to wait for your answer on the ones that change layout or behavior instead of inventing them.
Step 3 tells Claude to stop and say so when it cannot take a screenshot. A match claimed from reading the code would look like evidence without being any.
The rounds setting bounds the loop. Claude stops after a fixed number of compare-and-fix passes, or earlier when nothing differs, instead of polishing indefinitely.
The notes field covers what one static image cannot show, such as responsive behavior or hover states, so Claude does not have to guess them.
The final report asks for the screenshot and the remaining differences, so you review evidence rather than a claim that it matches.

Example input (fictional)

Where the design goes

the pricing page, in src/pages/Pricing.tsx

Address to screenshot

http://localhost:3000/pricing

Details the image does not show

Cards stack in one column below 640px. The highlighted plan is the middle one.

Compare-and-fix rounds

three

Test or build command

npm run build && npm test

Follow-ups to send Claude

Take screenshots at 375px and 1280px wide and compare both against the design. Fix anything that breaks at either width.
List every color and spacing value you hardcoded that should come from the project's design tokens instead, and replace them.
Save the final screenshot next to the design image so I can compare them side by side in the pull request.

Common mistakes

Forgetting to attach the image in Claude Code. The prompt refers to it, and Claude cannot see a design you have only described.
Skipping the browser setup and accepting "it should match". Without a screenshot there was no comparison, whatever the report says.
Giving a low-resolution or cropped image. Claude can only match what it can read; export the design at a normal size with the whole screen in view.

Turn a mockup into a working prototype: Attach a mockup image in Claude Code and get a clickable prototype that follows its layout and states, built in its own folder with fake data.
Fix a precise visual bug: Describe the element, the measurement and the viewport, and Claude Code finds the cause of a layout bug, fixes it and checks other widths.
Map edge cases before building: Ask Claude Code to list the error states, empty states and edge cases a feature must handle, so the design covers them before anyone builds it.

See all templates

Sources

Claude Code docs: Prompt library (Anthropic documentation)
Claude Code best practices: Give Claude a way to verify its work (Anthropic documentation)
Claude Code docs: Use Claude Code with Chrome (Anthropic documentation)
Claude Code Desktop: Preview your app (Anthropic documentation)