Cursor 3.7 Design Mode: Point, Talk, and Ship UI

Cursor 3.7 shipped June 5 with an upgrade that makes text-description UI editing look like the wrong tool for the job. You can now select multiple DOM elements simultaneously in the browser, give the agent spatial context on their relationship, and queue the next voice instruction before the current agent finishes running. The reference gap — the one that causes most wasted UI iterations — is finally closed.

The Problem With Describing UI in Text

When you type “make the hero button bigger,” the agent has to guess which button you mean, on which breakpoint, in which component. In a real codebase with a dozen similar elements, that guess is where iterations go to die. You spend three rounds clarifying what you already knew the moment you looked at the screen.

Design Mode exists to fix this, and it’s been getting sharper with each release. When you select an element, Cursor sends two signals to the agent: the element’s identity (xpath, component reference, computed styles, props from the React fiber tree) and a screenshot for spatial context (the layout, surrounding elements, the exact page state). The agent isn’t guessing anymore. It knows what you’re pointing at.

What’s New in 3.7: Multi-Element Selection

The headline addition is multi-element selection. Click two elements in the browser, and the agent receives not just two references — it receives their relationship. How they sit relative to each other in the layout. Their respective computed styles. Their visual proximity. You can then ask it to make one match the other, remove repeated content, or adjust a group of components at once without writing a single description of which elements you mean.

This is more useful than it sounds. Consistent spacing between a list of cards, matching a button style across sections, stripping duplicated subheadings from a component that got copy-pasted three times — tasks that used to require careful text description now just require pointing.

Voice Queuing While the Agent Runs

The second change is subtler but changes the feel of the workflow considerably. Previous versions of Design Mode had voice input, but it was blocking — you spoke, you waited, you spoke again. In 3.7, the microphone stays active while an agent is mid-run. You can queue the next instruction before the current one finishes.

Say you’ve selected a hero section and described a spacing adjustment. While the agent is editing, you can already say “now center that nav link” or “add a hover state to the CTA.” The next instruction is queued. The iteration loop stops feeling like a turntable and starts feeling like an actual conversation — the natural pace of thinking about UI rather than the mechanical pace of submitting prompts.

SDK Updates: Custom Tools, Auto-Review, Nested Subagents

Cursor 3.7 also ships SDK changes for developers building programmatic agents. Three updates worth noting:

Custom tools — Pass your own function definitions through local.customTools when creating an agent. The SDK exposes them via a built-in MCP server called custom-user-tools, so the model calls your code through the same permission gate as any other MCP tool. Custom tools inherit to every subagent automatically.

const agent = await Agent.create({
  local: {
    customTools: [
      {
        name: "run_tests",
        description: "Run the test suite and return results",
        execute: async (args) => runTests(args.pattern),
      }
    ],
    autoReview: true,
  }
});

Auto-review routing — Set local.autoReview to route headless tool calls through a classifier subagent. It decides whether to allow the call, try a different approach, or escalate for approval. Useful for production pipelines where you want oversight without blocking on every shell command.

Nested subagents — Subagents can now spawn their own subagents. A reviewer subagent can delegate to a test-writer, which can delegate further. Each level keeps its own prompt and model. If you’ve been building programmatic agents with the Cursor SDK, this one matters.

The Honest Limitations

Design Mode is not Figma and it shouldn’t pretend to be. A few things that still don’t work the way you’d expect:

• Multi-select works at the DOM element level, not the component level. You can’t Shift-click three React buttons and change their padding simultaneously
• Undo (Cmd+Z) behavior is inconsistent — in some flows you have to revert the underlying code change rather than undo the last voice instruction
• It doesn’t solve the team collaboration gap. If your workflow depends on Figma for shared design systems, Design Mode doesn’t replace that

The sweet spot is solo developers who design and code — vibe coders, fullstack engineers, solo builders iterating fast on frontend UI. For those workflows, 3.7 noticeably reduces the back-and-forth. For design teams that need a shared source of truth, Figma is still the answer.

Where This Puts Cursor

No other major AI coding tool — not GitHub Copilot, not Windsurf — has visual element selection. This remains a Cursor exclusive. The 3.7 additions make it meaningfully more useful: multi-element selection changes what you can accomplish in one instruction, and non-blocking voice input changes the pace at which you can issue them.

The full Cursor 3.7 Design Mode changelog is worth reading if you’re evaluating the feature in depth. For the agent orchestration story that powers this under the hood, the official Design Mode blog post has the technical detail on how element identity and spatial context get passed to the model.

If you’re already on Cursor, update and try it on a component-heavy UI. If you’re not on Cursor, this is the feature hardest to replicate with a text-only interface — and the one most likely to change your mind about switching. We covered the foundation this builds on in our earlier post on Cursor 3’s Agents Window and the 3.6 Auto-review update.