published dec 15, 2025
Members get every guide, course, and $1,000+ in partner perks.
Learn how to quickly set up and use Cursor’s visual design editor to refine your frontend design without switching back and forth with a design tool like Figma. You will use a simple HTML and CSS project, preview it in Cursor’s browser, and make design edits through the Design pane.
You will build a refined frontend design using Cursor’s visual editor and agent workflow. The final output is an updated HTML and CSS website with design changes applied and kept in your project.
Make sure you are saving your progress with Git as you go. Git will make it easier to roll back any unwanted style changes. You can even ask the agent to write Git commits for you.
Open a new project in Cursor with an HTML file and a CSS file. Make sure you are running the latest Cursor update.
Make sure you have the Live Server extension installed.
Hit CMD+Shift+P and search for “Open with Live Server.”
Make sure you have toggled on the element selector option.
Now you can click any element on your site and edit its properties in the Design pane.
You can also click an element and it will be mentioned in the active agent chat. If you do not know how to make the changes you want in the Design pane, tell the agent what you want instead.
Hit the Apply button and a Cursor agent will make the changes for you. Click “Keep” or “Keep All” in the agent chat to save those changes.
The agent is smart enough to understand classes. If you have a style class like the dino cards in the example and make style changes to one, the agent will update the class so the changes are made to the other divs as well.
Use this prompt to extract your main colors and use them in the color picker dropdown:
Can you extract and put the color tokens from my page's theme in the root of @styles.css so that I can use them as color tokens?
Keep going
Members get all guides, courses, live sessions, and $1,000+ in partner perks.