Images and screenshots
Use a visual reference to make the direction easier to see.
Choose a clear reference
Attach an image or screenshot with the composer’s image-reference control. Crop out unrelated browser chrome while retaining enough context to understand the interface.
Say whether you want a faithful recreation or an adaptation. Name what should stay: layout, proportions, typography, content, or a specific detail.
Explain what the image cannot show
A screenshot captures one moment. Describe the menus, selected states, scrolling, and validation that should work in the result.
With multiple images, explain each one’s role. One can define the layout while another supplies a visual detail.
Recreate this layout using my project names. Keep the spacing and column proportions. Make the filters work and include an empty state when a filter has no results.
Compare the live result
Check overall size, alignment, density, and hierarchy before smaller details. Inspect the interface at its intended screen size.
An image’s physical pixel dimensions may differ from the logical size of the interface it shows. Describe the intended width if scale matters.
Keep attachments relevant
Remove references that no longer apply. For a precise change to an existing result, select an element or snip the target area rather than attaching the whole image again.