Cursor has launched a new AI-powered Visual Editor inside its code editor, designed to let designers change the look and feel of live web apps directly in code and to compete more directly with tools such as Adobe XD/Express and Figma. The move positions the fast-growing AI coding startup not just as a developer tool, but as a bridge between design and engineering workflows in professional product teams.
Cursor Visual Editor Launch
Cursor, the San Francisco–based AI-first code editor built by startup Anysphere, unveiled Visual Editor in early December 2025, with public demos and social posts appearing around December 10–11. The feature sits inside Cursor’s existing browser-backed environment and is pitched as an AI coding tool for designers who want to edit production interfaces without leaving the codebase. Cursor’s team frames the launch as a way to reduce friction in design–developer handoffs while leveraging the multi-agent, browser-integrated architecture introduced with Cursor 2.0 and its Composer model in October 2025.
Key Cursor timeline
| Date | Event | Details |
| June 29, 2025 | Web app for AI agents | Cursor launches a browser-based app to manage networks of coding agents beyond its desktop IDE, expanding access to non-traditional developer workflows. |
| October 29, 2025 | Cursor 2.0 and Composer | Cursor 2.0 introduces a proprietary Composer model and a multi-agent interface that can orchestrate several AI agents in parallel, supported by an embedded browser and DOM tools. |
| October 2025 | Browser/DOM tools GA | Cursor’s embedded browser and DOM inspection tools, initially beta, become broadly available, allowing AI agents to read the DOM and run end-to-end frontend tests. |
| December 10–11, 2025 | Visual Editor launch | Cursor publicly unveils Visual Editor as an AI-powered design interface on top of its integrated browser, demonstrated on sites such as WIRED’s homepage. |
How the Visual Editor Works
Visual Editor overlays a familiar design-style panel and an AI chat interface on top of Cursor’s integrated browser, so users can select elements on a live page and edit properties such as fonts, spacing, corner radii, and menu behavior. Designers can either adjust controls directly or type natural language instructions like changing button colors or layout spacing, after which Cursor’s AI writes the corresponding CSS and commits edits back into the codebase. Because the tool operates on real CSS and design tokens rather than static mockups, Cursor emphasizes that every change maps to the code that ships, aiming to avoid the generic template look common in some AI design tools.
Cursor’s browser integration lets Visual Editor inspect live sites as if the user were working inside their actual front-end project, exposing design tokens and existing styles before proposing changes. The workflow builds on Cursor’s earlier integration with the Model Context Protocol (MCP) and official servers for tools like Figma, which allow design system data and frames to be pulled directly into the coding environment. In practice, teams can connect Figma design files via MCP, use Visual Editor to align the live UI to those tokens, and rely on Cursor’s AI agents to propagate consistent styles across large codebases.
Competing With Adobe and Figma
Cursor is positioning Visual Editor as a vibe-coding product that still exposes professional-level controls, responding to a market long dominated by dedicated design platforms from Adobe and Figma. Adobe XD and Adobe Express remain key parts of Adobe’s design stack, with XD focused on vector-based UI/UX design and interactive prototyping, and Express targeting quick, template-driven content creation with growing AI features. Figma, meanwhile, continues to lead in cloud-based collaborative product design, offering real-time multi-user editing, prototyping, and component libraries that underpin modern design systems.
Cursor Visual Editor vs. Adobe and Figma
| Tool | Primary focus | Editing paradigm | AI role | Typical users |
| Cursor Visual Editor | Bridge between design and production code in an AI-first editor. | Select live elements in an embedded browser and change styles via panels or natural language, with edits written directly to CSS. | Central; AI interprets requests, inspects DOM, and updates code, leveraging multi-agent and MCP integrations. | Designers and front-end developers working inside Cursor or collaborating closely on real codebases. |
| Figma | Collaborative interface design, prototyping, and developer handoff. | Canvas-based vector design with frames, components, and prototype links; files live in the cloud. | Emerging; AI assists with layout and content but most workflows remain manual and canvas-centric. | Product designers, design teams, and stakeholders collaborating on UX/UI assets. |
| Adobe XD / Express | XD for UX design and prototypes; Express for fast branded content and simple web pages. | XD uses artboards and vector tools; Express uses drag-and-drop templates and web layouts. | Express increasingly uses AI for generative design and layout, while XD emphasizes design and prototyping tools. | Brand and marketing teams, plus UX designers inside broader Adobe Creative Cloud workflows. |
The direct overlap arises in scenarios where designers need tight control of typography, spacing, and interaction states but also want those decisions reflected instantly in working front-end code. By targeting real CSS and design tokens rather than exporting assets or redlining specs, Cursor is trying to erode the traditional separation between design tools such as Figma or Adobe XD and developer environments. For incumbents, this raises competitive pressure around how quickly and cleanly their platforms can connect design systems to production code, particularly as AI coding agents become more capable.
What It Means for Design Workflows
For product teams, Visual Editor is presented as a way to shorten the loop between how a product should look and what actually ships, by letting designers manipulate live interfaces while AI handles the underlying code changes. In demos, Cursor has shown the editor pulling design system tokens from sites like WIRED, then allowing designers to adjust layout and styling in real time, with changes mirrored directly in the CSS. This approach could particularly benefit organizations with mature design systems, where the challenge is less inventing new visuals and more enforcing consistency across large, evolving front-end codebases.
Cursor’s broader strategy is to grow from a popular AI code editor—already described in reports as generating over $1 billion in annual recurring revenue—into a platform that also serves designers, product managers, and other non-traditional coders. As large AI providers such as OpenAI and Anthropic expand their own coding assistants, Cursor is betting that deep integrations with design tools, multi-agent workflows, and browser-based verification will differentiate its offering. If Visual Editor gains adoption, the next battleground is likely to be how seamlessly these tools synchronize design tokens, prototypes, and production code across ecosystems built around Adobe and Figma.
