Skip to content
DIVE is also available forFirefoxand Safari(coming soon)
All use cases

Cursor users

Visual editing with Cursor

Cursor's built-in design mode lives inside the editor. DIVE is a browser extension that edits the actual rendered page. Use them together when you want live layout, fonts, and states in the browser, then ask Cursor to implement only the scoped change in the repo you already opened. Cursor does not commit automatically.

The problem

Cursor's chat is text-first. Describing a hover state, a gradient, or a kerning tweak in prose is slow and imprecise. Pasting screenshots works for big changes but falls apart at the pixel level. Cursor's editor-native design surface is also not the live rendered page.

The workflow

  1. 1

    Point Cursor at DIVE

    Add the Cloud or Local snippet from /mcp into ~/.cursor/mcp.json. Restart Cursor.

  2. 2

    Edit the page in the browser

    Open the DIVE side panel on a scriptable page such as your dev server. Make the visual change with sliders and pickers. Browser-protected pages are out of scope.

  3. 3

    Ask Cursor to implement, then review

    From a Cursor chat, ask the agent to apply only the latest DIVE changes in the current repository. It can call get_changes over MCP and write CSS where it has access. Review the source diff before you commit.

The outcome

DIVE specifies the visual change on the rendered page; Cursor implements it only where it has repository access. You review and commit. The two surfaces can coexist: editor-native for in-Cursor work, the extension for the live page.