Question 1

What is Design Mode?

Accepted Answer

Design Mode is a free, open-source Chrome extension that turns any live website into a visual design surface. Click any element on any page and edit its layout, typography, colour, spacing, copy, or DOM with real controls — then ship the diff to your AI coding agent over Model Context Protocol (MCP). One design tool for designers, developers, QA testers, PMs, indie hackers, and vibe coders.

Question 2

Who is Design Mode for?

Accepted Answer

Designers (edit on the live product, not a drifted mockup), design engineers (own the loop from sketch to PR), frontend developers and vibe coders (visually iterate, then have the agent commit the code), QA / UI testers (export visual bugs with full developer context), product managers (file precise bug reports), content / marketing teams (fix microcopy without a Figma round-trip), indie hackers and solo founders (iterate on their own landing page with an AI agent in the loop), agencies (hand engineering a precise spec), and design-system maintainers (audit token drift on the deployed app).

Question 3

How is Design Mode different from Chrome DevTools?

Accepted Answer

Chrome DevTools is a developer inspector — edits don't persist across reloads, there's no design surface (sliders, colour pickers, motion controls, contrast checker), and there's no handoff to an AI agent. Design Mode is design-intent-first: persistent change history, real visual controls, and one-click ship-to-agent over MCP.

Question 4

Is Design Mode for designers or developers?

Accepted Answer

Both. The shared surface is: edit the live page visually, ship a precise diff to whoever (or whatever AI agent) writes the code.

Question 5

How do I install it?

Accepted Answer

Open the Chrome Web Store listing, click Add to Chrome, pin the side panel. Open any web page and click the toolbar icon to open the panel. No account required. Detailed steps: /docs/install.

Question 6

Which browsers does it work in?

Accepted Answer

Any Chromium-based browser that supports Manifest V3 side panels — Chrome, Edge, Arc, Brave. Firefox is not supported today. Safari is out of scope (no MV3 side-panel API). Desktop-only.

Question 7

Is it really free?

Accepted Answer

Yes — free forever, MIT-licensed, no accounts, no paywalls, no trial, no telemetry by default. If you find it useful, the in-panel Contribute panel has optional ways to help (star the repo, share, sponsor).

Question 8

Will it always be free?

Accepted Answer

The extension is MIT-licensed, so even if the maintainer disappears tomorrow, the source stays free. There are no plans to add a paid tier to the extension itself.

Question 9

Can I use Design Mode commercially?

Accepted Answer

Yes — MIT permits commercial use without restriction. Use it at work, on client projects, inside an agency, etc.

Question 10

What is MCP (Model Context Protocol)?

Accepted Answer

MCP is Anthropic's open standard that lets AI agents safely call external tools. Design Mode exposes eight MCP tools so your agent can read every edit you made (get_changes), push patches back to the page (apply_changes), mark changes to-do/in-progress/resolved as it works (set_change_status), wipe the buffer between iterations (clear_changes), get a high-level summary (get_session_summary), export markdown (export_changes), grab a screenshot of the current page state (get_screenshot), and mark your pinned comments resolved (mark_comment_resolved).

Question 11

Which AI coding agents does Design Mode work with?

Accepted Answer

Anything that speaks MCP — Claude Desktop, Claude Code, Cursor, Windsurf, Cline, Continue, Zed, VS Code with the MCP extension, and any custom MCP client. Setup snippets live at /mcp.

Question 12

Does Design Mode work with Claude Code?

Accepted Answer

Yes. Claude Code reads MCP servers from your project's .claude/settings.json under "mcpServers". Paste the Cloud or Local snippet from /mcp, restart Claude Code, and the six Design Mode tools become available.

Question 13

Does Design Mode work with Cursor?

Accepted Answer

Yes. Cursor reads MCP servers from ~/.cursor/mcp.json (or the per-project equivalent). The /mcp page has the exact JSON for Cloud, Local, and Self-hosted modes.

Question 14

Does Design Mode work with Windsurf, Cline, Continue, or Zed?

Accepted Answer

Yes — all four are MCP-aware. The JSON shape varies slightly per tool, but the URL + bearer token (or stdio + npx) blocks from /mcp apply directly.

Question 15

What's the difference between Cloud, Local, and Self-hosted modes?

Accepted Answer

