Cursor Turns Browser Sketches Into Instant Code Edits
Cursor's new Annotate feature lets you point, draw, and type on your running app so the agent can edit the right code.
- Cursor's Design Mode adds Annotate, letting you leave visual notes directly on your running app.
- Click elements, drag areas, draw arrows, edit text in place, or tweak CSS, then send to the agent.
- Each note includes element metadata, component stack (React/Vue/Svelte), six computed styles, and a cropped screenshot.
- Batch edits mode queues multiple pins as numbered annotations and sends them as one message.
- Shortcut Cmd/Ctrl + Shift + D toggles the mode inside the Agents Window browser.
- Available in Cursor 3.24.18+, works best with the Composer 2.5 model.
Cursor has added Annotate to Design Mode, turning its built-in browser preview into a markup layer for a running web app. Developers can select elements, draw shapes and arrows, or attach notes. Cursor packages those marks for the coding agent, which uses the context to locate and edit the source.
A mobile hero adjustment can now be specified by selecting the headline, Shift-clicking the navigation button, and typing Match this pill shape and increase the spacing below. The note carries both element references, reducing the prompt needed to describe their location and relationship.
Mark the running page
Design Mode documentation covers the feature inside the Agent window’s browser. Open Annotate from the browser toolbar, or focus the browser and press Cmd/Ctrl + Shift + D.
Selection and markup controls
- Select an element: Click an element to open a note and describe the change. Before clicking, press Arrow Up or Arrow Down to move the highlight to its parent or child.
- Group elements: Hold Shift while clicking additional elements to include them in one note, such as when one component should match another.
- Mark a region: Drag across the page to select an area. Available markup tools include Draw, Ellipse, Rectangle, and Arrow.
- Edit text: Double-click a text element to change its copy on the page.
- Adjust styles: For a note attached to one element, select Edit CSS properties to open its CSS inspector. Those changes are included with the note.
- Use dictation: Add voice input after a note contains text or CSS edits.
The context inside each note
Each saved note combines the developer’s instruction with structured details about every selected element:
- DOM identity: Tag,
id, classes, and attributes. - Source locator: A CSS-style selector path.
- Content and geometry: The first 200 characters of visible text, plus the element’s size and position.
- Computed styles: Color, background color, font size, font family, display, and position.
- Framework metadata: Component name and component stack for React, Vue, and Svelte applications.
Cursor also captures a cropped screenshot when the note is saved. Element notes include the selected element, while regional annotations include the area and its drawn markup. The agent can use the screenshot to interpret visual intent and the structured metadata to trace the rendered interface back to its source component.
Saved notes can contain application text, element attributes, component metadata, styles, and screenshots. Teams working with sensitive data should apply their normal review policies before sending annotations to the selected model.
Control the queue
The Batch edits switch on each note card controls whether Cursor sends an annotation immediately or collects several annotations into one agent message.
| Mode | Behavior |
|---|---|
| Batch edits off | Pressing Enter sends the current note to the agent immediately. |
| Batch edits on | Pending notes remain on the page as numbered pins. A Send button and note count replace Annotate in the toolbar; clicking Send submits all pending notes as one message. |
While one agent task is running, developers can annotate another element and send a follow-up. Cursor queues that annotation like a follow-up entered in chat. When the development server supports hot reload, completed edits appear in the browser preview as the source changes.
A fast model keeps pace
Annotate requires Cursor 3.24.18 or later. Earlier versions expose the related controls through a pen icon labeled Design Mode in the browser toolbar.
Cursor includes Annotate with existing plans, so there is no separate feature fee. Agent usage follows the user’s plan and selected model.
Cursor recommends Composer 2.5, its in-house model, for this workflow. Annotation benefits from a model that can interpret interface context and return targeted edits quickly. Lower latency keeps the edit-and-refresh cycle close to the development server’s hot-reload loop.
A tight fit for UI polish
Annotate fits targeted front-end changes such as spacing, typography, color tokens, responsive breakpoints, button shapes, and alignment between components. A screenshot plus DOM and framework metadata gives the agent enough context to make a focused source edit.
New components, backend logic, and architectural changes require broader requirements and planning. Cursor’s regular chat and Plan Mode documentation provide more suitable workflows for those tasks. Developers should review generated diffs, test responsive states, and run the project’s usual accessibility and regression checks before merging annotation-driven changes.
Comments
