Cursor Design Mode Annotate: Point at Your UI and Let the Agent Edit the Code

Cursor Design Mode Annotate lets you point at a running web page, describe a visual change, and send the request to a coding agent with element details and a screenshot. Use Cursor 3.24.18 or later, open the browser inside the Agents Window, and select Annotate or press Cmd/Ctrl + Shift + D. For a redesign with several related changes, turn on Batch edits so you can collect notes and send them together.

This workflow helps when you know what looks wrong but do not know which React component, CSS rule, or template controls it. It also gives experienced developers a direct way to connect visual feedback to source code. The agent still needs to interpret your request and modify the project correctly, so review the resulting code and rendered page.

Where is Annotate, and why do I only see a pen icon?

Annotate lives in the browser inside Cursor’s Agents Window. The version and interface you are using determine which control appears.

Follow these steps:

1. Open your project in Cursor and open the Agents Window.
2. Start or open an agent session and open the browser displaying your running application.
3. Click Annotate in the browser toolbar, or focus the browser and press Cmd + Shift + D on macOS or Ctrl + Shift + D on Windows and Linux.
4. Alternatively, open the command palette and search for Toggle Design Mode.
5. Follow the hint row at the top of the page to see the available gestures.

Annotate is available in Cursor 3.24.18 or later, according to the official Design Mode documentation.

If you see a pen icon labeled Design Mode, check your version first. Earlier versions use that control instead of the newer Annotate button. Update Cursor if you want the documented Annotate interface.

There are two other reasons the toolbar may look different. Before you open Design Mode for the first time, the button shows a Try Annotate preview with a short demo. After you have left more than five notes, the button displays only its icon.

To exit Design Mode, click the exit control in the hint row, press the shortcut again, or press Esc. Escape first cancels an active drawing stroke, text edit, or open note. It exits Design Mode only after those interactions are closed.

Cursor’s public documentation does not specify which subscription plans receive Annotate or confirm a universal rollout schedule. Do not assume that every account has the feature merely because its version number is high enough.

How do you select elements, draw annotations, and edit CSS?

Select an element when you know which component needs changing. Mark an area when the problem concerns spacing, alignment, or a larger visual arrangement.

Select one or several elements

Click an element in the running application to select it and open a note. Describe the change in the note.

For example, imagine a SaaS dashboard with a crowded header, a search field, and a row of filter buttons. Click the search field and enter:

Increase the input height, add more space inside the field, and align its text vertically with the filter buttons. Keep the existing color scheme.

The selected element gives the agent a concrete starting point. The written instruction supplies the intended result.

To select multiple elements for one related change, hold Shift and click each element. For example, select the search field and filter buttons, then ask the agent to align them on the same baseline and normalize their heights.

Use multi-selection when the elements must change together. Separate notes are usually clearer when the changes are independent or require different instructions.

Mark an area and draw on the page

Drag across the page to mark a region. You can then describe the change and add visual marks.

The hint row exposes four markup tools:

• Draw: Sketch a shape or trace a region that needs attention.
• Ellipse: Circle an element or group of elements.
• Rectangle: Outline a section of the page.
• Arrow: Point toward the part that needs changing.

Hold Shift while dragging to constrain the selection to one axis. Hold Option on macOS or Alt on Windows and Linux to draw a box from its center. Press Cmd/Ctrl + Z to undo markup.

Consider a dashboard where a summary card sits too close to a chart. Draw a rectangle around the card and chart boundary, then add this note:

Add 24px of vertical spacing between the summary cards and the chart. Preserve the current chart dimensions and keep the layout responsive.

The drawing identifies the location. The text explains the intended change and any constraints.

Edit visible text directly

Double-click a text element to edit its content on the page. Press Return or Enter to save the text edit, or press Esc to revert it.

For example, change a heading from “Usage Overview” to “API Usage” directly in the browser. You do not need to describe the replacement separately.

There is one important distinction: text edits always wait for Send, even when Batch edits is off. Saving the inline edit does not immediately send it to the agent.

Treat an inline text edit as a proposed code change, not a permanent browser-only modification. Cursor sends it with the note so the agent can update the underlying project.

Change CSS properties in the inspector

For a note targeting one element, select Edit CSS properties to open the CSS inspector. Filter the properties, change a value, and send the CSS edits with the note.

This is useful for focused changes such as adjusting padding, font size, display behavior, or positioning. You can change the property directly rather than relying entirely on a natural-language description.

Check the resulting page after the agent applies your changes. The intended CSS value may interact with existing styles, layout rules, or responsive behavior. Review the code diff to confirm that the agent changed the correct component and did not introduce unrelated edits.

Dictate a note with your voice

Voice input is available once a note contains text or CSS edits. Click Dictate, or hold the button while speaking.

You can combine spoken instructions with a drawing. For example, circle a promotional banner and say that its text should be shorter, its button should align to the right, and its mobile layout should stack vertically.

Review the resulting note before sending it. Visual marks identify the target, while the dictated text describes the desired result. Clear wording still matters, especially when several changes affect the same component.

When should you turn on Batch edits?

Use Batch edits when you want to collect several related visual changes before asking the agent to implement them. Leave it off when you want to send element or area notes immediately and inspect the result before deciding what to change next.

The switch starts off. Its behavior changes how element and area notes reach the agent, but inline text edits always wait for Send.

