Cursor's Updated Design Mode

Because UI work has a spatial nature, Cursor has updated Design Mode to narrow the gap between what users see on screen and what AI agents understand in code. This allows developers to edit code while maintaining the context of the running product, without breaking their flow.

Users can convey intent to the agent in a variety of ways:

• Element selection: Click a specific element to request edits based on that element's code and properties
• Multi-select: Select multiple elements to define relationships between them or make batch adjustments
• Drawing: Mark a specific area of the screen with a circle or box to specify the scope of a command
• Voice commands: Describe changes directly via voice

Under the hood, the system uses the selected element's xpath, component properties, computed styles, and more, along with screenshots, to grasp spatial context. This allows the agent to accurately locate the source code and make efficient edits.

This update, combined with Composer 2.5, supports fast UI iteration. Users can move seamlessly between high-level abstraction and low-level detail to perform more precise editing work.