Screenshot to Spec

Turn a UI screenshot into a spec an engineer can build from.

Screenshot: {{screenshot}} Target: {{target}}

Procedure

1. Read the screen with image.describe. Ask for structure, not impressions: layout regions, component boundaries, every string of visible copy, and the visual hierarchy.

2. Inventory the components. For each one: name, purpose, and where it sits in the layout. Use the names the target codebase would use if you know them.

3. Enumerate the states you cannot see. This is the part that makes it a spec rather than a description — a screenshot only ever shows one state. For every interactive element, cover: default, hover, focus, active, disabled, loading, empty, and error. Say explicitly where you are inferring rather than observing.

4. Transcribe the copy verbatim. Every visible string, in reading order. Do not paraphrase and do not fix typos silently — flag them separately.

5. Record the measurable. Spacing rhythm, apparent type scale, corner radii, and the palette as approximate hex. Say these are estimates from a raster image.

6. Note responsive intent — what should reflow, stack, or drop below a narrow breakpoint.

7. Check memory.save for existing design conventions on this project, and save the ones you establish, if the tool is available.

8. Publish with artifact.deploy if available. Return the URL.

Output

The component inventory and state table inline, then the link.

Notes

• Distinguish observed from inferred throughout. An engineer building from a spec that silently guesses is worse off than one told to ask.
• If the screenshot is low resolution, say which details you could not resolve.