EditUICursor Design Mode
Cursor Design Mode, in Chrome, for any coding agent
You can see the UI bug in the browser. The agent cannot, until you show it the element. EditUI is that point-and-note pass in normal Chrome.
Install the extension, click the live elements, write a short note on each one, and copy the whole review as one prompt. Paste it into Cursor, Claude Code, Codex, or whichever agent already has the repo. There is no MCP server and nothing to add to the project.
Cursor Design Mode is a different product. It lives in Cursor's own browser and talks to Cursor's agent. EditUI does not try to be that loop. It is the same kind of pointing, done in the Chrome tab you are already using, then handed off by copy and paste.
Cursor Design Mode vs EditUI
Design Mode is documented in Cursor's Design Mode guide. The rows below are the practical split, not a scorecard.
| Compared | Cursor Design Mode | EditUI |
|---|---|---|
| Setup | Open the browser in Cursor's Agents Window. | Install the Chrome extension. No repo setup and no MCP server. |
| Where it runs | Inside Cursor. | In normal Chrome, on the tab you already have open. |
| Batch edits | Send one edit and move on while Cursor's agent is still running. | Collect the whole review, then copy one prompt. |
| Agent | Cursor's own agent. | Whichever agent you paste into: Cursor, Claude Code, Codex, or another. |
| Localhost | Yes, loaded in Cursor's browser. | Yes, including the localhost tab already open in Chrome. |
| MCP | Not required. The loop is built into Cursor. | Not used. The handoff is a copied prompt. |
When Cursor Design Mode wins
- You are already in Cursor, and the page is open in the Agents Window browser.
- You want the agent to see the React component and a screenshot, not only the DOM.
- You want to draw on a region, or describe the change by voice.
- You want to send the next edit while an earlier agent run is still going.
- You do not want a copy-paste step between the click and the code change.
When EditUI wins
- The page is already open in normal Chrome, including a localhost tab you sized yourself.
- You want to finish the review before any agent starts.
- The agent is Claude Code, Codex, or something other than Cursor.
- You switch agents and do not want the review locked to one IDE.
- You do not want MCP, a signup, or a package added to the repo.
A Design Mode style pass in normal Chrome
Same job: point at the running UI and say what should change. The handoff is a prompt you paste, not a run inside Cursor.
01
Run the app
Use the dev server you already have. Leave it on the URL where the bug shows.
02
Open that URL in Chrome
This can be localhost. Set the window to the width you care about before you click.
03
Turn on EditUI
Toolbar icon, or Command-Shift-E (Ctrl-Shift-E).
04
Click the element
The outline is the thing you mean. Write the change in one sentence.
05
Keep collecting
Stay in the review. Add the next note without starting an agent yet.
06
Copy all
One prompt includes the URL, the viewport, each request, and the DOM context for each click.
07
Paste
Put it in Cursor, Claude Code, Codex, or any agent that has the repo.
08
Check the reload
When the page updates, look at the same elements. Re-prompt only the notes that missed.
What the prompt contains, and what it does not
Each note names the page, the viewport, your sentence, and the element you clicked: tag, visible text, nearby markup, and a few computed styles such as font size, padding, and flex alignment. Hashed class names are left out. You do not copy a selector by hand.
EditUI does not read the React fiber tree, so it will not tell the agent which source file rendered the node. It does not attach a screenshot. If the change depends on a picture of the whole page, take that screenshot yourself and add it in the agent chat. Cursor Design Mode includes both the source identity and a screenshot. That is a real reason to stay in Cursor when you are already there.
The batch is the other half. Design Mode is built for sending edits as you notice them. EditUI is built for collecting them. Twelve small notes in one prompt keep the page coherent. Twelve separate agent runs make you supervise the review instead of finishing it. The batch guide is the short version of that idea.
FAQ
- How does Cursor Design Mode work?
- Cursor documents Design Mode in the browser inside the Agents Window. Toggle it with Command-Shift-D (Ctrl-Shift-D). You can click an element, draw on the page, or describe a change by voice. Cursor says a picked element contributes its identity (xpath, component, attributes, computed styles, and React fiber props) plus a screenshot. The agent edits the code, and you can send another edit before the first one finishes.
- Is there a Cursor Design Mode alternative that runs in Chrome?
- EditUI is that workflow in normal Chrome. You click elements on the running page, write a note on each one, and copy the batch as one prompt. It does not draw on the page, take a screenshot, or read the React fiber tree. Those stay with Cursor Design Mode.
- What is the difference between Design Mode and Cursor's Visual Editor?
- Design Mode is visual prompting: point, draw, or talk, and Cursor's agent edits the code. The Visual Editor, described on Cursor's blog, also lives in the Cursor Browser and adds direct manipulation: drag elements, inspect component props, and adjust layout and type with sidebar controls, then ask the agent to apply the result. EditUI is neither. It is a Chrome review you paste into an agent. See the Visual Editor comparison for that split.
- Can I use this with Claude Code or Codex, not only Cursor?
- Yes. Copy all puts one prompt on the clipboard. Paste it into Claude Code, Codex, Cursor, or any agent that can read text. EditUI does not install itself into the agent.
- Does it work on localhost?
- Yes. Open the local URL in Chrome and turn Edit Mode on. The prompt includes that URL and the viewport size.
- Do I need MCP?
- No. There is no MCP server to configure and nothing to add to the repository. If you want the agent to pull element context itself through MCP, that is a different kind of tool.
- Does EditUI replace Cursor Design Mode?
- No. Use Design Mode when you are already in Cursor and you want its agent, its source mapping, and its screenshot. Use EditUI when the review is happening in Chrome, or when the agent is not Cursor.