Skip to content
Cursor Handbook

Design Mode

Design Mode turns a selection on your running page into agent context: the element, its code, and a screenshot of the exact state.

  • Agent modes
  • Every plan, inside the Cursor browser. Updated June 2026.

Checked against cursor.com on 25 September 2026

What it does

User interface work is spatial, and chat is not. Design Mode closes that gap by letting you work against the running product instead of describing it. From the Cursor browser you click an element, draw over a region, or narrate the change by voice, and the agent edits the source.

What makes it more than a fancy element picker is the context it captures. Selecting an element pulls in two complementary signals: the element's identity, meaning its xpath, component, attributes, computed styles and props from the React fiber tree; and a screenshot for spatial context, covering layout, neighbouring elements, and the exact page state you were looking at.

Multi-select handles the cases where the instruction is about a relationship. Reference two components and ask for one to match the other, or select a group and adjust them together. Drawing is for when the target is an area rather than a node: circle a crowded section or box a region, and the annotation is pinned to a frozen frame so an animated page cannot move underneath the instruction.

Using it

  1. Open your app in the Cursor browser. Design Mode reads from the running application, so the app needs to be served and open in Cursor's own browser rather than an external one.
  2. Point, draw, or speak. Click a single element, shift-select several, draw over a region, or describe the change with voice input. All four can be combined in one instruction.
  3. Keep going without waiting. Send an edit and move on. Design Mode is built for fire-and-forget iteration, which is also how it makes managing several subagents practical.

Checked against Direct agents with visual prompts in Design Mode on 25 September 2026.

Frequently asked questions

What does Design Mode send to the model when I click an element?
Two things: the element's identity, including xpath, component, attributes, computed styles and props read from the fiber tree, and a screenshot of the viewport for spatial context. Together they let the agent locate the source file and understand the surrounding layout.
Can I use Design Mode with an animated page?
Yes. Drawing annotations sit over a frozen frame of the viewport, so the agent sees the exact page state you were responding to rather than whatever the animation moved on to.
Which model suits Design Mode?
Cursor points at Composer 2.5 for this loop, because design iteration is a chain of small targeted edits where speed matters more than deep reasoning.

Keep reading