Behavior	Batch edits off	Batch edits on
Element or area notes	Send individually	Collect as numbered pins
Sending element or area notes	Press Return or Enter in a note to send it immediately	Click the toolbar’s Send button to send all pending notes
Message grouping	Each note is sent separately	Pending notes are sent as one message
Inline text edits	Wait for Send	Also wait for Send
Reviewing pending notes	Review pending text edits in the Send list when available	Review queued notes in the list beside Send
Clearing pending notes	Use Clear All for pending notes; already-sent notes cannot be cleared from the queue	Use Clear All to remove pending notes

The distinction between immediate notes and pending text edits matters. With Batch edits off, an element or area note can be sent immediately by pressing Return or Enter. An inline text edit remains pending until you send it. If you have pending text edits, use the Send list to review them or Clear All to remove the pending notes.

With Batch edits enabled, the toolbar replaces Annotate with a Send button showing the pending-note count. You can review the numbered pins before sending them. Sending all pending notes also exits Design Mode.

If you exit with notes still pending, the Send button remains in the toolbar until you send or clear them.

A practical redesign example

Suppose you want to improve a pricing page with three problems:

1. The main heading takes up too much vertical space.
2. The primary call-to-action button does not align with the price.
3. The comparison table feels cramped on smaller screens.

Turn on Batch edits, then create a note for each problem.

For the heading, select the text and reduce its size while preserving the visual hierarchy. For the button, select it and the price to establish their alignment relationship. For the comparison table, mark the relevant area and describe the responsive behavior you want.

Before sending, review the numbered pins and make sure each note refers to the intended element or region. Then send the batch as one message.

This approach works best when the changes form one coherent task. The agent can see the notes together and reason about their relationships. However, batching does not guarantee that the model will implement every instruction correctly.

For a change that depends on a major intermediate result, send the first note separately. Inspect the updated page, then decide what to do next. For example, change the page’s overall layout before asking the agent to fine-tune the spacing between individual components.

You can also use Cmd/Ctrl + L inside a note or a text edit to put its content into the chat input instead of sending it or holding it for Send. Hold Option/Alt and click an element to add it directly to the chat input. If a note is already open, the same shortcut adds the element to that note.

What context does the agent actually receive?

Each submitted note contains your instruction, structured element details, and a cropped screenshot. In supported React, Vue, and Svelte applications, the element details also include component information to help the agent locate the relevant source.

Cursor documents the following context for each selected element:

Context	What Cursor provides	Why it helps
HTML tag	The element’s tag name	Identifies the type of element
Attributes	The element’s id, classes, and attributes	Helps distinguish the target
Selector path	A CSS-style selector path	Helps locate the element in the rendered page
Visible text	The first 200 characters of visible text	Connects the selection to its displayed content
Geometry	The element’s size and position	Describes its location and dimensions
Computed styles	Color, background color, font size, font family, display, and position	Gives the agent relevant rendered-style information
Component context	Component name and component stack in React, Vue, and Svelte apps	Helps connect the rendered element to application source
Screenshot	A crop of the selected element, or the marked area with its drawing	Shows the visual context of the requested change

This is more specific than a prompt such as “make the header look better.” The agent receives a target, rendered properties, visible content, and visual evidence.

It is still a limited snapshot. The documented context does not promise a full DOM dump, the complete stylesheet, every ancestor’s computed styles, all application state, or the full page screenshot. The component stack is available for the listed frameworks, but it does not guarantee that the agent will identify the correct source file on every project.

For example, selecting a button can tell the agent that it is a button with particular classes, dimensions, text, and computed styles. The screenshot can show how it sits beside the price. In a React application, component information may help the agent trace the rendered button to its component stack.

The same component-context behavior is documented for Vue and Svelte. Cursor includes the component name and component stack in those applications as well. The documentation does not promise identical source-discovery results across frameworks or projects.

The agent must still inspect the repository, understand the surrounding implementation, and decide how to make the change. Review the code diff and the running page after the agent finishes.

Cursor does not document a token-cost formula for Annotate’s screenshots and element metadata. Do not assume that each note has a fixed token cost or that batching necessarily reduces total model usage. Batching changes how notes are sent; the actual cost depends on the agent workflow and model usage.

How should you verify the agent’s changes?

Use Annotate to make the request more precise, then verify the implementation in the project and the rendered page.

After sending your notes:

1. Wait for the agent to finish the relevant changes.
2. Inspect the code diff for unrelated edits, incorrect selectors, and changes that violate existing component conventions.
3. Check the running page after hot reload, if your development server supports it.
4. Recheck the layout at the viewport sizes that matter to your application.
5. Test interactions and accessibility, including keyboard focus and readable text, where relevant.

Cursor’s October 28, 2026 announcement says Annotate can help developers review designs at different screen sizes. The supplied public Design Mode documentation does not specify an automatic responsive-review mechanism. Treat viewport checks as a separate verification step unless your installed workflow provides a documented way to automate them.

For broader interface work, Inspo MCP can bring design references and screenshots into coding-agent workflows. That solves a different problem: Annotate identifies what to change in a running interface, while design references help explain the intended visual direction.

If you are choosing a broader coding workflow, see Cursor vs. Codex in 2026 for a comparison of their development workflows, pricing, and on-demand usage.