Skip to content
Design Mode
Add to Chrome

Design Mode is also available for Firefox and Safari.

Designers

Redesign any website

Most design tools want you to start in a file. Design Mode lets you start on a rendered page the extension can script — your site, a staging URL, or another scriptable page — and redesign it visually in your browser. It does not bypass browser protections, and the preview is not a source change.

The problem

Recreating a real page in Figma so you can iterate on it is enormous setup cost. By the time the mock is ready, the live page has changed. Iteration in a mock that doesn't match production means decisions that don't translate.

The workflow

  1. Step 1

    Open the page

    Browse to a localhost, staging, or production URL the extension can script. Open the Design Mode side panel.

  2. Step 2

    Click anything; edit anything

    Typography, colour, layout, spacing, motion, effects, copy, DOM. Every input is a real control — not a CSS textarea.

  3. Step 3

    Compare before / after

    Use the screenshot button to capture before, make your edits, capture after.

  4. Step 4

    Export the spec

    Hand a structured diff to engineering, or to a coding agent that has separate repository access. Someone still reviews the source change.

The outcome

You designed on the rendered page. Shipping still requires a source change; the browser preview is not production.

Try the live demoSet up your AI agent

Continue this workflow

Design review in production

Design reviews on staging always end the same way: a Loom recording, a Notion doc full of screenshots, and engineering scrambling to interpret ambiguous arrows.

Tailwind component tuning

Tailwind makes building UI fast and tuning it slow — once you have utility classes, you're guessing at numeric increments.

Landing-page iteration for indie hackers

If you're a solo founder, the landing page is your conversion funnel and your weekend project.