Visual editing with Cursor

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.

The workflow

1. Step 1

   Point Cursor at Design Mode

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

2. Step 2

   Edit the page in the browser

   Open the Design Mode side panel on your dev server. Make the visual change with sliders and pickers.

3. Step 3

   Pull the diff into Cursor

   From a Cursor chat, ask the agent to apply the latest design changes. It calls get_changes over MCP, reads the structured diff, and writes the CSS in your repo.

The outcome

Design intent gets to code in one round instead of three. Cursor stays focused on what it's good at — writing the change — while Design Mode handles the visual specification.