Design Mode
Add to Chrome

Changelog

Every Design Mode feature in plain language, with the date it shipped — so you always know what you can do, and since when.

Want the technical detail? Full CHANGELOG on GitHub

  1. v2.1.0

    Corner shapes and responsive-aware edits.

    • Corner shape — round your corners into a squircle (the smooth iOS look), a bevel, a scoop, or a notch, straight from a dropdown next to corner radius. No more settling for plain rounding.
    • Responsive tags on edits — every change remembers the screen size you made it at (mobile, tablet, or desktop) and labels it, so responsive tweaks are obvious and your AI agent knows to wrap them in the right media query.
    • A tidier Design panel — sections that don't apply to what you selected (no stroke, no effects, no fill) now fold away, so you only see the controls that matter.
    • A friendly heads-up when your browser's device preview turns hovering off, with a one-tap way to keep working.
    • Polish: cleaner corner-radius values, and copy / download buttons that confirm with a checkmark.

  2. v2.0.0

    Firefox support and snap-to-align.

    • Firefox support — Design Mode now runs in Firefox as well as Chrome-based browsers, from the same extension.
    • Snap-to-align while dragging — move an element and it snaps into line with its neighbours, with magenta guides just like Slides, Keynote, or Figma.
    • A simpler color picker — opens to the essentials (swatch, hex, eyedropper) with the full color wheel one click away.
    • A refreshed dark theme, plus a batch of reliability fixes (undo/redo, Escape back to hover, multi-select).

  3. v1.9.0

    Design-system aware, with visual motion.

    • Design-system aware — Design Mode finds the design tokens on a page (colors, spacing, type), even themed ones, labels the system (Carbon, Material, MUI, Bootstrap, Polaris, Radix, shadcn/ui, Tailwind), and lets you swap or edit a token once to update everything that uses it.
    • Motion made visual — add hover, press, focus, appear, loop, or scroll animations from ready-made presets, each with a live preview.
    • A smoother hand-off to your coding agent — a dedicated MCP page and a step-by-step Send-to-Agent flow.

  4. v1.8.0

    Float the panel, edit local files.

    • Pin on top — float the panel above everything as an always-on-top window while you work in another app.
    • Edit local files — open an HTML file straight from your computer and edit it just like a live site.
    • A custom page cursor, and per-page edit sessions that stick around when you come back.

  5. v1.7.1

    Polish and fixes.

    • Auto gap no longer disturbs how children line up, plus small website touch-ups.

  6. v1.7.0

    Region comments and a pop-out panel.

    • Region comments — draw a box anywhere on the page to leave feedback on an area, not just a single element.
    • Pop-out window — detach the side panel into a floating window you can move around.
    • Real spacing controls — dedicated Margin and Padding rows, fixed or auto gap, and adjustable nudge steps.
    • A shortcuts popover and cleaner screenshots.

  7. v1.6.0

    Tokens panel and Copy as Prompt.

    • Design-system / Tokens panel — a home for your saved styles and the page's design tokens.
    • Copy as Prompt — export every change you've made as a clean, ready-to-paste brief for your AI coding agent.

  8. v1.5.0

    Spacing overlays and a contrast checker.

    • See spacing at a glance — margin and padding render as coloured bands on the element.
    • A WCAG contrast checker built right into the color picker.
    • Configurable inspector overlay colors, and file size shown for images and media.

  9. v1.4.0

    Measure, resize, and move on the page.

    • Measure & resize — VisBug-style measurement guides, eight drag handles to resize, drag-to-move, and shift-click to select several elements at once, all on the live page.

  10. v1.3.0

    Live agent presence.

    • The panel now shows when your coding agent is actually connected, so you know Send-to-Agent is ready.
    • Cloud MCP became the default for fresh installs — no local setup required to start.

  11. v1.2.0

    Contribute panel.

    • A Contribute panel in the extension, plus canonical-URL and diagnostics polish.

  12. v1.1.0

    In-panel Help and quick tab switching.

    • An in-panel Help view, and Alt+1 / Alt+2 / Alt+3 to jump between the Design, Layers, and Changes tabs.

  13. v1.0.2

    Stroke, Effects, Motion, and Layout guides.

    • A big Design-tab expansion — Stroke, Effects (including Noise and Texture), Motion, and Layout-guide sections, plus reusable style presets so you can save a look and reapply it.

  14. v1.0.1

    First public release.

    • The first public release — inspect any element on any live website and edit its layout, type, colour, and spacing with real visual controls, then ship the diff to your AI coding agent.

Design Mode is free and open source. Try it yourself or browse the full feature set.