Add to ChromeHow they compare
Both turn visual feedback into work for an AI coding agent. Drawbridge is annotate-and-queue: you comment or draw a box, it writes screenshots + `.moat/` task files into one connected project directory, and the agent reads them via a `/bridge` command. Design Mode is a live two-way loop: you edit the page directly (or pin element/region comments), and the agent pulls the diff over MCP and pushes changes back — then marks your comments resolved.
Feature-by-feature
| Feature | Design Mode | Drawbridge |
|---|---|---|
| Visual editing of any live website | Yes — full design surface (typography, colour, layout, spacing, motion, effects) | Annotate only — comment pins + freeform rectangles, no live editing |
| MCP (Model Context Protocol) handoff to AI agents | Yes — Cloud, Local, and Self-hosted modes; eight MCP tools | No — writes .moat/ task files via the File System Access API |
| Persistent change history (Changes tab) | Yes — searchable, filterable, exportable | Task files (to do / doing / done) in the connected folder |
| Open source | Yes (MIT) | Check current licence |
| Price | Free forever | Check current pricing |
| Markdown / JSON export of the diff | Yes | Markdown + JSON task files |
| Best fit for | Designers, developers, QA, PMs, content, indie hackers, agencies, vibe coders | Annotate-and-queue for AI coding agents |
When to pick Design Mode
- You run multiple agents or git worktrees at once — Design Mode's MCP attaches per session with no folder binding, so nothing pins you to a single directory or risks writing tasks into the wrong tree.
- You want to actually edit the design (typography, colour, layout, motion, effects), not just describe the change.
- You want the loop to close: the agent applies changes to the live page and marks your comments resolved (mark_comment_resolved), instead of a one-way file drop.
- You want a persistent, searchable Changes history and CSS / Tailwind / SCSS / JSX export.
- You'd rather not grant a browser persistent write access to your project folder.
When to pick Drawbridge
- You never run the MCP companion and want a zero-server flow — Drawbridge writes plain files an agent reads on its own.
- You want annotations checked into git as `.moat/` task files for an async, review-later workflow.
- Drawbridge's `/bridge` step/batch/yolo command already fits your team's habits.
Honest take
Drawbridge is a clean, focused tool, and its no-server file handoff is genuinely simpler if you never run a companion: annotations land as git-friendly task files an agent reads on its own. The trade-off is the folder binding — it persists one project directory handle, which gets awkward when you're juggling parallel agents or worktrees, and it captures intent rather than letting you make the change. Design Mode deliberately skipped file handoff for exactly that reason and leans on a live MCP connection instead. If you want async, checked-in task files, Drawbridge fits; if you want to edit directly and close the loop live across many sessions, Design Mode does.