Add to Chrome
SafariHow they compare
Both tools exist to stop you describing which element you mean. EditUI's answer is annotation: click, type what should change, collect, copy a prompt that carries DOM, class and computed-style context. Design Mode's answer is editing: change the value on the page, see it, and hand the agent the before/after diff over MCP. EditUI edits are still words; Design Mode edits are numbers and tokens.
Feature-by-feature
| Feature | Design Mode | EditUI |
|---|---|---|
| Visual editing on a scriptable webpage | Yes — typography, colour, layout, spacing, motion and effects on localhost, staging or production pages the extension can script. Browser-protected pages are excluded. | No — you select an element and type an instruction; the page itself is not changed |
| MCP (Model Context Protocol) handoff to AI agents | Yes — Cloud, Local, and Self-hosted modes; eight common session tools, plus Local feedback rounds | No — copies a prompt to the clipboard; you paste it into Claude Code, Cursor, Codex or Windsurf |
| Persistent change history (Changes tab) | Yes — searchable, filterable, exportable | Per-review list of collected edits in chrome.storage.local; cleared on uninstall |
| Open source | Yes (MIT) | Not stated on the site; Chrome Web Store listing only |
| Price | Free MIT-licensed extension | Free, no account (made by Usercall) |
| Markdown / JSON export of the diff | Yes | Prompt text only (copy all) |
| Best fit for | Designers, developers, QA, PMs, content, indie hackers, agencies, vibe coders | Developers reviewing a running app in Chrome who paste into an agent |
When to pick Design Mode
- You want to try the change on the page first and hand over the exact value, not a sentence the agent has to interpret.
- You work in Firefox or Safari — EditUI is Chrome-only.
- You want the agent connected live over MCP (Cloud, Local or Self-hosted) instead of a copy-paste round trip.
- You want a searchable Changes tab and Markdown/JSON export of everything you touched.
When to pick EditUI
- You prefer writing the instruction ('make this secondary') and letting the agent decide the implementation.
- You want zero setup: no MCP config, no companion process, just copy and paste.
- Your review is mostly non-visual (behaviour, content, structure) where a typed note is the natural unit.
Honest take
EditUI's copy-everything prompt is well designed: element, text, DOM, classes, parent, neighbours, URL, viewport and computed styles. If your agent is good at turning 'tighten this spacing' into code, the copy-paste loop is fine. Design Mode's case is precision and reach: you record 16px → 12px rather than 'tighter', the agent gets it over MCP without a paste, and the same workflow runs in Firefox and Safari.
Sources and scope
Sources checked 11 October 2026. Documentation review of the EditUI homepage, Chrome extension page and FAQ, plus the 4 October 2026 Show HN post. The extension was not installed and no agent round-trip was tested. Capability claims are vendor-documented, not independently runtime-verified.