What happened
Cursor’s Design Mode documentation describes Annotate, a workflow for leaving instructions on a running application from the browser embedded in the Agents Window. A user opens the browser, clicks Annotate, and points at an element, an area, or text on the page. The resulting note is sent to the agent with contextual information so that the agent can edit the code while the user continues identifying further changes. The announcement material says the feature was announced on October 27 and also describes drawing on the page and reviewing designs at different screen sizes.
The interaction is built around several forms of visual selection. A user can click one element, use Shift-click to add several elements to a note, or use the arrow keys before clicking to move the highlight to a parent or child element. They can drag out an area and add freehand drawing, ellipses, rectangles, or arrows. A text element can be edited in place with a double click, while a note for a single element can open a CSS inspector to alter a property. Notes can also be dictated after they contain text or CSS edits.
Cursor gives the agent more than the written instruction. For every selected element, the documentation says the agent receives the tag, id, classes, attributes, a CSS-style selector path, the first 200 characters of visible text, dimensions, and position. It also receives six computed styles: color, background color, font size, font family, display, and position. For React, Vue, and Svelte applications, the context includes the component name and component stack. Cursor crops a screenshot to the selected element, or to the marked area including the user’s drawing.
Notes can be sent individually or collected. With Batch edits off, pressing Return or Enter on an element or area note sends it immediately. With Batch edits on, pending notes remain as numbered pins and can be sent together as one message. Text edits always wait for Send. Users can also place a note or selection into the chat input instead of sending it immediately. If a development server hot reloads, edits can appear in the running application as the agent completes them; Cursor says a further note sent while the agent is working behaves like a normal follow-up.
The documented shortcut to toggle Design Mode is Cmd or Ctrl plus Shift plus D. Annotate is available in Cursor 3.24.18 or later. Earlier versions show a pen-icon Design Mode control in the browser toolbar instead. Cursor says the flow works best with a fast model strong at interface work and recommends Composer 2.5.
What the archive adds
This is a new feature on a related Cursor workflow rather than a restatement of prior coverage. An earlier archive post described Cursor canvases as persistent artifacts that can be saved, reopened, reused, and refreshed with new context. Annotate adds an input mechanism upstream of that broader interface-work flow: visual feedback from a live application can now be packaged into an agent request.
Trend signal
This supports the Design systems become agent context pattern. The feature does not make an agent a reliable visual judge; instead, it gives the agent rendered, spatially grounded evidence and preserves the human as the person who notices and specifies the defect. It also supports the assumption that non-engineers will make up a growing share of coding-agent users, because pointing at a UI lowers the need to translate a visual observation into code-oriented language.
Why now
The timing follows from the limits of text-only prompting for interface work. Cursor’s documentation explicitly frames UI work as spatial: a builder often wants to identify a particular component, relationship, or region rather than write a complete verbal description. By attaching a screenshot and source-oriented element details to that observation, Annotate narrows the gap between reviewing a rendered result and issuing a code change.
Why it matters
For teams building with AI, the practical consequence is a more structured review loop for front-end changes. A designer, product manager, or developer can turn a visible issue into a bounded instruction tied to a particular target, then let the coding agent locate the likely source. Multi-select can express relationships between components, such as making one match another or changing a group together; batch sending can turn a review pass into one scoped request.
That can reduce ambiguity and conversational back-and-forth, but it does not eliminate review. The screenshot and element metadata are context, not a guarantee that the requested change is correct, accessible, responsive, or consistent with the wider product. Teams still need acceptance criteria and a person able to inspect the result across states and screen sizes.
What happens next
- Visual prompting becomes a routine front-end review input alongside chat instructions. (3 months, 65%). Watch for: teams standardizing annotated review passes in agent-assisted UI work.
- Agent interfaces expose richer links from rendered elements back to source components. (6 months, 60%). Watch for: more framework-aware component and layout context in visual-agent tools.
Limits and uncertainty
The supplied material is product documentation and an announcement, not an independent evaluation of accuracy, speed, reliability, or adoption. It does not establish how consistently the agent maps selectors, screenshots, computed styles, and component stacks to the right codebase changes. It also does not provide pricing, usage limits, supported browsers, privacy handling for screenshots, or a general availability date beyond saying Annotate is available in Cursor 3.24.18 or later. The recommendation of Composer 2.5 is Cursor’s own guidance, not comparative evidence that other models cannot perform the workflow.
Skill to build now
Run one annotated review pass on a small, running interface this week. Ask reviewers to create separate notes for a single-element correction, a relationship between two components, and a marked area. Send them first as individual notes, then as a batch, and compare the resulting diffs with the intended change. Record which instructions required a human follow-up; that is the useful input for improving your UI acceptance checklist.
Reader takeaway
Annotate gives Cursor’s agent a visual prompt channel grounded in a live page: the human points to the problem, while Cursor supplies a screenshot and element context to help locate the code. It should make UI iteration more direct, but human visual review remains the acceptance boundary.
Open question
Will screenshots, selectors, and framework component stacks prove sufficient for reliable changes in complex responsive interfaces, or will teams still need to translate most visual feedback into explicit design-system rules?