Cursor Design Mode Guide

Each input in the table gives the agent a direct pointer to part of the UI, so you describe less in text. 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. then ties that pointer back to the code that implements it.

Cursor's release notes and announcements say what changed. They don't say how a team should act on it. The steps below are our suggested order, and the next section lists what to watch out for along the way.

1. 1Open the running UI and select the exact component, area or group of elements.
2. 2Describe the product outcome, not only the CSS property.
3. 3Let the agent inspect code and layout before it edits.
4. 4Check desktop, mobile, loading and empty states after the patch.

Each item below is either a fact about the release, such as its beta status or plan access, or our advice for using it safely. Plan around each one, and recheck the facts when Cursor ships an update.

• Watch for local visual fixes that break shared components or design tokens. A fix made on one page can change every component that uses the same token.
• Use multi-select for changes to how elements relate, and make a broad page redesign its own deliberate request.
• Review accessibility and responsive behavior before you merge.

Click Annotate 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., then click any element in your running app. Cursor sends that element to the agent as context, with a screenshot, and you describe the change in a note. The agent edits the code, and if your dev server hot reloads, the page updates as soon as it finishes. You never have to find the div or edit the CSS by hand.

1. 1Open your app 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., and click Annotate to turn on 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..
2. 2Click the element you want to change. Hold Shift and click more elements to add them to the same note, or drag across the page to mark an area.
3. 3Describe the change in plain language, such as "make this font 3x as big and bright red".
4. 4Press Return to send the note, or turn on Batch edits to collect several notes and send them as one message. ⌘+L puts a note in the chat input instead, and Option+click adds an element straight to the chat input.
5. 5Cursor identifies the separate components and edits each one. With hot reload on, you see the result right away.

It sends two kinds of context, and Cursor's docs list both. For each element you pick, the agent gets its tag, id, classes and attributes, a CSS-style selector path, the first 200 characters of its visible text, and its size and position. It also gets six computed styles: color, background color, font size, font family, display and position. In React, Vue and Svelte apps, the details add the component name and component stack, so the agent can find the source.

The second kind is a screenshot. Cursor crops it to the element, or to the area with your markup drawn on it, when you save the note.

The computed styles explain the design-token warning above. They arrive as resolved values, so the agent sees the final color and size without the name of the token behind them. Classes and attributes travel too, so a token class can survive the trip, but only because of how your markup is written. On anything that isn't a throwaway page, name the token file in your prompt.

Because the screenshot is cropped to the element, it can leave out a neighbor you mean to compare. For a request such as "make this match the one above it", Shift-click both elements into the same note, so the agent gets details for each. Cursor's docs suggest multi-select for exactly this kind of change, where the result depends on how elements relate. In an ordinary chat thread, you would have to describe that relationship in words.

Draw when the thing you're pointing at won't hold still, or isn't one element. Cursor takes the screenshot when you save the note, with your markup drawn on it, so the agent sees the page state you reacted to. That matters most on an animated page, where the state the agent would find later can differ from the one you saw.

The other case for drawing is crowding. Circling a dense region says "this area" without making you decide which nested node is the real target. Clicking there is mostly a guess about which level the styles live on, and boxing the region and describing the outcome skips that guess.

To mark an area, drag across the page. Holding Shift locks the drag to one axis. Turn the mode on with Cmd + Shift + D or the Annotate button in the browser toolbar, and press the same shortcut to turn it off.

Click instead when you know the single component you want. The payload is narrower, and a narrow payload is easier to review afterward. Drawing hands over an area and lets the agent decide which parts of it count.

It moves the cost from writing to attribution. Cursor's docs describe sending notes as you notice them: you can send the next note before the first one finishes, and Cursor queues it like any follow-up you type. If your dev server hot reloads, changes appear in the running app as the agent finishes. The bill arrives when four changes have landed in one running page and you have to say which diff caused which.

To collect a round of notes and send them as one message instead, turn on Batch edits.

Capping the edits in flight, say at two, is the wrong rule. Overlap matters more than count. Four edits across four unrelated components review fine. Two edits against the same component will confuse you, and no cap on concurrency catches that.

Cursor's docs recommend a fast model that is strong at interface work for this flow, and name 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.. Speed matters here, because the loop only holds together while each edit comes back before you forget what you asked for.

Then read every diff once, before the branch grows to the point where a page that looks right after a hot reload is the only check your work has had.

Because everything it sends exists only at runtime. Computed styles, size and position exist once a browser has rendered the page, and the component stack comes from the running app. The screenshot shows the page in one particular state. None of that can be read from source files, so 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. needs the page rendered 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., not open as code in the editor.

Plan around the consequence: no running app, no 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 workflow inherits whatever your local setup does on a bad day. A dev server that has stopped hot reloading looks exactly like an agent that has stopped working.

The same fact marks out what the mode handles well. Spacing, copy, alignment and two cards that should match are all things you can point at on the page. For a state you can't get the app into, go back to the ordinary agent loop with files and a written description, because 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. can only see what renders.

For more depth, including how a selection maps back to source, see the 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. deep dive.