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

Browser extension · Chrome & Firefox

Edit the real page.Ship the real code.

DIVE turns your localhost or live site into an edit mode. Restyle anything, pin notes, grab screenshots and check accessibility, then send it all to Claude Code, Codex or any MCP agent as exact code changes.

DIVE MCP

h1 › em.headline-accent

Color#1C1C1C
Letter spacing-0.02em
Font styleitalic
Note Shot Send
claude · ~/acme-web
  • ● dive.get_changes()
  • 3 edits · 1 note · 1 screenshot
  • app/page.tsx
  • - <em className="text-ink">
  • + <em className="text-redline">
  • - tracking-tight
  • + tracking-[-0.045em]
  • ✓ Applied. Ready for review.
  • Waiting for changes…

Hands off to the agents your team already uses

  • Claude Code
  • Codex
  • Cursor
  • Windsurf
  • GitHub Copilot
  • Gemini CLI
  • Cline
  • Zed

Everything you change,captured exactly

  • radius 6pxfill #171717

    Visual editing

    Layout, type, colour, spacing and effects with real design controls.

  • localhost:3000

    Local or live

    Your dev server, staging or production. Nothing is written to the server.

  • !

    Contrast 2.8:1 · needs 4.5:1

    Accessibility check

    Contrast, alt text, tap targets and focus, pinned with the fix.

  • 12Use the brand red here

    Annotations

    Drop a note on any element so the agent knows what you meant.

  • shot-01.png

    Screenshots

    Capture the page or one component. It travels with your edits.

  • Restyled h1
    Note on button.cta
    Fixed contrast on p.lead

    Change history

    Every edit with before and after. Revert one, export them all.

A shared picture. A precise handoff.

Show your agent what needs to change.

Make visual edits on the live page. DIVE captures the details so your coding agent can work from the changes, not a description of them.

Your browser

DIVE

Select an element. Adjust the design. Record exactly what changed.

  • h1 › color: #1C1C1C → #CA0000
  • button.cta › height: 32px → 44px
  • note: Make this pop on mobile
Your coding agent

Your coding agent

Reads the captured changes and updates the source in your project.

  • dive.get_changes() → 3 changes
  • edit app/page.tsx
  • ✓ Ready for your review

Built for agents,not for describing designs in chat

ClaudeCodexConnect once. Your agent reads exactly what you changed.

Connect your agent

.mcp.json

{
  "mcpServers": {
    "design-mode": {
      "type": "http",
      "url": "https://mcp.dive.samsad.dev/mcp",
      "headers": {
        "Authorization": "Bearer ${DESIGN_MODE_TOKEN}"
      }
    }
  }
}

Works with any MCP client over the hosted relay, a local server or your own. Set DESIGN_MODE_TOKEN in your environment, never in a file or a chat. No MCP? Use Copy as prompt.

Set up your agent

Same page,with the details done

Before← Drag to compare →After DIVE
Start trial

Plans that grow with your team

Pick a plan, invite your teammates, and ship together.

Start trial

Plans that grow with your team

Pick a plan, invite your teammates, and ship together.

⟷

One file of changes,ready for review

  • Send to agent

    One click hands the change list to a connected agent over MCP.

  • Review like code

    Your agent writes a normal diff. You review it like any other change.

  • Ship it accessible

    Accessibility fixes ride along in the same change list.

Add to Chrome Firefox

Safari coming soon

FAQ

Good questions

  • A browser extension that turns any page into an edit mode. Restyle elements, pin notes, take screenshots and check accessibility, then hand the exact changes to your coding agent.