published dec 15, 2025

Design Better Websites with This New Cursor Feature

beginner

The Rundown

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.

Who This Is Useful For

  • People tired of switching between design and coding software
  • Cursor users
  • Solo developers

What You Will Build

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.

1_what_you_will_build

What You Need

  • Cursor app
  • A basic HTML and CSS project
  • Optional: ask the Cursor agent to build a simple index.html and styles.css website, or use a template
  • Live Server extension: settings → extensions → search “live server”

Going Further

  • Use a prompt to extract your main colors and use them in the color picker dropdown.
  • Read more about the design sidebar.
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.