# 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.