Cursor's Design Mode Lets You Point, Draw, and Talk UI Edits Into Code
Cursor updates Design Mode so you can click, scribble, or talk to your running app while agents rewrite the underlying code in parallel.
- Cursor updated Design Mode with point, draw, multi-select, and voice prompts inside the browser.
- Clicking an element passes xpath, computed styles, React fiber props, and a screenshot to the agent.
- Drawing annotations sit on a frozen viewport frame, capturing transient or animated UI states accurately.
- Edits run in parallel as subagents, with hot reload showing results in the running app.
- Pairs with Composer 2.5 for fast targeted UI changes; available in the Agents Window now.
- Known limits: needs a local dev server, sometimes outputs raw values instead of your design tokens.
Chat windows are a clumsy way to describe a button that needs to move three pixels to the left. Cursor is updating Design Mode to fix exactly that mismatch, letting you point at elements, scribble over a frozen viewport, or talk through a change while agents edit the source code in the background.
From the Cursor browser, you can click any element, draw on the page, or describe the change by voice, and Cursor gets the context it needs to edit the code while you move on to the next edit. The pitch is straightforward: UI work is spatial, so the instructions should be spatial too.
What actually ships in this update
Design Mode itself is not new. The browser-based visual editor first appeared in Cursor 2.2 and was rebranded inside the Agents Window with Cursor 3. This release layers on three concrete additions:
- Voice narration. You can now describe a change out loud instead of typing it.
- Multi-select with relationships. You can reference two components and ask the agent to make one match the other, remove repeated content, or adjust a group of components together.
- Drawing on a frozen frame. The annotation sits over a frozen frame of the viewport, so the agent sees the exact page state you were responding to, which matters for animated or transient UI states.
Cursor also says targeting is more precise and the round trip is faster than the previous build.
What the agent actually sees when you click
The interesting part is what gets stuffed into context on a click. Picking an element adds two complementary signals into context: the element's identity (xpath, the component, attributes, computed styles, props from the fiber tree) and a screenshot for spatial context (layout, surrounding elements, and the exact page state).
That fiber tree reference is the key trick. By pulling props straight out of React's internal component tree, Cursor can resolve a rendered DOM node back to the specific component file and prop that produced it, rather than guessing from class names or selectors. Pair that with a screenshot and the agent has both the semantic identity and the visual relationships in one prompt.
Fire-and-forget editing
The other half of the release is workflow. Design Mode lets you send those edits away as you notice them. You can point at one element, describe the change, move to another part of the page, and send another edit before the first one has finished. The app hot reloads as each agent finishes.
This only works if the model is quick. Cursor is explicitly pairing the feature with Composer 2.5, which the team says is both fast and strong at interface work. Slow models would turn the whole multi-subagent flow into a queue of stale edits.
Where it still struggles
The earlier version of Design Mode had some rough edges that are worth knowing about going in. Reviewers have noted that Cursor attempts to map these to your existing CSS variables/tokens, though it often misses or defaults to raw values, which can produce design drift if you are not watching diffs. Practitioners also report that it requires a local dev server, so it won't work on static pages, and that the AI sometimes adds inline styles instead of updating your CSS class or quietly skips a mobile breakpoint.
The mitigation is the usual one: branch first, review the diff before committing, and lean on a design system rules file so the agent reaches for your tokens rather than hardcoded values.
When it earns its keep
The sweet spot is the kind of finicky UI iteration that is hard to specify in words:
- Tightening spacing across a group of cards to match a reference component.
- Annotating a crowded section of a dashboard where pointing is faster than describing.
- Capturing a hover or loading state by freezing the frame and drawing on it.
- Sending a string of small fixes in parallel during a polish pass, instead of waiting on each one.
For exact pixel values or hex codes, the sidebar sliders are still the predictable choice. Point, draw, and voice are for the changes that need judgment about layout and relationships, which is precisely where typed prompts have always been weakest.
Design Mode is available now inside the Agents Window for anyone on a current Cursor build. There is no separate price tag, it runs against your existing agent usage, and the upgrade ships as part of the standard Cursor download.