Cursor has added Annotate to its Design Mode, letting developers direct coding agents by pointing at a running application instead of describing the change in words. Developers open the browser inside Cursor’s Agents Window, click Annotate, and leave notes directly on the interface: click an element, drag around an area, draw an arrow, edit text in place, or tweak CSS, then send the note to the agent. The agent receives the note with the context it needs and edits the code while the developer moves on, turning visual feedback into source edits without leaving the app.
How Annotate Works
Each note starts with something picked on the page. Clicking an element selects it and opens a note for typing the change, with arrow keys moving the highlight to parent or child. Holding Shift while clicking adds more elements to the same note, which helps when a change depends on a relationship between components, such as making one match another’s padding. Dragging boxes in an area instead, with markup tools for drawing, ellipses, rectangles and arrows.
Text can be edited right on the page: double-clicking a text element lets the developer rewrite it in place, pressing Return saves the edit and Escape reverts it, though text edits always wait for Send. On a note for a single element, an Edit CSS properties control opens a CSS inspector, so a developer can filter the property list, change a value, and have Cursor send that edit with the note. Voice is included too: once a note has text or CSS edits, a Dictate button allows the change to be spoken instead of typed.
What The Agent Actually Receives
The value of Annotate is in the context bundled with each note, not just the note itself. For every picked element, the agent gets the tag, id, classes, attributes, a CSS-style selector path, the first 200 characters of visible text, and the element’s size and position, plus six computed styles: colour, background colour, font size, font family, display and position. In React, Vue and Svelte apps, the details also include the component name and component stack, so the agent can find the source. A screenshot completes the package, cropped to the element or to the marked-up area when the note is saved.
That combination is designed to remove the ambiguity of text-only prompts. Describing a button as “the one near the top, slightly misaligned” forces the agent to guess; pointing at the element hands it the exact selector, styles and picture. Cursor recommends its in-house Composer 2.5 model for this workflow, arguing that a model strong at interface work keeps the edit-and-refresh cycle close to the development server’s hot-reload loop.
Batching Notes And Staying In Flow
A Batch edits switch controls how notes reach the agent. With batching off, pressing Return sends a note right away. With batching on, notes collect as numbered pins, and one Send button dispatches them all as a single message. If the developer exits with notes pending, Send stays in the toolbar until they are sent or cleared.
The flow is built for the way interface work actually happens: one edit leads to the next. A developer adjusts a component, notices the spacing around it, then sees how another component should match, and Design Mode lets those edits be sent as they are noticed. When the development server supports hot reload, completed edits appear in the browser preview as the source changes. Annotate requires Cursor 3.24.18 or later, and it is included with existing plans.
Where It Fits, And Where It Does Not
Annotate fits targeted front-end changes best: spacing, typography, colour tokens, responsive breakpoints, button shapes and alignment between components, where a screenshot plus element metadata gives the agent enough context for a focused edit. New components, backend logic and architectural changes still need broader requirements and planning, and Cursor’s regular chat and Plan Mode remain the more suitable workflows there. Developers should still review generated diffs, test responsive states, and run their usual accessibility and regression checks before merging, a discipline that applies across every category of AI coding tool.
The feature also sharpens a broader contest over where AI coding assistance should live. The three dominant approaches, an agent in the terminal, an editor rebuilt around AI, and an assistant inside an existing editor, were compared in our comparison of Claude Code, Cursor and Copilot, and Annotate strengthens Cursor’s central bet: keeping the developer in the editor, pointing at what they mean, beats describing it from somewhere else.
Why It Matters
This matters because the hardest part of AI-assisted front-end work has never been generating code, but communicating intent precisely enough for the code to be right. Annotate attacks that problem at its root, replacing paragraphs of description with a click, a circle and a screenshot, plus the exact element data the agent needs. If the workflow holds up in daily use, it could make visual polish something developers fix continuously, in the moment they notice it, rather than in a separate round of tickets and screenshots.
Background
Cursor is the AI coding platform developed by Anysphere. Its Design Mode, introduced with Cursor 3.7 in June 2026, lets developers direct agents using visual context from a running application instead of text chat, and Annotate extends it with in-place notes, markup and CSS editing.
Source: Cursor documentation, AlphaSignal report
0 Comments