TL;DR: Cursor 3.7 (June 5, 2026) extends Design Mode into canvases, adds multi-element selection, keeps the voice mic live while the agent runs, and ships a Context Usage Report that shows where your tokens actually go. For frontend developers it’s the first version where pointing at the UI beats describing it in a prompt — but only if your component code is clean enough for the agent to trace.

	Design Mode (Cursor 3.7)	Plain chat prompting	Builder-style visual tools
Best for	Tweaking live React/Vue UI in context	Logic, refactors, multi-file edits	Designers who don’t touch code
How you target	Click, multi-select, draw, or speak	Describe in text	Drag-and-drop canvas
The catch	Needs traceable component code	You describe what the agent can’t see	Generated code is often throwaway

Honest take: If you build component-based frontends and already pay for Cursor Pro, 3.7 is a free upgrade that removes the single most annoying part of AI UI work — explaining which button. Turn it on. If your codebase is a pile of inline styles and copy-pasted divs, the agent still can’t find the source, and Design Mode won’t save you.

Cursor 3.7 landed on June 5, 2026, two days after Design Mode quietly extended to canvases on June 4. The headline features — Canvas Design Mode, multi-element selection, a persistent voice mic, and the new Context Usage Report — all point in one direction: closing the gap between what you see on screen and what the agent understands about your code. For frontend developers, that gap has always been the expensive part.

The problem Design Mode actually solves

Every AI UI session before this looked the same. You’d see a button with the wrong padding, switch to the chat panel, and type something like “the primary CTA button in the hero section is too cramped, add some vertical padding.” The agent would guess which file, guess which component, and roughly half the time edit the wrong one — because “the primary CTA button” is unambiguous to you and meaningless to a model that can’t see your screen.

Design Mode flips the direction. Instead of describing the element, you point at it. Cursor adds two complementary signals to the agent’s context when you select something: the element’s identity — its xpath, the React component, attributes, computed styles, and props pulled from the fiber tree — plus a screenshot for spatial context. That combination is what lets the agent find the exact source line instead of grepping for class names and hoping.

This isn’t brand new in 3.7 — Design Mode shipped earlier in the Cursor 3 line for the browser. What 3.7 changes is where it works and how fast you can drive it.

What’s new in 3.7, feature by feature

Design Mode in canvases

Before June 4, Design Mode only worked against a live browser preview. Now it works inside canvases too — the interactive artifacts Cursor agents generate. You select and annotate UI elements directly in a canvas to guide edits, exactly like you would in the browser. If you’ve been using canvases to prototype a component in isolation before wiring it into the app, you no longer have to drop back to text prompts to refine it. Point, annotate, iterate.

Multi-element selection

You can now click two or more elements together. The agent sees all of the selected elements, their code, the surrounding layout, and the visual relationships between them. This matters when the change depends on a relationship rather than a single element:

• Select two cards and ask the agent to make the second match the first’s spacing.
• Select a row of buttons and ask it to remove the duplicate and align the rest.
• Select a heading and its subtext and ask it to fix the vertical rhythm between them.

Single-element selection could never express “make these consistent” without a paragraph of description. Multi-select makes it a two-click instruction.

The voice mic stays live mid-run

This is the quietest feature and the one that changes pace the most. The mic now stays available while an agent is mid-run. You can point at a live UI element, speak the change, and queue the next change by voice before the agent finishes the current one. Across a sequence of small visual fixes — padding here, color there, alignment on a third element — you stop waiting for round trips. You narrate a punch list and let the agent work through it.

Context Usage Report

The non-design feature in this release, and arguably the more useful one long-term. Cursor can now render your agent’s context usage as an interactive report inside a canvas. The context explorer breaks down where tokens go: the system prompt, tool definitions, rules, skills, and the rest. Because it’s a canvas, you can ask the agent follow-up questions about its own context, and it can customize the report to answer them.

If you’ve ever wondered why a long agent session got slow, vague, or expensive, this is the diagnostic you’ve been missing. A bloated .cursorrules file or a stack of MCP tool definitions can eat thousands of tokens before the agent reads a single line of your code — and until now you had no way to see it.

Quality-of-life additions

Two smaller items round out the release: shared canvases can now open full-screen in the browser, which makes them genuinely presentable to teammates or stakeholders, and agents can embed buttons inside canvases that run a specific prompt when clicked. The second one turns a canvas from a static artifact into something closer to a tiny interactive runbook.

A realistic Design Mode workflow

