PromptDeck
Claude Code docs
Library / Build

Mockup to code

Recreate a design and self-check it visually.

Build Use images Common workflows ui images verification Claude Code

Official basis Provide rich content (images) plus a visual check to verify the result. docs ↗

The prompt 
[paste screenshot] Build this component in <framework>. Then take a screenshot of your result, compare it against the mockup, and list the visual differences you still need to fix.

Why it works

Pasting the mockup gives Claude the ground truth; asking it to screenshot and diff its own output gives it a check it can iterate against — the visual equivalent of running tests.

Fill in

  • Paste or drag in the design screenshot.
  • <framework> — React, Vue, plain HTML/CSS, etc.

Follow-ups

  • “Fix the spacing and font-weight differences you listed, then re-compare.”

More build prompts

API endpoint from pattern Add a route that matches your backend conventions, with tests. Build to a verifiable check Build against a concrete, runnable check. Component clone Spin up a new component that matches an existing one.
esc
API endpoint from pattern Add a route that matches your backend conventions, with tests. Reference patterns Build Build to a verifiable check Build against a concrete, runnable check. Verify your work Build Component clone Spin up a new component that matches an existing one. Reference patterns Build Feature from spec Implement one feature that fits the file's existing conventions. Give specific context Build Go above and beyond Get an ambitious first version instead of a bare minimum. Go above & beyond Build Mockup to code Recreate a design and self-check it visually. Use images Build Package a workflow as a Skill Turn a repeated workflow into a reusable Skill. Build Skills Build Plan-first scaffold Get an agreed plan before a single line is written. Plan first Build Scaffold with TDD Lock behavior with tests before writing the implementation. Verify your work Build Spec-first interview Turn a fuzzy feature idea into a written spec. Plan first Build Describe the symptom Hand Claude a well-scoped bug it can act on immediately. Give specific context Debug Investigate with a subagent Explore a subsystem without bloating your main context. Use subagents Debug Pipe logs to Claude Triage a log file without leaving the terminal. Headless & pipes Debug Print-debug plan Instrument a hard-to-see bug, then clean up after. Verify your work Debug Read before you claim Stop confident-but-wrong answers about unread code. Read before claiming Debug Regression bisect Pin a regression to the exact change that introduced it. Point to sources Debug Reproduce then fix Turn a bug into a permanent regression test. Verify your work Debug Root-cause first Understand a bug before touching any code. Fix root causes Debug Screenshot diagnosis Diagnose a visual or UI bug straight from an image. Use images Debug Stack-trace triage Get a fast, precise read on where a crash originates. Give specific context Debug Extract & dedupe Remove duplication without altering behavior. Verify your work Refactor Fan out a migration Plan a repetitive change across many files. Fan out Refactor Find deprecated usage first Map the blast radius before starting a migration. Plan first Refactor General solution, not test-gaming Prevent solutions that only satisfy the test cases. Solve the general case Refactor No over-engineering Keep a refactor tight and scoped to what was asked. Small, scoped changes Refactor Rename safely Rename a symbol everywhere without collateral edits. Small, scoped changes Refactor Simplify function Make a gnarly function readable without changing what it does. Small, scoped changes Refactor Split a large file Break up a sprawling file into focused modules. Plan first Refactor Type-tighten Firm up weak types and surface hidden bugs. Verify your work Refactor Understand git history first Learn the context behind code before you change it. Point to sources Refactor Diff review A focused correctness pass on the change you just made. Adversarial review Review Edge-case hunt Find the tests you forgot to write. Find edge cases Review Explain-back Understand unfamiliar code and catch surprises in it. Ask like a senior Review Fresh-context adversarial review An unbiased review that won't rubber-stamp your own code. Adversarial review Review Performance sniff Catch scaling problems before they hit production. Ask like a senior Review PR-ready check Self-review a PR the way a demanding reviewer would. Adversarial review Review Review against the plan Verify the change actually matches the agreed plan. Review vs plan Review Security pass A targeted security review of sensitive code. Adversarial review Review Structured review rubric Get a review you can parse by concern. Structure with XML Review Writer / Reviewer split Get reviewer eyes that aren't biased toward the author. Adversarial review Review
↑↓ navigate ↵ open esc close