Cloud is the no-install default — your agent connects to mcp.designmode.app over HTTPS with a bearer token. Local runs a companion MCP server on your laptop with zero network egress and the lowest latency. Self-hosted is the same Cloud relay code (packages/mcp-cloud) deployed on your own Node.js + Redis infrastructure — Vercel, Railway, Fly, your own VM.

Question 16

Do I have to run a local server?

Accepted Answer

No. Cloud mode is the default and requires no local install. Local mode is opt-in for power users.

Question 17

Can I self-host the relay?

Accepted Answer

Yes — packages/mcp-cloud in the repo deploys to any Node.js host with Redis. Point the extension at your URL, issue your own bearer tokens, done.

Question 18

What data leaves my machine by default?

Accepted Answer

Nothing. The extension stores edits in chrome.storage locally. The Cloud relay is opt-in. Local mode never makes outbound calls. Full disclosure: /privacy.

Question 19

Does Design Mode train on my edits?

Accepted Answer

No. There is no telemetry by default. The Cloud relay does not persist payloads, does not log edit contents, and nothing about your edits is used to train any model — by Design Mode or by any third party.

Question 20

How long does the Cloud relay keep my data?

Accepted Answer

Payload bodies are dropped within roughly 60 seconds — they're transient pass-through, not storage. Token + connection metadata is hashed and logged for abuse prevention only.

Question 21

Where do I report a security issue?

Accepted Answer

Email hello@sandeepbaskaran.com (not a public issue). SECURITY.md in the repo has the disclosure flow.

Question 22

Design Mode vs Stagewise?

Accepted Answer

Both target the AI-coding-agent loop. Design Mode is MIT-licensed with a hosted Cloud relay you don't have to run, ships a broader design control set (motion, effects, variants, contrast checker), and includes persistent change history out of the box. Full comparison: /compare/design-mode-vs-stagewise.

Question 23

Design Mode vs Figma Dev Mode?

Accepted Answer

Figma Dev Mode reads a static design file; Design Mode edits the live deployed page. Pair them: design in Figma, refine on the rendered page in Design Mode. Full comparison: /compare/design-mode-vs-figma-dev-mode.

Question 24

Design Mode vs Builder.io Visual Copilot or Locofy?

Accepted Answer

Those tools generate code from a Figma file. Design Mode goes the other direction: tweak the live page, hand the agent precise CSS deltas. Different problem, different fit.

Question 25

Design Mode vs VisBug?

Accepted Answer

VisBug edits the live page but has no agent / MCP handoff, no persistent change history, and a narrower design control set.

Question 26

Can I use Design Mode for UI testing and bug reports?

Accepted Answer

Yes — QA testers and designers walk a staging URL, annotate broken layout / contrast / copy / spacing, and export the structured diff (selector → property → value) into Linear, GitHub, or Jira. Developers see the exact change to make, not a vague screenshot. See /use-cases/ui-testing-export-to-developers.

Question 27

Can content people use it to fix microcopy without a PR?

Accepted Answer

Yes. Edit the copy in the live page, export the diff, send it to engineering. No Figma round-trip, no Slack screenshot. See /use-cases/copy-edits-without-a-pr.

Question 28

Can I do accessibility audits with it?

Accepted Answer

Yes. The colour picker has a WCAG contrast checker, you can bump text sizes visually, and you can fix focus states with the inspector. Export the diff for the a11y backlog. See /use-cases/accessibility-quick-fixes.

Question 29

Can I contribute?

Accepted Answer

Yes. CONTRIBUTING.md in the repo has the contributor flow. Easy first issues are tagged on GitHub; bigger changes start in a Discussion or a draft PR.

Question 30

How do I report a bug?

Accepted Answer

Open the Help panel inside the extension (? icon in the side-panel header) → click Copy diagnostics → file an issue on GitHub with the pasted diagnostics, repro steps, and what you expected.

Question 31

Where do I get troubleshooting help?

Accepted Answer

/docs/troubleshooting covers the most common issues (panel won't open, MCP not connecting, edits not persisting). GitHub Discussions is the place for everything else.

Frequently asked questions

Getting started

Pricing & licence

MCP & AI coding agents

Privacy & security

Comparisons

Workflows

Contributing & support

Related

MCP setup

Use cases

Comparisons

Docs

Privacy

Blog