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. Cursor's editor-native design surface is also not the live rendered page.

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 a scriptable page such as your dev server. Make the visual change with sliders and pickers. Browser-protected pages are out of scope.

3. Step 3

   Ask Cursor to implement, then review

   From a Cursor chat, ask the agent to apply only the latest Design Mode 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

Design Mode 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.