Agents
Cursor Design Mode: Visual UI Editing in the Agents Window
Design Mode lives in the Agents Window browser: toggle with Cmd+Shift+D (Ctrl+Shift+D on Windows), click elements in your running app to target them, optionally multi-select related nodes, then prompt Agent to change styling or layout in code. Toggle the same shortcut to exit and return to normal browsing.
How do I turn on Design Mode?
Open the browser panel inside Agents Window, start your dev server preview, then press Cmd+Shift+D to enter Design Mode. The shortcut toggles off when you are done. Agent receives the selected DOM nodes and mapped source context so prompts reference what you clicked.
How do I direct changes visually?
Click one element; ask for spacing, copy or color changes on that component.
Select two related elements to align styles, remove duplication or adjust a group together.
Describe the visual delta ('match the primary button') instead of guessing file paths.
Agent still edits source files; inspect the patch before commit like any agent task.
Who is Design Mode for?
Frontend engineers and designers iterating on layout without constant file hunting. It pairs well with Agents Window when you already run the app in the embedded browser. For backend-only tasks, normal Agent mode is faster.
Frequently asked questions
Does Design Mode work outside Agents Window?
Cursor documents Design Mode inside the Agents Window browser. Use Agents Window for this workflow.
Will Agent edit the right component file?
Selection gives Agent element and source mapping, but you should still review diffs. Complex design systems may need @-mentions to rules files.
Can I use Design Mode with component libraries?
Yes, if the running preview renders those components. Point Agent at your design tokens or rules for consistent styling.
Sources & last verified
Cursor ships frequently. Facts verified against primary sources on June 24, 2026.