Direct agents with visual prompts in Design Mode

Summary

Design Mode updates Cursor’s browser-based agent workflow for spatial UI work, letting users edit a product in context rather than relying on chat descriptions alone. Users can select one or more elements, draw on a frozen viewport frame, or narrate instructions by voice; references can express relationships such as matching components or changing a group together. Element selection supplies identity signals including XPath, component, attributes, computed styles, and fiber-tree props, alongside a screenshot capturing layout and page state. Users can queue edits while earlier ones run, manage multiple subagents, and see results through hot reloads, with Composer 2.5 described as suited to fast, targeted interface changes. The update is presented as a way to tighten the noticing-to-editing loop while preserving control and precision during UI iteration.

Takeaways

1. 1

   Element references combine structural signals, including XPath, component, attributes, computed styles, and fiber-tree props, with a screenshot of the surrounding layout and exact page state.

2. 2

   Multi-select supports relationship-based changes, such as making one component match another, removing repeated content, or adjusting a group together.

3. 3

   Design Mode allows users to send additional edits before earlier ones finish, while hot reloads show completed changes in the running product.