Cursor Launches Design Mode: Edit UI with Clicks and Drawings, Agent Fixes Code

Cursor launched an updated Design Mode — a mode where you edit the interface visually, right in the browser, and an AI agent automatically fixes the source code. The idea is simple: erase the boundary between what you see on screen and what the agent understands. Instead of a long written explanation, you click on the needed element, draw on the page, or say out loud what needs to be changed.

Four Ways to Give Tasks to the Agent

Cursor offers several intuitive ways to show the agent what changes are needed:

• Click on an element — you select an element in the running application, provide a brief prompt, and the agent finds the corresponding code and edits it
• Multi-select — you select multiple elements at once, useful when changes involve relationships between components (align, make identical, remove duplication)
• Drawing on the page — you outline the needed interface area with a marker, and the agent sees exactly the part of the screen you pointed to, including markup and animation
• Voice description — you describe the task by voice, the system recognizes the speech and sends the prompt to the agent

Under the hood, the system passes two sets of information to the agent. The first is technical data about the element: its xpath, component name, HTML attributes, computed CSS styles, and data from the React/Vue component tree. The second is a screenshot of the page at the moment you gave the command. Together, this gives the agent full context for error-free editing.

Why This Speeds Up Development

Interface editing is always a chain of changes. You fix one component, notice a problem with spacing nearby, realize you need to rework an entire group of buttons. In a typical workflow, you spend time explaining each task separately. Design Mode lets you send a new task without even waiting for the agent to finish the previous one.

Cursor uses the Composer 2.5 model — it's specially optimized for fast and accurate UI changes. The application reloads in real-time thanks to hot reload, so you immediately see the results of your changes. This allows a single developer to make complex UI fixes many times faster while maintaining concentration and flow state.

The key idea is that the model must be not only smart, but fast. If the agent spends half a minute thinking about a task, you'll lose focus. Composer 2.5 responds almost instantly, allowing you to maintain your work rhythm.

What This Means for Frontend

Design Mode brings the classic paradigm of designer communication into the age of AI. Previously, designers, PMs, and developers would point to screen areas, draw arrows, write annotations. Design Mode automates this part: now the agent sees what you see and understands instructions through vision, not through text.

"The future of development is the ability to move between high-level abstraction and low-level details without losing flow state," —

Cursor's approach to Design Mode.

For business, this means UI tasks can be solved faster and cheaper, especially for iterative fixes and A/B testing. Developers can focus on architecture, while routine CSS and markup go to the agent.

What This Means

The world of development is moving toward a point where tools allow smooth transitions between strategy (high level) and implementation (low level). Design Mode is a step toward that. You don't lose control, you get precise editing, and you maintain speed. AI becomes not a replacement for the developer, but a tool that makes their work easier and faster.