Overview
AI code editor Cursor announced its new “Visual Editor” feature on December 11. This update integrates web apps, codebases, and visual editing tools into a single window, breaking down the traditional barrier between design tools and coding.
Key Features
Drag-and-Drop Operations
Users can select elements and rearrange or reposition them via drag-and-drop. Operations that previously required direct code editing can now be performed visually.
Direct CSS Property Editing
The right-side inspector panel allows direct modification of CSS properties including:
- Font size and line height
- Margins and padding
- Border radius
- Opacity
- Layout settings
AI-Powered Automatic Prompt Generation
Changes made visually are automatically interpreted by Cursor’s AI as prompts and applied to the actual code. If you know what you want to achieve, you can modify the site without programming knowledge.
Difference from Traditional Design Tools
WIRED described it as a “vibe-coding tool for designers.” Unlike traditional design tools (like Figma) that use their own abstractions, Cursor’s Visual Editor maps directly to real CSS.
This means designers aren’t working in a symbolic approximation of a UI, but within the actual system that ships to production.
Current Issues
Forum users have reported the following issues:
- Bug where selecting multiple elements opens new chat windows
- Inability to add elements to existing agent chats
The Cursor team has responded that they are “working on it now,” and a fix is expected soon.
Future Outlook
This update has the potential to fundamentally change how developers and designers collaborate. Direct visual editing on the codebase could streamline the traditional design-to-code workflow significantly.
Available now in the current version (2.2.14).