On Oct 27 Cursor announced Annotate for Design Mode: in the Agents Window browser you can click elements, box an area, draw markup, edit text in place or tweak CSS, and each note is sent to the agent with element details and a screenshot so it can edit the code. The post says you can also review designs at different screen sizes. It needs Cursor 3.24.18 or later, and the shortcut is Cmd+Shift+D.
Key Takeaways
- ✓Requires Cursor 3.24.18 or later; click Annotate in the Agents Window browser toolbar or press Cmd+Shift+D
- ✓Each note carries the element tag, id, classes, selector path, first 200 visible characters, size and position, six computed styles and a cropped screenshot (official docs)
- ✓React, Vue and Svelte apps also send the component name and component stack so the agent can find the source
- ✓Batch edits switch: off sends each note on Return, on collects numbered pins and sends them as one message
- ✓Cursor recommends a fast model that is strong at interface work, such as Composer 2.5

Key Decision Metrics at a Glance
Turn your technical choice into a development budget
Compare 40 dev plans & simulate token costs vs $20/mo subscriptions
Project Links & Resources
Direct AccessIn-Depth Technical Analysis
Background and pain point
When refining a UI, the hard part is often not the code but describing in words that this spacing is too big or that button should line up with its neighbor. With text-only prompts the agent has to guess which component and which style rule you mean, and it can take several rounds. On Oct 27 Cursor announced on its official X account that Design Mode now has Annotate, making pointing at the page a first-class way to prompt.
Architecture
According to the official docs, Design Mode runs in the browser inside the Agents Window on your running app. You click an element (arrow keys move to its parent or child), Shift-click to select several, drag to box an area and mark it up with draw, ellipse, rectangle and arrow tools, double-click to edit text in place, open a CSS inspector to change properties, or dictate a note by voice. Each note carries the element tag, id, classes, selector path, the first 200 characters of visible text, size and position, six computed styles and a cropped screenshot. In React, Vue and Svelte apps it also includes the component name and component stack so the agent can go straight to the source.
Benchmarks
This is an interaction feature and Cursor has not published any speed or accuracy numbers, so we do not speculate. The post says you can review designs at different screen sizes; the docs did not describe that part separately this round. The post passed 1,100 likes within about an hour.
Getting started
Update to Cursor 3.24.18 or later, open the browser in the Agents Window and click Annotate in the toolbar or press Cmd+Shift+D. Batch edits starts off, so Return sends a single note to the agent right away; turn it on to collect numbered pins and send a round at once. Cmd+L puts a note into the chat input, and Option-click adds an element straight to the chat. With hot reload, changes appear in the running app as the agent finishes. Cursor recommends a fast model that is strong at interface work, such as Composer 2.5.
Benchmark side-by-side against alternatives, or calculate monthly token cost vs subscription break-even.
Discussion & Comments
0Sign in to join the discussion
Connect with AI developers to exchange benchmark insights.