1 min lesson
Choose the visual context
Choose element, multi-select, drawing or voice for one visual change, then explain what context Agent receives.
Step 1 of 2
Select the visual relationship, then make one shared code change that survives hot reload and both viewports.
Design ModeA way to point at an element in Cursor's built-in browser and change it directly, instead of describing it in words. Press Enter for the full definition. lives in the browser inside the Agents WindowCursor's surface listing your agent runs; open a run to read its diff and search transcripts from the command palette. Press Enter for the full definition.. Toggle it with ⌘Ctrl⇧D. Click one element for a local change. Use multi-select when the request depends on a relationship between elements. Use Shift+drag to mark an area, or draw over a frozen frame when the page state matters. Voice input can queue another instruction while an agent runs. A selected element gives Agent its xpath, component, attributes, computed styles, fiber props and a screenshot. Check that context before the edit, then inspect the source diff and hot-reloaded page.
- Entry point
- Browser in the Agents WindowCursor's surface listing your agent runs; open a run to read its diff and search transcripts from the command palette. Press Enter for the full definition., Design ModeA way to point at an element in Cursor's built-in browser and change it directly, instead of describing it in words. Press Enter for the full definition. on, exact element or annotated region
- Source
- Cursor Design ModeA way to point at an element in Cursor's built-in browser and change it directly, instead of describing it in words. Press Enter for the full definition. docs
Check selection methods, shortcuts and attached element context in Cursor's current Design Mode docs.