Build UI From a Screenshot

Turn a design screenshot into accessible, responsive component code that matches your existing stack instead of inventing a new one.

[Attach the screenshot or design image, then use this prompt:]

Build this UI as [FRAMEWORK: React + TypeScript / Vue / Svelte / plain HTML] using [STYLING: Tailwind / CSS modules / styled-components / our design system, described below].

Our existing conventions and tokens:
"""
[PASTE A SIMILAR COMPONENT FROM OUR CODEBASE, PLUS OUR SPACING, COLOR, AND TYPE TOKENS. THIS IS THE MOST IMPORTANT INPUT.]
"""

Where it will live: [PAGE OR CONTEXT]
Data it renders: [THE SHAPE, OR THE TYPE DEFINITION]
Interactive behavior not visible in the image: [WHAT HAPPENS ON CLICK, HOVER, SUBMIT, ERROR]
Breakpoints we support: [SIZES]

Requirements:
- **Match our conventions first.** Use the tokens, class patterns, file structure, and naming from the component I pasted. A pixel-perfect component that ignores our design system is a component someone has to rewrite.
- **Semantic HTML.** Real buttons, real headings in order, real lists, real form labels tied to inputs. A div with a click handler is not a button, and this is the most common defect in generated UI.
- **Accessible by construction**: keyboard reachable and operable in a sensible order, visible focus states, accessible names on icon-only controls, correct roles only where semantics are missing, and contrast that meets WCAG AA. Say what you could not verify from an image.
- **Responsive**: describe how the layout adapts at each breakpoint and implement it. Do not assume the screenshot's width is the only one.
- **All the states.** The screenshot shows one. Implement and show loading, empty, error, and disabled, plus long-content overflow and the longest realistic string in every text slot.
- **No new dependencies** without asking, and no inline magic numbers where a token exists.

Then report:
1. **What I inferred from the image** and could be wrong about: exact spacing, font weights, hover behavior, and anything hidden behind a state you cannot see. List these as questions.
2. **What the design is missing**: states, edge cases, or accessibility problems in the design itself, such as contrast or touch target size.

Rules: build only what is in the image plus the behavior I described. Do not invent extra features. If a measurement is ambiguous, round to our spacing scale and say that you did.

How to use

Pasting a real component from your codebase is worth more than any instruction in the prompt, because models follow the pattern in an example far more reliably than a description of a convention. The states requirement is what separates usable output from a demo: a screenshot shows the happy path with short strings, and the bugs all live in the loading, empty, error, and very-long-name cases. Treat the inference questions as a review checklist rather than notes.

More coding prompts

Write the commit message for this change.

Diff:
"""
[PASTE THE STAGED DIFF]
"""

Why I made this change: [THE REASON, THE TICKET, THE BUG REPORT, or "you infer it"]
Convention: [Conventional Commits / this repo's existing style, pasted below / plain]
Recent commits from this repo, to match style:
"""
[PASTE 5-10 RECENT COMMIT SUBJECT LIN

Commit Message

Write a commit message that explains why the change was made, in Conventional Commits format, split into separate commits when needed.

Codingbeginner

Help me recover from a git mistake without making it worse.

What I was trying to do: [THE GOAL]
What I ran: [THE EXACT COMMANDS, IN ORDER]
What happened instead: [THE OUTPUT OR THE STATE NOW]
Has this been pushed or shared: [YES/NO, and to which branch and whether anyone else has pulled]
Uncommitted work I cannot lose: [WHAT AND WHERE, o

Undo a Git Mistake

Recover from a bad commit, force push, wrong branch, or lost work with a reversible plan and the exact commands, explained before you run them.

Codingintermediate

Handler code, routes, and models:
"""
[PASTE THE ROUTE DEFINITIONS, HANDLERS, REQUEST AND RESPONSE TYPES, VALIDATION SCHEMAS, AND MIDDLEWARE]
"""

Generate an OpenAPI 3.1 specification from the code above.

API name, version, and base URL: [DETAILS]
Auth scheme: [BEARER JWT / API KEY / OAUTH / SESSION COOKIE, and where it is enforced]
Con

OpenAPI Spec From Code

Generate an accurate OpenAPI 3.1 spec from handler code, including error responses and auth, with gaps flagged instead of invented.