A screenshot helps, but it rarely tells the whole story. A useful visual report identifies the page state, the element, and the difference between what you see and what should happen.
Reproduce one specific state
Open the running page in Canopy Preview. Note the URL, viewport, data or account state, and interaction that exposed the problem. A button that looks too wide after validation fails is a different issue from a button that is too wide on first load. Capture the state the agent needs to see, not just the top of the page.
Point to the element and name the difference
Canopy Preview can annotate a page element and capture viewport, full-page, or region screenshots. Use the smallest image that preserves enough context to locate the element. Say 'the Save button overlaps the error message at 390px width' or 'this card is 16px taller than its siblings after the title wraps.' Avoid 'make it prettier' unless you are inviting a design exploration rather than asking for a fix.
Send behavior with the picture
Tell the agent what happened before the screenshot, what should change, and how you will verify the correction. For an interaction, include whether click, keyboard focus, loading, error, and success states matter. If the network request fails, include the relevant status or console message; a visual symptom can originate in an API or runtime issue.
Batch only independent observations
A list of ten small issues can be useful for triage, but ask the agent to group them by page or component and identify dependencies before editing. If the first change rearranges the whole layout, old coordinates and screenshots may be stale. Review the changed page after each meaningful batch and capture fresh evidence for what remains.
Inspect the new page and diff
Run the page at the original viewport and a nearby width. Check that the fix did not break keyboard use or another state. Read the changed files in Canopy's diff view and ask for test evidence if the agent claims a broader improvement. A corrected screenshot is evidence of one state, not proof every layout is fixed.
Copyable resources
Copyable visual bug report
Attach the smallest useful screenshot or element annotation.
Page and URL: [local URL or route]
Viewport: [width x height; device if relevant]
State and steps: [account/data state, then actions]
Element: [label, role, or visible text]
Actual: [what is wrong in the screenshot]
Expected: [specific appearance or behavior]
Related evidence: [console/network status or log if relevant]
Acceptance check: [how I will verify the fix]
Please inspect the running page and relevant component before editing. After the change, show the same state and report files changed and checks run.Frequently asked questions
Should I send a full-page screenshot for every issue?
Use the smallest capture that shows the problem and enough surrounding context to locate it. Include a full-page view when the issue depends on overall layout.
Can an agent fix ten UI issues from one screenshot?
It may be able to, but layout changes can make later observations stale. Group issues by component, review after each meaningful batch, and recapture remaining problems.