Cursor’s new visual editor, integrated into their built-in browser, enables users to make quick CSS tweaks and layout adjustments visually, streamlining the refinement stage of design without replacing traditional design workflows. While it enhances pixel-perfect polishing within the coding environment, it is not intended for creating new designs or duplicating elements, and Brian Castle highlights its role as a complementary tool alongside Cursor’s broader development ecosystem.
The video introduces Cursor’s new visual editor, a feature integrated into their built-in browser that arrived with Cursor 2.0. This visual editor allows users to click on elements, drag them around, and tweak CSS properties visually, making it easier to refine designs directly within the coding environment. While the presenter, Brian Castle, admits that this tool might not be useful for every phase of development, he highlights its particular usefulness during the refinement stage of the design process, where small adjustments and polish are needed.
Brian provides context on Cursor’s evolution, noting that it started as a code editor similar to VS Code but has since expanded to include plan mode, background agents, mobile access, a built-in browser, and now the visual editor. This expansion reflects a broader trend of breaking down barriers between traditional roles like designers, developers, and product managers by consolidating workflows into a single environment. The visual editor exemplifies this by enabling quick CSS tweaks and layout adjustments without leaving the coding environment.
In demonstrating the visual editor, Brian shows how users can select elements, adjust flexbox properties like alignment and spacing, and drag elements within the constraints of the existing DOM and CSS structure. He also points out the color token feature, which pulls from Tailwind CSS colors and custom design tokens defined in the codebase. However, he expresses some concern about the editor offering too much flexibility with colors, which could lead to inconsistencies in a carefully maintained design system. He suggests that more control over available colors would help maintain brand consistency.
Brian emphasizes that the visual editor is not intended to replace the entire design workflow or serve as a tool for creating new designs from scratch. Instead, it excels as a refinement tool for making pixel-perfect adjustments after the initial design and build phases. He contrasts this with his usual workflow of either verbally prompting coding agents to make changes or manually editing CSS in Chrome DevTools. The visual editor combines these approaches, streamlining the refinement process by allowing direct visual manipulation alongside code generation.
Finally, Brian discusses the limitations of the visual editor, such as the inability to duplicate or create new UI elements directly within the tool. Changes still require refreshing the built-in browser to see updates, and the editor does not yet offer a true WYSIWYG experience. He clarifies that Cursor is not aiming to become a traditional design tool like Figma or Dreamweaver but rather a complementary refinement tool. To address the broader challenge of designing new products in an AI-first era, Brian introduces his upcoming Design OS, a new approach to the design phase that bridges the gap between ideation and coding. He invites viewers to learn more about this in his next video and live workshops.