This article was originally published on aicoderscope.com
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/m
