Question 1

What is Design Mode?

Accepted Answer

Design Mode is a free, open-source browser extension for Chrome, Firefox and Safari. It lets you edit a webpage visually, records the exact changes, and hands them to a coding agent. The browser edit is a preview; the agent updates source code in a repository it can access.

Question 2

Does Design Mode change my production source code?

Accepted Answer

No. It only changes what you see in your browser and records those changes. You can copy the notes or send them to a coding agent. The agent still needs access to your project and must make the real code change.

Question 3

Which browsers are supported?

Accepted Answer

Design Mode works in Chrome, Firefox and Safari. Features differ a little between them; the browser support and install guides have the details. Chrome and Firefox work right away: install it from the Chrome Web Store or Firefox Add-ons. Safari needs a quick manual setup that takes under 30 seconds.

Question 4

How do I communicate visual changes to Claude Code or another coding agent?

Accepted Answer

Use Copy as Prompt when you want a portable Markdown specification that you can paste anywhere. Use Send to Agent when your coding agent is connected through Design Mode's MCP server. In both cases, review the agent's source diff and the rendered result before shipping.

Question 5

What is the difference between Cloud, Local and Self-hosted?

Accepted Answer

They are three ways to pass your changes to your AI assistant. Cloud is the easiest. Your changes travel through our secure online service, and nothing connects until you turn it on. Local keeps everything on your own computer. Self-hosted is for teams that want to run that service themselves.

Question 6

What data leaves my machine by default?

Accepted Answer

Release builds of the extension send bounded feature usage events to PostHog with a random installation ID so we can see which features work and which fail — never page URLs, text, selectors, comments or screenshots. A fresh install selects Cloud mode for MCP but does not contact the relay until you create a Cloud credential. The marketing website may load Google Analytics when its deployment ID is configured. See the privacy page for full storage, relay and analytics details.

Question 7

Is Design Mode free and open source?

Accepted Answer

The extension and repository are published under the MIT licence and the current store listings are free to install. MIT permits commercial use, modification and redistribution subject to its licence notice. Future hosting or service policy should be judged from the terms published at that time rather than a promise that can never change.

The visual editor forall youragent's work

Show your agent what needs to change.

Design Mode

Your coding agent

Every design control, in one side panel

Sidepanel

Questions before you install

Start in your browser.
Take the details wherever you work.

Add to your browser

Keep your changes portable

Copy a prompt, not a guess

Connect through MCP

Less explaining.
More making.

The visual editor forall youragent's work

Show your agent what needs to change.

Design Mode

Your coding agent

Every design control, in one side panel

Sidepanel

01Sidepanel

02Header

03Action bar

04Layers

05Design

06Changes

07Footer