UI testing — export visual bugs to developers with full context

The problem

Most UI bug reports are screenshot + prose: "the button is misaligned on mobile." Engineering opens the page, can't reproduce, asks for repro steps, gets a Loom, still can't tell which spacing value is wrong. Cycle time is days, not minutes.

The workflow

1. Step 1

   Walk the build under test

   QA opens the staging URL in Chrome and pins the Design Mode side panel. As bugs surface, click the affected element.

2. Step 2

   Annotate with structured edits

   Drop a comment pin with a description ("misaligned with header"). If you know the fix, make it — change the spacing, the colour, the type size — and let Design Mode log the exact selector + property + before/after value.

3. Step 3

   Capture before / after screenshots

   The screenshot tool grabs the visible tab; pair with the structured diff so reviewers can see both the artefact and the spec.

4. Step 4

   Export and hand off

   Use Export → Markdown to paste into Linear, GitHub, or Jira. Developers see selector, property, old value, new value, and the screenshot context in one ticket.

The outcome

Developers stop asking "what did you mean?" The bug ticket has the exact change to make. Cycle time drops from days to a single PR review.