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. The side panel opens with the design surface (on Firefox this is the native sidebar; Alt+D toggles it on any browser).

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 13 shortcuts that work directly on the page while the side panel is open, plus one browser-level shortcut that opens the panel itself — 14 in total.

Troubleshooting

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