Cursor Launches Annotate in Design Mode to Direct Coding Agents With Visual Prompts, Page Drawings, and Responsive Previews
New in Cursor design mode: Annotate. Give agents visual prompts: edit elements, draw on the page, and review your designs at different screen sizes.
Context
Replacing verbose text descriptions of UI bugs with direct spatial selection, freehand canvas markup, live CSS editing, and multi viewport inspection closes the feedback loop between visual frontend review and autonomous code editing.
Cursor introduced Design Mode in June 2026 to let developers and designers click interface elements inside an integrated browser preview rather than describing spatial layout changes purely in chat text. As teams increasingly delegate full frontend iterations to background coding agents, visual context capture and responsive viewport testing have become central workflow priorities.
Deep dive
On October 27, Cursor introduced Annotate inside Cursor design mode, expanding how developers and product designers pass visual instructions to coding agents inside the integrated Agents Window browser. Accessible via the Annotate toolbar button or the Cmd Shift D keyboard shortcut in Cursor 3.24.18 and later, the workflow lets users interact directly with their live running application and automatically bundles selected DOM elements, underlying component source context, and annotated screenshots into structured agent prompts.
With Annotate, developers can click individual elements, use arrow keys to traverse parent or child nodes in the component tree, or hold Shift to select multiple elements simultaneously when instructing an agent to align components or eliminate duplicate UI blocks. Users can also drag across any region of the page to open freehand drawing, rectangle, ellipse, and arrow markup tools that highlight visual defects directly on the interface.
Beyond pointing and drawing, Annotate supports double clicking text elements to edit copy directly in place, opening an inline CSS property inspector to tweak styles that get sent alongside the prompt, and holding a Dictate button to narrate instructions by voice while sketching on the screen. Developers can also inspect and compare their running application across multiple responsive screen sizes to catch mobile and tablet layout breaks, then either dispatch each note immediately on Return or toggle batch mode to collect numbered pins across the page and send every visual change request in a single unified agent turn.
What to expect next
By combining responsive multi screen previewing, inline CSS and text editing, freehand canvas markup, and batched pin dispatch inside the integrated editor browser, Cursor is turning the live frontend preview into a primary command surface for coding agents. Expect product managers, design engineers, and frontend reviewers who rarely edit raw source files to increasingly submit batched visual annotations directly into active agent branches.