If you've ever worked at the intersection of design and development, you know the pain: creating a pixel-perfect mockup in Figma is one thing, but getting developers to implement it exactly as designed is another story entirely. Margins are off, colors don't match, and somehow that button ended up three pixels to the left.
On December 11, 2025, Cursor made a move that could fundamentally change this dynamic. The company unveiled Visual Editor—a visual editing tool built directly into its AI-powered code editor. Now designers can work with live code as intuitively as they would in Figma or Adobe XD, with every change instantly reflected in the codebase.
What Is Cursor and Why Does It Matter?
For the uninitiated: Cursor is a code editor built on Visual Studio Code, supercharged with powerful AI capabilities. It was created by Anysphere, a company founded by four MIT graduates in 2022.
In just three years, the startup has become a genuine unicorn. In November 2025, the company raised $2.3 billion in funding at a $29.3 billion valuation. Annual revenue has surpassed $1 billion. Investors include Nvidia, Google, Andreessen Horowitz, and other tech giants.
Cursor has become a flagship product for what's known as "vibe coding"—an approach to programming where you simply describe what you want, and AI generates the code for you. The term was coined by Andrej Karpathy, co-founder of OpenAI, and Collins Dictionary even named it the Word of the Year 2025.
How Visual Editor Works
Imagine opening your web project in Cursor and seeing a live preview of your site right next to your code. But instead of hunting through CSS files to figure out which class controls that button, you simply click on it. Select it. Drag it. Resize it. The code updates automatically.
That's Visual Editor in action.
Drag-and-Drop Interface
The headline feature is the ability to drag elements directly on the page. Want to swap two buttons? Just grab one and move it. Cursor lets you manipulate the DOM tree visually, without writing a single line of code manually.
Once you're done moving elements around, simply tell the AI agent to apply the changes—it will automatically locate the relevant components in your codebase and update them.
Professional-Grade Style Panel
A sidebar panel appears with comprehensive styling controls: sliders for margins, padding, and border radius; color pickers with live preview; typography controls for fonts, line height, and font weight; grid and flexbox management for visual layout adjustments; and design token integration that recognizes your design system variables.
Every control maps directly to real CSS. This isn't an abstraction or symbolic representation—you're working with actual production code.
Native React Component Support
If your project is built on React (and most modern web apps are), Visual Editor becomes even more powerful. It automatically detects component props and displays them in the sidebar. For example, if you have a button with "primary," "secondary," and "ghost" variants, you can select the variant from a dropdown instead of digging into the code to change props manually.
"Point and Prompt" Feature
Perhaps the most compelling feature is the ability to combine visual editing with natural language commands. Here's how it works: click on an element, describe what you want to change ("make this button red" or "double the top margin"), and the AI agent applies the changes.
Better yet, you can run multiple commands simultaneously. Click on one element—"make it bigger." Click on another—"change the color to blue." Click on a third—"swap it with the previous element." The agents work in parallel, and within seconds, all changes are complete.
Jason Ginsberg, Cursor's Head of Product Engineering, demonstrated this capability at a WIRED office presentation. He clicked on elements and dictated changes while the code updated in real-time.
Getting Started
Visual Editor is available in Cursor version 2.2 and above. To get started: install or update Cursor from cursor.com, open your web project (React apps work best, but other frameworks are supported), launch the built-in Cursor browser, enable visual editing mode, and start clicking, dragging, and describing changes.
Important to note: Visual Editor isn't a replacement for Figma or Sketch when designing from scratch. It's a tool for working with existing code. You're not creating mockups—you're editing a live product.
Who Is This For?
Product Designers
Visual Editor lets you make minor tweaks yourself. No waiting for the next sprint, no writing detailed specs just to change a button color.
Ryo Liu, Cursor's Head of Design, explains: "Designers used to live in their own world of pixels and frames, and that didn't translate directly to code. So teams had to create processes to hand off work between designers and developers, and that's where a lot of friction happened. We've unified the worlds of design and code in a single interface with a single AI agent."
Front-End Developers
For developers, this is a way to iterate on UI faster. Instead of writing CSS blindly, running the project, checking the browser, going back to code, and making more adjustments, you see results immediately.
Product Owners and Managers
Want to quickly show your team how a section could look better? Open Visual Editor, make some changes, take a screenshot—and you have a concrete proposal for your meeting instead of abstract suggestions like "let's make the button more prominent."
Startup Founders Building MVPs
If you're launching a startup and need to build a prototype quickly, Visual Editor can accelerate the process significantly. Combined with Cursor's other AI capabilities (where AI can generate basic structure), you can polish the result visually in a fraction of the time.
How Visual Editor Compares to Other Tools
vs. Figma/Adobe XD
Figma is a design tool. You create mockups that then need to be converted to code. Visual Editor works in reverse: you edit existing code visually. Additionally, Cursor integrates with Figma via the MCP protocol, allowing you to pull design tokens directly from Figma into the editor.
vs. Webflow/Framer
These tools generate their own code, which isn't always easy to integrate into a large codebase. Cursor works with your existing code—React components, CSS files, and your design system.
vs. Other Vibe Coding Platforms (Replit, Lovable)
Ryo Liu draws a clear distinction: "Those companies target users who are quickly building demos, not professionals working in large codebases." Cursor is a tool for serious development where code quality and maintainability matter.
Limitations and Considerations
First, Cursor works best with React projects. Other frameworks are supported, but functionality may be limited.
Second, complex changes still require understanding code. You can change a button's color visually, but architectural decisions still require human judgment.
Third, Visual Editor is part of Cursor's paid Pro subscription at $20/month. These features aren't available in the free plan.
What This Means for the Industry
With Visual Editor, Cursor is challenging traditional role divisions in development. The line between designer and front-end developer is blurring further.
This doesn't mean developers will become obsolete—quite the opposite. Complex logic, architecture, and performance optimization remain human domains. But routine layout and styling tasks can now be performed by a broader range of people.
For designers, this is an opportunity to finally work with real code instead of mockups that get interpreted (often incorrectly) by developers.
Competitors are already responding. Adobe is developing AI features in Express and XD. Figma is working on tighter code integration. GitHub Copilot continues to evolve. The market for AI development tools is growing rapidly.
Pricing
Cursor offers three pricing tiers: Hobby (free) with basic features and limited AI requests; Pro ($20/month) with full access to all features including Visual Editor; and Business ($40/user/month) for teams with additional administration capabilities.
For individual users and small teams, the Pro plan is typically sufficient. If you want to try Visual Editor, the paid version is necessary since the free plan is too limited for serious work.
FAQ
What is Cursor Visual Editor?
Cursor Visual Editor is a drag-and-drop visual editing tool built into the Cursor AI code editor. It allows designers and developers to edit live website code visually—clicking, dragging, and resizing elements directly on the page while the underlying code updates automatically.
How much does Cursor Visual Editor cost?
Visual Editor is included in Cursor's Pro plan at $20/month. It's not available in the free Hobby plan. There's also a Business plan at $40/user/month for teams with additional administration features.
Does Cursor Visual Editor work with React?
Yes, Cursor Visual Editor works best with React projects. It automatically detects React component props and displays them in a sidebar panel, allowing you to change component variants (like "primary" or "secondary" button styles) from a dropdown without editing code manually.
Can designers use Cursor Visual Editor without coding knowledge?
Yes, designers can use Visual Editor to make visual changes without writing code. They can drag-and-drop elements, adjust styles using sliders and color pickers, and use natural language commands like "make this button red" to instruct the AI. However, complex architectural changes still require developer involvement.
What is the "point and prompt" feature in Cursor?
Point and prompt is a feature that combines visual selection with natural language commands. You click on any element on the page and describe what you want to change in plain English (e.g., "double the top margin" or "change color to blue"). The AI agent then applies the changes automatically to the code.
Is Cursor Visual Editor a replacement for Figma?
No, Visual Editor is not a replacement for Figma. Figma is for designing mockups from scratch, while Visual Editor is for editing existing live code visually. They serve different purposes—Cursor even integrates with Figma via MCP protocol to import design tokens.
What frameworks does Cursor Visual Editor support?
Cursor Visual Editor works best with React projects but also supports other web frameworks. Functionality may be more limited with non-React technologies. The tool works with your existing codebase, CSS files, and design systems.
How do I get started with Cursor Visual Editor?
To use Visual Editor:
- Install or update Cursor to version 2.2+ from cursor.com
- Subscribe to the Pro plan ($20/month)
- Open your web project
- Launch the built-in Cursor browser
- Enable visual editing mode and start making changes by clicking, dragging, or using natural language prompts
The Bigger Picture
Visual Editor isn't an endpoint — it's another step in a larger trajectory. The company openly discusses its vision for the future: agents will be even more deeply integrated into web application development, and people will express their ideas through interfaces that directly connect thought to code.
This might sound futuristic, but consider how quickly the field is evolving. Two years ago, "vibe coding" was just a joke Andrej Karpathy made on Twitter. Today it's Collins Dictionary's Word of the Year, and a quarter of Y Combinator startups have codebases that are 95% AI-generated.
Competition is intensifying. OpenAI acquired Windsurf. Anthropic is developing Claude Code. Google launched Antigravity. Microsoft isn't sitting still with GitHub Copilot. Everyone wants a piece of what's projected to be one of the largest markets in the software industry.
Cursor currently leads among independent players. One million daily active users, one billion lines of AI-generated code daily, over $1 billion in annual revenue—the numbers are impressive.
Wrap up
Visual Editor from Cursor represents a logical step in the direction the entire industry is heading. We're moving from "designer creates mockups, developer writes code" to "team works on the product while AI handles the routine."
Will it completely replace traditional design tools? No, and that's probably not the goal. Figma will remain essential for designing from scratch, complex illustrations, and brand identity work. But for daily work on live products, for rapid iteration, for quick fixes that previously required a developer—Visual Editor could become indispensable.
Will it make UI work faster and more enjoyable? Absolutely—especially for those who've always dreamed of "just reaching in and fixing it" instead of explaining to someone else what needs to change.
If you work at the intersection of design and development, it's worth trying. This might be exactly the tool you've been missing. And if not, at least you'll know where the industry is headed and what to expect from competitors.
Related Articles
Dani
Mark
Dani
