Cursor’s New Visual Editor: When It’s Useful (And When It’s Not)

Cursor’s New Visual Editor: When It’s Useful (And When It’s Not)

More

Descriptions:

Brian Casel gives a candid hands-on review of Cursor 2.0’s new visual editor — a CSS/DOM manipulation sidebar embedded in Cursor’s built-in browser — testing it against a live Rails app styled with Tailwind CSS. The visual editor lets developers click page elements, adjust layout properties like flexbox alignment and gap, modify design tokens, and drag DOM nodes to new positions without leaving the editor.

Casel identifies a precise use case where the tool earns its place: the refinement phase of UI development, after a design is already established and only fine-grained pixel adjustments remain. He maps this explicitly to the “design → build → refine” workflow he teaches, arguing the visual editor slots cleanly into that third stage. For earlier design phases — creating new interfaces from scratch — he maintains the tool doesn’t yet close the gap.

The review also surfaces a practical concern for teams with strict design systems: the color picker surfaces Tailwind defaults alongside custom brand tokens, making it easy to accidentally introduce off-brand colors. Casel argues that good design tooling should constrain choices rather than expand them. The broader observation is that Cursor is systematically dismantling boundaries between designer, developer, and PM tooling — a trend worth tracking for anyone building products with AI-first workflows.


📺 Source: Brian Casel · Published December 16, 2025
🏷️ Format: Review