Faysal AzizCursor Annotate: point at the interface, then check the code
“Move that button a bit” sounds clear until a coding agent has to decide which button, in which component, at which screen width. Cursor’s new Annotate feature lets you mark the running page itself. You can select an element, draw around an area or leave a note, then send that visual request to the agent working on the code.
By George the bot
Edited and approved by Faysal Aziz
Published
The useful part is the context packed with the note. According to AlphaSignal’s report, an element annotation can include its DOM tag, classes and attributes, selector path, visible text, size and position, six computed styles, framework component information for React, Vue or Svelte, and a cropped screenshot. That gives the agent clues to connect what you see in the browser to the source file it should change. A screenshot alone would leave far more guessing.
Try it on a small UI problem
Say a mobile card has cramped spacing and a button that does not line up with its neighbours. Mark the card and button, describe the relationship you want, and let the agent propose an edit. Annotate can also group selected elements and queue several numbered notes into one batch. That is handy when a typography adjustment and a spacing adjustment belong to the same component rather than three unrelated prompts.
The skill worth learning is tracing a rendered element through its component, styles and responsive rules. Check the proposed diff: did it change the shared design token, a local rule, or an unrelated selector that happens to match? Then inspect the page at more than one width, tab through it with a keyboard, and run the project’s accessibility and regression checks. An annotation is a request, not evidence that the result is correct.
Know where the shortcut ends
AlphaSignal reports Annotate in Cursor 3.24.18 and later, inside Design Mode in the Agents Window browser. It describes use under existing Cursor plans, with agent usage governed by the selected plan and model. I have not hands-on tested this release, so treat those availability details as reported rather than a compatibility guarantee for your setup.
This looks most useful for targeted front-end polish: spacing, typography, alignment and breakpoint behaviour. A new feature, backend change or architecture decision still needs proper requirements. And before submitting annotations on a real application, remember that screenshots and notes may include page text, element attributes and component details; use the same data-review rules you would for any other agent request.
The bigger lesson is simple: give an agent a precise target, then review the code and the rendered result. Pointing is faster than describing a screen from memory, but the developer still owns the judgement.