# Screenshot to interface

Turn a visual reference into an interactive first pass.

Source: https://tenor.design/docs/how-tos/screenshot-to-component

## Prepare the reference

Crop to the interface you want to recreate. Remove unrelated browser chrome while retaining enough context to understand proportions and spacing.

## Build the first pass

### 1. Attach the screenshot

Add it as an image reference in the composer.

### 2. Explain what to preserve

Name the composition, density, colors, or typography that define the direction.

### 3. Describe the behavior

Provide the content and interactions that cannot be inferred from pixels.

### 4. Generate and compare

Check the whole layout before refining details.

## Correct the biggest mismatch

Select the result and ask for one correction. Address the overall layout before adjusting a small icon or color difference.

### Example prompt

> Keep the content and behavior. Match the reference’s narrower sidebar and increase the space between the heading and first row.

## Next steps

- [Images and screenshots](https://tenor.design/docs/create/from-a-visual-reference) — Use a visual reference to make the direction easier to see.
- [Point to an element](https://tenor.design/docs/refine/inspect-and-edit) — Inspect the visible interface and ask for a precise change.