Edit Your Prototype with Design Mode

Design Mode lets you change a running prototype by pointing at it. Click a button, circle a section or say what is wrong, and the agent edits the code behind it while you watch the page update.

What Design Mode is

Describing a UI change in words is slow: "the second card, the grey label under the title, make it a bit smaller". Design Mode replaces that sentence with a click. You select the element on the live page, and Cursor sends the agent exactly which component it is, its styles and a screenshot of where it sits. You only say what should change.

Before you start

• A project open in the Agents Window. Any prototype you have built in earlier lessons works.
• The app running. Design Mode edits a live page, so your project needs to be running on your computer (a local address such as localhost:3000).
• A React app gets the most precise results. Cursor reads component details from React apps. Other pages still get a screenshot of what you selected.

Open your app in Cursor's browser

Turn on Design Mode

Click Design Mode in the row of buttons under the chat, or press Cmd+Shift+D with the browser focused. A Design label appears in the browser's toolbar, and clicking the page now selects elements instead of pressing them. To go back to normal browsing, click the × on that label. On Windows, use Ctrl in place of Cmd and Alt in place of Option.

Four ways to point

Click

Click one element. Use it for a single fix: this button, this heading.

Multi-select

Select two or more elements. Use it for consistency: "make this card match that one".

Area

Shift+drag a box, or draw a circle on the page. Use it for a whole region: "tighten the spacing in this section".

Voice

Click the mic and say the change. Use it to keep iterating while your eyes stay on the page.

When you select something, a small box appears under it saying Describe the change. Type what should change there and press Return. The agent picks it up, and the chat on the left shows its progress and which files it edited. To discuss the element in the main chat instead, press Cmd+L.

What the agent receives

• Which element it is: the component, its attributes and its current styles, so the agent edits the right file and the right line.
• A screenshot: the element in place, with what surrounds it, so changes fit the layout around them.

This is why short requests work. "Smaller" is enough when the agent can see exactly what you selected.

Try it: tidy a card

Make this 2px smaller and use our secondary text colour.
Make both cards use the same padding as the first one.
This section feels cramped. Add more space between the heading and the list.

Design Mode or the chat?

• Use Design Mode for visual fixes you can point at: spacing, sizes, colours, alignment, copy on the page.
• Use the chat for things you cannot point at: new pages, data, logic, or "add a settings screen".