Install Design Mode

Design Mode is a free browser extension for Chrome and Firefox. Install once, open the side panel (sidebar on Firefox), open any page and start designing. No account, no setup wizard.

1. Install from your browser's store

On Chrome, Edge, Brave, Arc, or another Chromium browser, open the Chrome Web Store listing and click Add to Chrome. On Firefox, open the Firefox Add-ons (AMO) listing and click Add to Firefox.

2. Pin the extension

Click the puzzle-piece icon in the browser toolbar and pin Design Mode so the side panel is one click away.

3. Open any page and click the icon

Navigate to any URL — your dev server, a staging deploy, a production site — and click the Design Mode toolbar icon. Chrome opens the selected Launch surface (Side panel by default, Floating, or a Pin-on-top opener); Firefox opens the native sidebar. Alt+D follows the same choice.

4. (Optional) Set up MCP for AI agents

If you want to ship edits to Claude Code, Cursor, Claude Desktop, Windsurf, or Cline, follow the MCP setup guide. The default Cloud mode requires no local install.

Related docs

Browser support & parity

Design Mode runs on Chromium browsers (Chrome, Edge, Brave, Arc) and on Firefox 121+. Everything core is identical across browsers; a few extras depend on APIs that only Chromium ships, so they're hidden on Firefox.

MCP setup

Design Mode talks to AI coding agents over Model Context Protocol. You pick one of three connection modes (Cloud, Local, Self-hosted), paste the snippet, and restart your agent. Full snippets and the live mode comparison live on the /mcp page; this page links into it.

Keyboard shortcuts

Design Mode has 12 shortcuts that work directly on the page while the side panel is open, plus two browser-level commands for opening the panel and taking a screenshot — 14 in total.

Troubleshooting

Most issues fall into a handful of patterns. Here's the short list.