Cursor adds Design Mode with point, draw, and voice UI editing

• Cursor shipped cursor_ai's launch post for Design Mode, a browser-based UI editing flow where you can point at elements, draw annotations, or speak changes instead of describing everything in chat.
• In Cursor's blog post, the company says each selection passes both element identity and a screenshot into context, including xpath, component metadata, computed styles, props from the fiber tree, and page-state layout.
• ericzakariasson's shortcut list shows Design Mode already has a fairly dense control surface, including keyboard navigation through the DOM tree, multi-select, scribble boxing, and quick add-to-chat actions.
• According to Cursor's changelog, voice input stays available while an agent is mid-run, and ryolu_ said the flow works best with Composer 2.5 for quick targeted UI edits.
• cursor_ai's canvas changelog post ties the same interaction model to canvases, where Cursor also added a context-usage report and a "Debug with Agent" path for trimming token spend.

You can watch the demo video, read Cursor's full Design Mode write-up, and check the separate canvas changelog that quietly adds shared URLs, context exploration, and Design Mode inside canvases too.

Cursor's main pitch is simple: keep the app open, point at the thing you mean, and let the agent edit against that live UI state instead of a text-only description.

In the official post, Cursor says the browser overlay supports four input patterns:

• Click a single element and prompt against that target.
• Shift-click to multi-select related elements.
• Draw boxes or scribbles over the region you mean.
• Narrate the change by voice.

ericzakariasson's shortcut walkthrough adds the current controls: toggle with Cmd-Shift-D, move across siblings with Tab and Shift-Tab, move down or up the tree with Enter and Shift-Enter, send a target to chat with Cmd-L, and use Alt-click as another add-to-chat shortcut.

The useful technical detail lives in Cursor's blog post: selecting an element adds both structured identity and visual state to the prompt.

Cursor says the structured side includes xpath, component, attributes, computed styles, and props from the fiber tree. The visual side is a screenshot that captures layout, surrounding elements, and the exact page state at the moment you marked it.

That frozen-frame bit matters for messy UI work. Cursor says drawings sit over a captured viewport frame, so the agent sees the exact state you were reacting to, including crowded layouts or animation states that are hard to describe cleanly in text.

Cursor's write-up also frames Design Mode as a multitasking interface, not a one-prompt-at-a-time chat box.

According to the official changelog, the mic stays live while an agent is already running, so you can queue the next edit before the first finishes. The blog makes the same point more directly: you can send one UI fix away, move to another part of the page, and manage multiple subagents while hot reload updates the app.

Cursor explicitly says this flow works best with Composer 2.5, which ryolu_ echoed in community reaction.

The day before the Design Mode launch, Cursor shipped the same visual-editing model into canvases, plus a separate debugging aid for token usage.

In the canvas changelog, Cursor says canvases can now be published and shared by URL, Design Mode works inside those canvases, and the new context explorer breaks agent usage down across the system prompt, tool definitions, rules, skills, and more. The same update adds a "Debug with Agent" button that opens a new conversation focused on reducing context usage.