Here’s how a frontend fix actually goes in 3.7. Say you’re on a Next.js + Tailwind project and the pricing cards are misaligned after a content change. You open the browser preview inside Cursor, enable Design Mode, and multi-select the three cards.

A typical session looks like this in the agent panel:

> [Design Mode] 3 elements selected: PricingCard ×3 (components/PricingCard.tsx)
  Voice: "make all three cards the same height and align the CTA buttons to the bottom"

Agent:
  Reading components/PricingCard.tsx
  The cards differ in height because feature lists vary in length.
  Applying flex column layout with mt-auto on the button wrapper.

  Edited components/PricingCard.tsx
    + <div className="flex flex-col h-full">
    + <button className="mt-auto ...">

  Done. All three cards now stretch to equal height; buttons pinned to bottom.

You never typed a file path, never described which cards, never explained the layout relationship. The selection carried all of it. That’s the whole pitch.

Where it breaks

Design Mode is only as good as the agent’s ability to trace a rendered element back to its source. That breaks down in predictable ways:

• Untraceable markup. If your UI is generated by a heavy abstraction layer, a no-code export, or deeply nested anonymous components, the fiber-tree props and xpath don’t map cleanly to an editable source line. The agent guesses, and you’re back to describing things.
• Inline-everything codebases. Pages built as one giant component with inline styles give the agent nothing to grab. It can edit, but it can’t isolate — and you’ll get collateral changes.
• Non-React/Vue stacks with thin component boundaries. The richer the component tree, the better Design Mode works. Server-rendered template soup is a weaker fit.
• Voice in open offices. The live mic is genuinely faster, but narrating UI changes at your desk is a social non-starter for a lot of people. It’s optional; just know the headline speed gain assumes you’ll actually talk to your editor.

None of these are Cursor bugs. They’re the cost of a feature that depends on your code being structured the way the agent expects.

Does this change the buy decision?

Not really, and that’s the honest answer. Design Mode and the Context Usage Report ship inside Cursor’s existing plans — Hobby at $0, Pro at $20/month, Pro+ at $60/month, and Ultra at $200/month, with Teams at $40/user/month. There’s no separate Design Mode tier. If you already pay for Pro, 3.7 is a free capability bump. If you’re on the free Hobby plan, you still get the features, capped by the usual usage limits.

What it does change is the daily experience for one specific job: iterating on component UI. If that’s most of your week, 3.7 makes Cursor meaningfully stickier versus chat-only tools and versus switching to a dedicated visual editor. If you spend your time in backend logic, data layers, or refactors, Design Mode is irrelevant — but the Context Usage Report is the thing to actually open, because token bloat hits every long agent session regardless of what you’re building.

For the wider picture on whether Cursor’s agent-first direction is worth committing to, see our Cursor 3 review. If you’re setting up Cursor for frontend work specifically, the best Cursor settings for TypeScript and React covers the config that makes Design Mode’s element tracing more reliable. And for the broader category of turning designs into shippable code, our roundup of design-to-code workflows that actually ship puts Design Mode in context against the alternatives.

FAQ

Is Canvas Design Mode the same as the browser Design Mode? It’s the same interaction model — click, multi-select, draw, or speak to target UI elements — extended to canvases as of June 4, 2026. Browser Design Mode shipped earlier in the Cursor 3 line; 3.7 brought it into canvas artifacts and added multi-select plus the mid-run voice mic.

Do I need a paid plan to use Design Mode? No. The features ship across all plans including the free Hobby tier. You’re limited by the usual usage caps, not by a Design Mode paywall.

What frameworks does Design Mode work best with? Component-based frontends with a clear render tree — React and Vue are the strongest fit because the agent reads props from the fiber tree. The cleaner your component boundaries, the more reliably it traces an element back to source.

What is the Context Usage Report for? It shows where your agent’s tokens go — system prompt, tool definitions, rules, skills — as an interactive canvas you can question. Use it to diagnose why long sessions get slow or expensive, usually from bloated rules files or too many MCP tool definitions.

Can I queue multiple UI changes without waiting? Yes. In 3.7 the voice mic stays live while the agent is mid-run, so you can point at the next element and speak the next change before the current one finishes.

Sources

• Canvas Design Mode and Context Usage Report — Cursor changelog
• Direct agents with visual prompts in Design Mode — Cursor blog
• Cursor changelog — official release notes
• Cursor pricing — official pricing page
• Cursor Design Mode: Edit UI by Voice and Multi-Select — Digital Applied
• Cursor’s Design Mode (Visual Editing) Explained — Builder.io

Last updated June 11, 2026. Pricing and features change frequently; verify current state before purchasing.