Cursor design mode shipped on June 4, 2026 as the headline feature of Cursor 3.7. It lets you click an element in the running app, annotate what you want changed, and have the agent edit the underlying source code that produced it. Paired with the new Context Usage Report, this release pushes Cursor closer to the "describe what you see, get a working app" loop that Lovable, v0, and Totalum already optimize for. This post breaks down what Cursor design mode actually does, where it helps, where it still leaves you stuck, and what to use alongside it when you need to ship a real production app.
Quick Answer
- Cursor design mode is a new mode in Cursor 3.7 (released June 4, 2026) that lets you select and annotate UI elements inside a canvas or the integrated browser to guide the agent's code edits.
- It works on a live running app: pick a DOM element, leave a note, and Cursor modifies the source code that generates it.
- The same release adds a Context Usage Report (interactive token breakdown across system prompt, tools, rules, and skills) plus full-screen canvas sharing and agent-embedded buttons.
- It is a UX improvement on top of Cursor's existing agent loop. It does not change the fact that you still own deploy, hosting, auth, database, and CMS on your own.
- If you want the visual editing feel without assembling your own production stack, an end-to-end AI app builder like Totalum builds a real Next.js project with backend, database, auth, hosting, and admin panel included.
What Cursor 3.7 actually shipped
On June 4, 2026 Cursor published changelog entry "Canvas Design Mode and Context Usage Report" tagging the build as version 3.7. Two headline features:
Canvas Design Mode. From inside the Agents Window, you switch a canvas into Design Mode. You then point at UI elements either in the canvas or in Cursor's integrated browser, annotate them with text, arrows, or boxes, and the agent reads those annotations as part of its prompt context. It then edits the source code that produced the element. The official changelog phrasing is: "Select and annotate UI elements directly in a canvas to guide Cursor's edits, just as you would in the browser."
Context Usage Report. Cursor now renders an interactive canvas showing where your token budget is going on every agent turn. It breaks tokens down across the system prompt, tool definitions, rules, skills, and conversation history, with a "Debug with Agent" button that opens an optimization conversation. For anyone who has watched a long Cursor session burn through a 200K context window, this is the first real visibility tool inside the product.
The release also bundles four canvas-side improvements:
- Full-screen canvas sharing in browsers for team presentations.
- Agent-embedded buttons inside canvases that execute specific prompts when clicked.
- Better agent capability for fixing canvas type errors.
- Improved component styling and expanded chart customization in canvases.
Cursor 3.7 lands eleven days after Cursor 3.6 (Auto-review Run Mode on May 29) and continues the same theme: take the agent loop out of the chat panel and put it on a visual surface. For the full Auto-review story see our writeup on Cursor Auto-review Run Mode in 2026.
Why this matters
Design Mode is the first time Cursor has shipped a true "click on the thing you want to change" editing surface. Until now, the path was: read the rendered UI, find the component in the file tree, write a prompt that references the right file and line, watch the agent guess. Design Mode collapses that into "open Design Mode, click the button, type 'make this primary color', submit."
That is a real ergonomic improvement for builders who think visually. It is also the most direct response yet to the design-first AI builders (Lovable, Bolt, v0, Builder.io) that have always offered some flavor of "edit on the canvas." If you have been weighing Cursor against those alternatives, our older comparison in Cursor vs Claude Code in 2026 covers the broader trade-offs Cursor brings to the table; the agent-versus-agent fight in Claude Code vs Codex in 2026 covers the same trade-offs on the terminal side.
The Context Usage Report is the quieter feature but arguably the more useful one over the next quarter. Long Cursor sessions on big repos routinely hit context ceilings. Knowing that 32% of your tokens are skill definitions, or that an MCP tool is bloating tool definitions by 18K tokens, is the kind of insight teams have been asking for since Claude Code shipped its own /context command. For context on how heavy MCP server setups can get, see our roundup of the best Claude Code MCP servers in 2026.
Cursor 3.7 vs the rest of the visual-edit field
Design Mode is not invented from nothing. Several AI builders shipped some version of "click an element on the canvas to edit it" earlier this year. Here is how the field looks the day Cursor 3.7 dropped.
| Tool | Visual edit surface | Where it edits | Output you own |
|---|---|---|---|
| Cursor 3.7 (Jun 4, 2026) | Canvas Design Mode + integrated browser | Your repo (Next.js, React, anything) | Yes, your repo |
| Lovable | Visual editor in the browser | Lovable project (Vite + React) | Yes, sync to GitHub |
| Bolt.new | StackBlitz-based preview | In-browser project | Yes, download or push to GitHub |
| v0.app | Inline component canvas | v0 project + export to Next.js | Yes, export to your repo |
| Builder.io Visual Copilot | Visual CMS canvas | Builder content + export to React | Partial, CMS-coupled |
| Replit Agent + Design Mode | Browser IDE | Replit project | Yes, download |
| Totalum | Built-in code editor + visual preview | Real Next.js project with backend, DB, auth, hosting | Yes, download full source any time |
Two patterns to notice.
First, Cursor is catching up on the visual side, not leading. Lovable, Bolt, v0, and Replit have all had click-to-edit surfaces for months. Cursor's advantage has always been that it edits any repo on your own machine. Design Mode brings the click-to-edit ergonomic without losing that.
Second, none of the coding-agent products solve the rest of the production stack. Cursor edits code. Claude Code edits code. Codex edits code. They do not give you a database, an admin panel, or a hosting layer. You still wire up Supabase or Postgres, you still write auth, you still pick a deploy target. The AI app builders (Lovable, Bolt, Replit, v0, Totalum) bundle more of that. Totalum bundles all of it, including database, REST API, auth, CMS admin panel, hosting, and custom domain, in one Next.js project you own.
For more on where the lines fall between coding agents and AI builders, see our Codex Plugins reactive post and the Project Polaris coding-model writeup. Both came out earlier this week and cover the same agent-product-design tension from different angles.
Who Design Mode helps the most
Repo-first builders who already use Cursor. If your stack is already Cursor on a Next.js repo with your own backend, Design Mode removes the "find the file, write the prompt" step for visual changes. It will not change your workflow for backend or data work, but for UI iteration it shortens the loop.
Designers handing off to engineers in the same product. The annotate-on-canvas surface is a credible alternative to leaving Figma comments and Slack screenshots. A designer can drop boxes and notes on the running app and the agent can address them inline.
Small teams running review sessions. The full-screen canvas sharing feature plus agent-embedded buttons are clearly built for live demo and review settings. Combined with the new Cursor Enterprise Organizations structure (Organizations > Teams > Groups, shipped June 3), Cursor is positioning 3.7 as the version teams adopt.
Who it does not help
Anyone shipping their first app from scratch. Design Mode assumes you already have a running app and a repo. It does not give you the project scaffold, the database, the auth, or the deploy. You still need to assemble those.
Software agencies running many client projects in parallel. Design Mode is a single-canvas, single-agent surface. If you are juggling six client projects and an internal tool, the bottleneck is project parallelism and project setup, not UI iteration. For that workflow, a builder-as-a-service that an agent can drive via MCP and API is a better fit. We covered the pattern in our AI Agent Orchestrator post.
SaaS founders who want to embed a builder. Design Mode is a Cursor-internal surface. You cannot lift it into your own product. If your goal is to ship a Lovable-style builder inside your SaaS, you need a builder you can call from an API, not a desktop coding tool. Totalum's API and MCP path is designed for that case.
How Design Mode interacts with MCP servers
Cursor 3.7 keeps every MCP integration you already had. Design Mode is a UX layer on top of the existing agent loop, so any MCP server you previously connected (databases, deploy targets, Notion, Linear, your own internal tools, Totalum's MCP) is still available inside Design Mode sessions.
The new Context Usage Report becomes a useful diagnostic here. If you have ten MCP servers connected, tool definitions are one of the biggest token sinks in any agent session. The report will show you which servers are paying their context cost and which are not. Expect to see teams pruning MCP server lists once they actually see the breakdown.
For a primer on using Cursor and other agents with MCP, see Claude Code MCP Tutorial. The same MCP patterns work in Cursor.
Cursor design mode vs Totalum: side by side
A direct comparison helps when you are weighing tools.
| Decision factor | Cursor 3.7 with Design Mode | Totalum |
|---|---|---|
| Where it runs | Local desktop IDE | Web UI + API + MCP |
| What it edits | Any repo on your disk | A full Next.js project Totalum creates for you |
| Backend included | No, you bring it | Yes, built-in database, REST API, admin panel |
| Auth, hosting, custom domain | You bring them | Built-in |
| Visual edit surface | Canvas Design Mode (Jun 4, 2026) | Built-in code editor and visual preview |
| Agent-driven (via MCP / API) | You drive Cursor as the user | Your agent (Claude, ChatGPT, OpenClaw, custom) drives Totalum to build entire projects |
| Best for | Repo-first developers already on Cursor | Builders who want a full app shipped, agencies, SaaS founders embedding a builder |
| Output you own | Yes | Yes, 100% your code, download any time |
The shortest way to describe the difference: Cursor edits code in a repo you already have, with Design Mode making UI edits faster. Totalum is its own AI app builder, peer to Lovable, Bolt, Replit, and v0, that creates and maintains the full project (frontend, backend, database, auth, admin, hosting). If you already have a repo and want better UI editing, Cursor 3.7 is a step forward. If you do not yet have a repo, or you want a builder you can call from an agent, Totalum is the layer that builds it.
What to do this week
If you use Cursor:
- Update to 3.7 and try Design Mode on a real UI ticket you would normally describe in a long prompt.
- Open the Context Usage Report on a long session, look at which rules, skills, and tools dominate, prune the heavy ones.
- If you have an MCP server you rarely use, disconnect it. Smaller tool definitions mean more room for context.
If you are deciding between Cursor and an AI app builder:
- Map your bottleneck. Is it UI iteration speed on an existing app, or is it standing up a new project? Cursor 3.7 helps with the first, AI builders help with the second.
- Try Totalum in parallel for one project that needs backend, database, and hosting bundled. The free plan is enough to spin up a real app.
- If you run client work or want to embed a builder, book a 30-minute Calendly call so we can show you the API and MCP paths live.
FAQ
When did Cursor design mode launch?
Cursor design mode launched on June 4, 2026 as part of Cursor 3.7, under the changelog title "Canvas Design Mode and Context Usage Report."
What does Cursor design mode actually do?
You open a canvas inside the Agents Window, switch it into Design Mode, and then point at UI elements in the canvas or in Cursor's integrated browser. You annotate the elements with text, boxes, or arrows. The agent reads those annotations as prompt context and edits the source code that produced the element.
Does Cursor design mode work on any repo?
Yes, in principle. Cursor 3.7 still edits whatever repo you have open. Design Mode is most useful on web UI work where you can run the app inside Cursor's integrated browser. On non-web codebases, the visual annotation surface has less to point at.
How is Cursor design mode different from Lovable, Bolt, or v0?
Lovable, Bolt, and v0 are AI app builders. They create a project for you and give you a visual surface to edit it. Cursor is a coding agent. It edits a repo you already have. Design Mode brings the visual edit ergonomic into Cursor without changing the underlying "edit your repo" model.
Does Cursor 3.7 include a database or hosting?
No. Cursor 3.7 is an IDE and agent. Database, auth, hosting, and deploy are still your responsibility. If you want those bundled, look at AI app builders like Totalum, Lovable, Bolt, Replit, or v0.
What is the Context Usage Report?
It is a new interactive canvas in Cursor 3.7 that breaks down how your token budget is being used during an agent session. It shows tokens consumed by the system prompt, tool definitions, rules, skills, and conversation history, plus a "Debug with Agent" button that opens an optimization conversation.
Where does Totalum fit if I already use Cursor?
Totalum and Cursor address different problems. Cursor edits code in a repo. Totalum is its own AI app builder that creates and maintains a full Next.js project, backend included, that you own. If you want your Cursor or Claude agent to drive Totalum to build entire production apps, you can connect via MCP. If you want a builder behind your own SaaS or agency brand, see Totalum's API and MCP path.
Ready to build with Totalum?
Cursor 3.7 makes UI editing inside your existing repo faster. Totalum builds the whole project for you (frontend, backend, database, auth, admin panel, hosting, custom domain) and lets your AI agent drive it via MCP or API. Start free at totalum.app, or book a 30-minute discovery call if you are an agency or SaaS founder looking to embed an AI builder.
Sources used: Cursor official changelog (cursor.com/changelog, June 4, 2026), Cursor 3.6 release notes (May 29, 2026), and Cursor Enterprise Organizations announcement (June 3, 2026).