Use Cursor's new editor to create better webpages

By EngineAI Team | Published on December 17, 2025
Use Cursor's new editor to create better webpages
Discover how to rapidly set up and utilize Cursor's new visual design editor to improve your frontend design without always switching between a design tool like Figma.

Step-by-step:

Create a new project in Cursor with an HTML and CSS file (the most recent version is needed); either use a template or instruct the Cursor agent to create a basic index.html + styles.css.

To install the live server extension, press CMD+Shift+P, look up "Open with Live Server," copy the URL, and paste it into the Cursor browser (CMD+Shift+B).

Turn on the element selector, click any element to modify its properties in the Design pane, or communicate your desired changes to the agent in the active chat.

To make changes, click Apply; to save, select "Keep" or "Keep All" (the agent adjusts classes automatically so that changes apply to all matching elements).

As you proceed, be sure to save your progress using Git. You can ask the agent to write Git commits for you, and Git will make it easy to undo any undesirable style changes.