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.

Keyboard navigation of the element tree

Clicking an element in a rendered page often grabs the wrong node — you want the card, you get the <span> inside it. Design Mode now lets you walk the element tree from the keyboard: up to the parent, down into children, sideways between siblings, before you attach a comment or instruction. It sounds minor, but it fixes the most common Design Mode misfire — selecting a leaf node when the change belongs on the container. Instead of clicking repeatedly and hoping the hitbox cooperates, you click once and arrow your way to the right level of the hierarchy. Anyone who has used browser devtools’ element inspector will recognize the pattern immediately; bringing it into the selection overlay means the precision of devtools without leaving the agent workflow.

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.

Full-screen canvases fix a real presentation problem. Before 3.7, walking a designer or PM through an agent-built prototype meant screen-sharing your editor, panels and all. A canvas that opens as a clean browser tab is something you can drop in a Slack thread and let a stakeholder click through on their own time. The prompt buttons compound that: embed a “regenerate with sample data” or “switch to dark theme” button in the canvas, and the person reviewing it can drive variations themselves — no Cursor install, no prompt writing, no round trip back to you for every “what would it look like if” question.

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 (annual billing knocks roughly 20% off every paid plan, so Pro works out to $16/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.

One pricing change did land alongside this release cycle: Cursor’s June 2026 update added a Premium seat tier for Teams at $120/user/month, carrying five times the included usage of a Standard seat. It exists for the heavy-agent users on a team — the people running long multi-file agent sessions all day — so admins can upgrade two power users without moving everyone off the $40 Standard seat. If Design Mode’s point-and-iterate loop makes your frontend developers burn through agent requests faster (it will), the Premium seat is the pressure valve before anyone needs an individual Ultra plan.

If the subscription math makes you wince at the other end — you’re an indie hacker eyeing $60–$200/month tiers — the alternative is running a local coding model and pointing your editor at it. Our sister site’s guide to the best local coding LLMs and the hardware they need covers what that actually costs upfront; Design Mode itself, though, only works inside Cursor’s own agent stack.

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.

Does Windsurf have an answer to Design Mode?

Not as of July 2026. Windsurf’s engineering investment has gone in a different direction — Cascade’s long autonomous agent loops, always-on awareness of recent edits, and cross-file navigation — rather than visual UI targeting. There’s no point-at-the-element equivalent in Windsurf’s workflow, and third-party comparisons through mid-2026 consistently list visual UI editing as a Cursor-specific advantage (Zapier’s Windsurf vs. Cursor comparison is representative). If your week is mostly component UI iteration, that’s now a genuine differentiator between the two editors rather than a feature-checklist footnote; our Windsurf vs. Cursor head-to-head covers where Windsurf pulls ahead instead.

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.

How do I select a parent container instead of the element I clicked? Use the keyboard element-tree navigation added in the 3.7-era Design Mode improvements: after clicking, arrow up to the parent, down into children, or sideways between siblings before you attach your instruction. It works like the element inspector in browser devtools, and it’s the fix for the classic misfire of grabbing a <span> when you meant the whole card.

Is there an annual discount on Cursor plans? Yes — annual billing takes roughly 20% off every paid plan, which puts Pro at about $16/month instead of $20. Design Mode features are identical on monthly and annual billing.

Does Design Mode only change CSS, or can it edit component code? It drives the same agent as chat, so it edits whatever the selection traces to — markup, layout structure, props, and styles alike. In the pricing-card example above, the fix was a flex-column layout change in the component’s JSX, not a style patch. The selection determines where the agent looks; the instruction determines what it changes.

Does Windsurf or another editor have a Design Mode equivalent? No direct equivalent as of July 2026. Windsurf’s strengths are Cascade’s autonomous agent loops and cross-file awareness, not visual element targeting. Builder-style visual tools exist for designers, but they generate their own code rather than editing yours in place — see the comparison table at the top of this article.

What’s the difference between Teams Standard and Premium seats? Standard seats are $40/user/month. The Premium seat tier added in June 2026 costs $120/user/month and includes five times the usage of a Standard seat — aimed at the team members who run agents heavily enough to exhaust Standard limits, without forcing the whole team onto a pricier plan.

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
• Design Mode Improvements — Cursor changelog
• Cursor Pricing July 2026: Free, Pro, Ultra and Teams Costs — NxCode

Last updated July 22, 2026. Pricing re-verified (Hobby $0 / Pro $20 / Pro+ $60 / Ultra $200 / Teams $40, Premium seat $120). Pricing and features change frequently; verify current state before purchasing.