Cursor’s Design Mode lets you point at your running app and tell an agent what to change. Its June 5 update added voice narration and improved targeting.
What Design Mode actually does
Design Mode runs inside the Cursor browser, an in-app preview window where your running app renders while you work. Clicking an element gives the agent its component identity, page attributes, and a screenshot. It also captures computed styles, the appearance produced by your combined design rules.
That combination is what lets the agent make a targeted edit instead of guessing which button or section you meant from a text description alone.
Design Mode also supports two other ways to point at what you want changed:
- Multi-select: reference two or more elements at once, useful when the change depends on a relationship between them, like asking the agent to make one component match another or clean up repeated content across several.
- Drawing: circle or box a region on a frozen screenshot of the page. The annotation sits over the exact page state you were looking at, so the agent receives the page state you marked.
What’s new in this update
The update added voice input and improved targeting. You can narrate an instruction while pointing or drawing. Cursor says element targeting is more precise and faster. And you can now send a second edit before the first one finishes, described as making it easier to multitask across several changes at once. As edits complete, the app hot-reloads, refreshing automatically to show the changes.
Cursor recommends its Composer 2.5 model for this workflow specifically because it’s fast and strong at interface work, which matters when you’re sending edits back to back rather than waiting on each one individually.
What it requires
Design Mode needs the Cursor browser open, and you reach it through Cursor’s Agents Window. Check Design Mode access and usage terms in your Cursor plan before building a workflow around it.
The part to watch: multitasked edits still need a review
Design Mode makes it easy to fire off several UI changes in a row without waiting to see if the first one landed correctly. That’s the point of the update, but it also means you can queue a second and third edit before you’ve confirmed the first one was scoped to the right element.
A captured page state can differ from the app state when an edit finishes. Overlapping edits can also change the same component. Hot reload will show you something changed, but it won’t tell you on its own whether the agent touched only the file and component you intended.
Treat the hot-reloaded preview as a first look, not confirmation. Open each edit’s diff, the view showing which code lines changed. Check the intended component and any shared styles before accepting the result.
Where this fits
Design Mode’s real shift is capturing exact page state, an element’s code identity plus a screenshot, instead of relying on you to describe a UI location in words. That’s part of a broader pattern in coding agents: accepting messier, more human ways of giving instructions (pointing, drawing, talking) and translating them into precise code changes on their own. The agent still interprets your instruction. Compare the code changes and rendered result with the element and behavior you intended.
End of article