how to

how to give precise ui feedback without screenshots

the short answer

to give precise ui feedback without screenshots, comment directly on the live element in the browser using a tool that captures the element's selector and url. that way the feedback points at the real thing instead of a frozen image that goes out of date.

the screenshot workflow feels productive and quietly isn't. you grab a screen, draw a red box, paste it into a doc, write a paragraph explaining which box you mean, and by the time someone reads it the page has already changed. there's a better way: comment on the element itself.

why screenshots fail for web ui

they freeze a moment — the live page keeps moving without them. they lose interactivity — no hover states, no scroll, no responsive view. they need a paragraph of explanation to say what the box means. and they pile up in docs nobody reopens.

the core problem is that a screenshot separates the feedback from the thing it's about. the moment those two are apart, someone has to reconnect them — and that's where time leaks out.

the alternative: comment on the element

with spotlight, you open any web page in chrome, click the element you want to talk about, and type your note. spotlight captures the element's css/xpath selector and the page url so the comment is anchored to the real thing — not a picture of it. your teammate clicks the comment and lands exactly where you were standing.

if your feedback needs a sentence explaining “the one in the top right, below the logo,” you're describing a location you could have just clicked.

how to do it in practice

install the chrome extension and open the page you're reviewing. click the exact element — a button, a heading, a misaligned card. write what's wrong and what you'd expect instead. the selector and url are captured automatically; no screenshot needed, and your note shows up in the team dashboard for whoever picks it up.

because the comment is tied to a selector rather than a pixel region, it survives small layout edits. a teammate can fix the issue, and the next reviewer still sees the thread attached to the right element.

the habit to build is simple: when you notice something, click it and say what's wrong. no cropping, no arrows, no “see attached.” just precise feedback on the precise element, every time.

how it works

  1. 01

    install the extension

    add spotlight to chrome and open the page you're reviewing.

  2. 02

    click the element

    click the exact element — a button, a heading, a misaligned card.

  3. 03

    write the note

    say what's wrong and what you'd expect; the selector and url are captured automatically.

  4. 04

    hand it off

    your note lands in the shared team dashboard for whoever picks it up.

frequently asked

do i still need screenshots for anything?

occasionally, for one-off bugs on pages you can't load live, or to capture a transient state. but for reviewing live web ui, commenting on the element is faster and stays current.

what gets captured when i comment on an element?

spotlight records the element's css/xpath selector, the page url, and your comment. that's enough for anyone on your team to click through and see exactly what you saw.

what if the element moves after i comment?

because the comment is anchored to a selector rather than a fixed screen position, it stays attached to the element through minor layout changes far better than a screenshot would.

Last updated January 28, 2026

ready to try spotlight?

open spotlight