Cursor Design Mode: Visual UI Editing in the Agents Window

Open the browser panel inside 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., start your dev server preview, then press ⌘+⇧+D to enter 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.. The shortcut toggles off when you are done. Agent receives the selected DOM nodes and mapped source context so prompts reference what you clicked.

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. has nothing to select until your app is rendering in the panel, since everything it hands the agent starts from an element in the running product. If ⌘+⇧+D seems to do nothing, check what the preview is serving before you go hunting for a settings toggle.

Three other shortcuts do the work once you are in. Shift and drag selects an area, ⌘+L adds the element you are pointing at to chat, and Option-click (Alt-click on Windows) adds it to the input. Cursor lists the last two side by side without spelling out how they differ, so I would try each once on the same element rather than infer it from the labels.

You point at the running UI instead of hunting for file paths. Toggle 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, click any div in your running app, and that element is handed to the agent as context along with a screenshot. Then you describe the change in plain words ("make this font 3x as big and bright red") and Cursor edits the code and re-renders live. Add more elements to context with ⌘+L; select a few divs and describe several changes in one prompt, and Cursor identifies the distinct components and edits each.

Selecting is the easy half. My first instinct with multi-select was to batch it: pick five divs, list five changes, send one prompt. That works often enough to be tempting, and it is still the wrong default, because one prompt returns one unit of work and you end up reviewing five unrelated edits together. Pair the elements that genuinely depend on each other, the button that should match the other button, and send the unrelated changes as their own prompts.

Both work. Drawing tells the agent which region your instruction applies to: circle a crowded section, box in an area, or mark part of an animated page. Cursor puts the annotation over a frozen frame of the viewport, so the agent sees the page state you were reacting to.

The frozen frame matters more on some pages than others. On a page with a carousel, a skeleton loader or anything else that moves, pointing at something and then describing it in words is probably a coin flip, because by the time the prompt lands the thing you meant has moved. Circling it pins the instruction to the frame you were looking at.

Voice covers the other case, where the description is longer than you want to type. The mic stays available while agents are running, so you can queue the next change without waiting for the current one to land. Whether dictation actually beats typing depends mostly on how comfortable you are talking to your editor with other people in the room.

Two signals, answering different questions. Cursor sends the element's identity (its xpath, the component, attributes, computed styles and props from the fiber tree) and a screenshot carrying the layout, the surrounding elements and the exact page state. Identity is how it finds the source. The screenshot is what tells it how the thing sits on the page.

Fiber tree is React's term, which makes me read the props half of that list as React-specific. Cursor's docs do not scope it either way, so treat that as my inference and not documented behaviour. If you are on a stack without a fiber tree and the agent keeps editing near-misses, name the component in the prompt instead of relying on the click to carry it.

None of this removes the review step. Pointing at the running app makes the instruction precise about what you meant. It says nothing about whether the edit landed in the file you would have chosen, and 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. writes ordinary source changes that show up in the review pane like any other agent task.

Send each edit as you notice it. Point at one element, describe the change, move to another part of the page and send the next before the first one finishes. Cursor documents this as the intended rhythm: you end up managing several subagents, and the app hot reloads as each one lands.

It can get away from you, though. Two edits in flight against the same component means two agents writing near the same lines, and I honestly would not want to guess which version you end up looking at after the reload. Keep concurrent edits on different parts of the page.

Model choice matters more here than on a long refactor, because the loop is short and you are sitting there watching it. Cursor recommends a fast model that is strong at interface work and names Composer 2.5The current Composer release, better at long-running tasks and at judging when a job needs a light touch versus deep work. Press Enter for the full definition.. Planning work still wants something slower; in 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. you feel every second of the wait.

Frontend engineers and designers iterating on layout without constant file hunting. It pairs well with 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. when you already run the app in the embedded browser. For backend-only tasks, normal Agent modeCursor's full-capability mode: the AI can read the codebase, write and edit files, move them and run terminal commands. Contrast with Ask mode, which is read-only. Press Enter for the full definition. is faster.

On a small team it is the cheapest way to close the gap between the person who notices the spacing and the person who fixes it, mostly because they can be the same person for an afternoon. At larger scale I would be more careful, and the reason has nothing to do with the tool. Point-and-prompt edits are fast enough that a design system quietly acquires three ways to do the same thing. Name the rules file that holds your tokens, or the shared component, in the prompt itself.

If the edits keep landing somewhere you did not expect, check what the preview is actually serving before you re-examine your selection. The browser tool page covers the port-confusion version of that problem. Work out which build you are pointing at first.