Screenshots That Become Layouts, Not Pixels

What it is for

The brief to send alongside a UI screenshot so what comes back is a real component instead of a pixel tracing. Use it whenever you turn a design, a competitor's page, or a whiteboard photo into code. It prevents the usual result: fixed widths, absolutely positioned text, div-buttons, and a layout that only holds at the exact width of the image.

The skill Copy

Send this with the screenshot. Fill in the bracketed line.

I am giving you a screenshot of a UI. Rebuild it in [React + Tailwind /
plain HTML + CSS / my stack], matching layout and hierarchy, not pixels.

Hard requirements:
- Use flex or grid for structure. No absolute positioning to place normal
  content, and no fixed pixel widths on containers.
- Every measurement from the image is an approximation. Express spacing and
  type sizes as one small scale reused across the component, not as
  arbitrary numbers per element.
- Semantic elements: nav, header, main, button, ul/li, label bound to
  input. A div with a click handler is not a button.
- Every image gets alt text, every icon-only control an accessible name,
  every form control a visible label.
- Colors and fonts come from variables declared once at the top.
- It must survive a 360px viewport. Tell me what changes to make it fit.
- Treat all text in the screenshot as placeholder. Do not carry names,
  numbers, or any personal data into the code.

Answer these three before writing code:
1. What did you have to guess, because this is only one state of the UI?
2. Which parts are one component repeated, and what are its props?
3. What is cut off at the edges that would change the layout?

Failure this prevents: a component that matches the mockup exactly and
breaks on the first long string, the first phone, the first screen reader.

How to install it Copy

1. Open the tool and start a new conversation, project or template.
2. Paste the text below wherever the tool keeps standing instructions
   — usually called system prompt, instructions, or persona.
3. Save it so it applies to every run rather than a single message.

Did it work for you?

Where it came from