Cursor Design Mode: Visual UI Editing in the Agents Window

Open the browser panel 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. and start your dev server preview. Then click Annotate in the browser toolbar, or focus the browser and press ⌘+⇧+D. Press the shortcut again to leave. Annotate needs Cursor 3An older release label for Cursor's multi-agent interface; current product guidance calls the active surface the Agents Window. Press Enter for the full definition..24.18 or later; earlier versions show a pen icon labeled 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. in the toolbar instead.

There is nothing to select until your app is rendering in the panel, because every note starts from something you pick on the running page. If ⌘+⇧+D seems to do nothing, check that the browser has focus and that the preview is serving your app before you look for a settings toggle.

A few gestures do the rest. Shift-click adds elements to the same note, and dragging across the page marks an area. ⌘+L in a note puts its content in the chat input instead of sending it. Option-click adds an element straight to the chat input without opening a note. Cursor's 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. page lists only Mac shortcuts, such as ⌘+⇧+D and Option-click, and gives no Windows equivalents.

You point at the running UI instead of hunting for file paths. Click any element to select it and open a note, then describe the change in plain words, such as "make this font 3x as big and bright red". The note goes to the agent with the element's details and a screenshot, and the agent edits the code. In a Cursor webinar for designers, the presenter selected several elements, described several changes in one prompt, and Cursor found and edited each component.

Selecting is the easy half. Multi-select invites batching: pick five elements, list five changes and send one note. That works often enough to be tempting, but it makes a poor default, because one message returns one unit of work and you end up reviewing five unrelated edits together. Group only the elements that depend on each other, such as a button that should match another button, and send unrelated changes as separate notes.

Both work. Drawing tells the agent which region your instruction applies to. Drag to box in an area, then use the markup tools to circle a crowded section or point at the part that needs work. When you save the note, Cursor crops the screenshot to that area with your markup drawn on it, so the agent sees the page state you were reacting to.

That screenshot matters most on pages that move. On a page with a carousel, a skeleton loader or any other animation, describing an element in words is unreliable, because by the time the prompt lands, the thing you meant may have moved. Marking it ties the instruction to the screenshot taken when you saved the note.

Voice covers descriptions longer than you want to type. Once a note has text or CSS edits, it shows a Dictate button: click it, or hold it while you talk. Whether dictation beats typing depends mostly on how comfortable you are talking to your editor with other people in the room.

Each note sends your text with two kinds of context. The element details cover its tag, id, classes, attributes, a CSS-style selector path, the first 200 characters of visible text, its size and position, and six computed styles. In React, Vue and Svelte apps they also include the component name and component stack. The screenshot is cropped to the element, or to the marked area. The details are how the agent finds the source, and the screenshot shows how the element sits on the page.

Two limits follow from that list. The six computed styles are color, background color, font size, font family, display and position, so for a spacing change, say the spacing you want in the note. Cursor's docs also list component names only for React, Vue and Svelte. On another stack, if the agent keeps editing near-misses, name the component in the note 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, then move to another part of the page and send the next note before the first one finishes. Cursor handles a note sent while the agent is working like any follow-up you type. If your dev server hot reloads, each change appears in the running app as the agent finishes it.

To review a round of changes together instead, turn on the Batch edits switch in the note card, which starts off. With it on, notes collect on the page as numbered pins, and one click on Send sends them all as one message. That trades fewer messages for one larger diff, so keep each round to related changes.

Model choice matters more here than on a long refactor, because the loop is short and you are 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.. Keep slower models for planning, since 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.

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. is for frontend engineers and designers who iterate on layout and don't want to hunt for files. It fits best when you already run the app 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. 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, because for an afternoon they can be the same person. On a larger team, be more careful, for a reason that has nothing to do with the tool. Point-and-prompt edits are fast enough that a design system quietly gains three ways to do the same thing. Name the rules file that holds your tokens, or the shared component, in the note itself.

If edits keep landing somewhere you didn't expect, check what the preview is serving before you re-examine your selection. The browser tool page covers the port-confusion version of this problem.