Skip to content
Design Mode

Design Mode is also available for Firefox and Safari.

Privacy

Design Mode runs in your browser. Release builds send usage analytics without page content. Here is what else can leave your machine, when, and why.

The short version

Design Mode edits the page rendered in your browser and records a local change session. Release builds send usage analytics to PostHog without an opt-in and without a Settings off-switch. An unconfigured source build sends nothing. Events do not include page content or edits. A fresh install selects Cloud mode, but it does not contact the hosted relay until you choose Connect to Cloud and create an anonymous device credential.

When you deliberately send changes to Claude, Cursor or another coding agent, that provider processes the content under your account settings and its own privacy terms.

What the extension stores

Design Mode extension storage
StorageContentsLifetime
storage.local

Interface preferences, including Chrome launch and floating-window preferences, shortcuts, comments, MCP mode, relay URL and the plaintext Cloud credential

Until you clear it or uninstall the extension
storage.syncPresets you explicitly save

Synced through your browser account, subject to browser quotas and settings

storage.session when available

Per-URL style, text and DOM change sessions

Browser session; survives reloads but not a full browser restart

storage.local fallback

Per-URL style, text and DOM change sessions when storage.session is unavailable. The choice is based on the storage API, not the browser name.

Until cleared, overwritten or the extension is removed

A session key is based on the page origin, path and query string. Comments are stored separately in local extension storage. Use the Changes tab to inspect, revert or clear recorded changes.

Design Mode reads the rendered DOM, computed styles and geometry required for features you invoke. It cannot run on browser-internal pages, extension-store pages or other surfaces where the browser blocks extension scripts. Do not use it to capture passwords, private form data, confidential screenshots or content you are not authorised to share.

Component-grouped change review also performs a bounded, read-only probe for React or Vue component names and source-file hints attached to changed elements. These hints are used in the local review interface. Markdown export can include detected file and line pointers, so a copied prompt can disclose them. The structured MCP get_changes and Send report does not add that grouping context. Production pages may omit source metadata. The grouping choice is kept only in panel memory.

When network traffic starts

No MCP connection

On a fresh install, Cloud is the selected mode but no Cloud credential exists. Design Mode leaves all MCP transports closed until you connect one. Copy as Prompt continues to work without MCP.

Normal webpage and browser actions can still make requests—for example, loading the page you opened or downloading media from a URL already present in that page. Those are browser requests to the referenced site, not uploads to Design Mode.

Local mode

Local mode connects the extension to the companion server on your machine over the token-authenticated ws://127.0.0.1:9960 connection by default. Design Mode does not route that transport through its hosted relay.

The optional guided Local setup previews project configuration before writing only the files you confirm. Backups stay beside those files and may contain credentials belonging to other tools, so they should not be committed. The doctor command probes only the configured localhost bridge. Local feedback round snapshots and session state stay in process memory.

Cloud mode

Choosing Connect to Cloud registers an anonymous device credential and opens an authenticated connection to https://mcp.designmode.app. The extension keeps the plaintext credential in storage.local. The service stores only its SHA-256 hash, an anonymous tenant identifier, and created/last-seen timestamps until the credential is revoked.

Agent-to-extension requests and extension responses are temporarily queued in Redis. The implementation requests a 60-second expiry and normally deletes responses as soon as they are consumed. Queue insertion and expiry are separate operations, and expiry failure is suppressed, so 60 seconds is a best-effort target rather than a guaranteed maximum. The relay also keeps operational quota and presence state needed to operate the service.

Structured service logs may include:

  • anonymous tenant identifier;
  • message or event type;
  • payload byte count;
  • latency and HTTP status;
  • bounded error codes or messages.

The logging API does not accept selectors, screenshots or message payload bodies. Design Mode does not use relay traffic to train a model.

Self-hosted mode

Self-hosted mode points the extension at a deployment you operate. Its retention, logging and access controls are your responsibility. The repository implementation uses the same short-lived queue design as the hosted relay, but your deployed configuration is authoritative.

Screenshots and agent hand-off

Screenshots are captured by the browser. Clipboard and download actions stay on your machine. A screenshot leaves the machine only when you explicitly use an MCP action that returns it to a connected agent. The agent provider then handles it under that provider's terms.

Copy as Prompt writes a Markdown specification to your clipboard. Send to Agent makes the recorded changes available to a connected MCP client. Neither action grants Design Mode access to your repository; the coding agent must already have that access.

Usage analytics

Design Mode is free and MIT-licensed, with no paid version of the extension. It is a self-sustained project focused on features people regularly use. Release builds send usage analytics to PostHog without an opt-in and without a Settings off-switch. An unconfigured source build sends nothing. Analytics does not change what the editor can do. Coding-agent subscriptions, API usage and self-hosting costs are separate.

To measure active installations (DAU/WAU/MAU), retention and feature adoption, the extension generates a persistent random UUID stored in storage.local (dm-analytics-distinct-id) and enables PostHog person profiles ($process_person_profile: true) and IP-based GeoIP enrichment ($geoip_disable: false). The event payload includes the browser package (chrome, firefox or safari), extension version, distribution hint, validated language, timezone and navigator.userAgent ($raw_user_agent), while omitting page URLs, selectors, edits, comments, text, tokens and screenshots. This source does not verify the receiver's retention, deletion or billing settings. The marketing site is a separate project and is not included in these extension events.

What designmode.app collects

The marketing and documentation site is separate from the extension.

  • Inter is fetched by the build system and self-hosted by Next.js; visiting the deployed site does not request it from Google Fonts.
  • Google Analytics is rendered only when the deployment defines NEXT_PUBLIC_GA_ID.
  • When enabled, the site sends page views plus cta_click, contact_click and outbound_click events. CTA events include the store and browser label; contact events include the clicked mailto: or tel: target; outbound events include the destination URL and link text. The repository does not configure a custom user ID or send extension edits or MCP payloads.

Google processes Analytics traffic under its own terms. A content or tracker blocker may prevent the script from loading without blocking the core site.

Browser permissions

The extension requests:

  • activeTab and tabs to open the editor against the current tab and respond to navigation;
  • scripting to inject the inspector after you invoke the extension;
  • storage for the data described above;
  • sidePanel on Chromium or Firefox's sidebar integration for the editor;
  • broad host access so the editor can run on sites you choose, except protected browser surfaces.

The extension does not modify a page until you invoke it on that tab.

Revoking or deleting data

  • Clear a change session from the Changes tab.
  • Remove saved presets or comments in the extension.
  • Revoke the Cloud credential from the MCP settings page before deleting it locally if you want the server-side token hash removed.
  • Uninstall the extension to remove its browser-managed local storage.

For a security concern, follow the private disclosure process linked below rather than posting credentials or exploit details publicly.

Reporting concerns

If you find behavior that contradicts the above, please open an issue or follow the disclosure process in SECURITY.md.