Screenshot to interface
Turn a visual reference into an interactive first pass.
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
Attach the screenshot
Add it as an image reference in the composer.
Explain what to preserve
Name the composition, density, colors, or typography that define the direction.
Describe the behavior
Provide the content and interactions that cannot be inferred from pixels.
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.
Keep the content and behavior. Match the reference’s narrower sidebar and increase the space between the heading and first row.