Log in GO PRO NOW
GO PRO NOW
Your workflow could help someone. Share it!

Guides Cursor

Design Better Websites With This New Cursor Feature

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.

beginner 6 steps 1 resource

Introduction

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.

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.

Step-by-step 6 steps

Instructions

  1. Step 1 of 6

    Open your project in Cursor

    Open a new project in Cursor with an HTML file and a CSS file. Make sure you are running the latest Cursor update.

  3. Step 2 of 6

    Start a Live Server preview

    Make sure you have the Live Server extension installed.

    3_live_server_extension

    Hit CMD+Shift+P and search for “Open with Live Server.”

    4_live_server_extension2
  4. Step 3 of 6

    Open the preview in Cursor’s browser

    • A live preview of your site should open in your default browser.
    • Grab the URL and go back to Cursor.
    • Hit CMD+Shift+B to open the Cursor browser.
    • Paste in the URL and hit Enter.
  5. Step 4 of 6

    Select and edit elements in the Design pane

    Make sure you have toggled on the element selector option.

    6_selector_toggle

    Now you can click any element on your site and edit its properties in the Design pane.

    cursor_design_pane_preview

    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.

  6. Step 5 of 6

    Apply and keep your changes

    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.

    7_keep_all

    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.

  7. Step 6 of 6

    Use color tokens in the picker

    Use this prompt to extract your main colors and use them in the color picker dropdown:

    Prompt 
    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?
    2_color_tokens

You're done

That's the whole workflow

Mark it complete to save your progress. Background and answers to common questions follow below.

Keep going

Keep learning with Rundown Pro

A guide shows you one workflow. Pro opens the full course library, so you can learn the whole system behind it.

  • Every on-demand course
  • Certifications on completion
  • Group office hours and member perks

$29/mo, cancel anytime

Overview Back to the steps

Background and context

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.