Cursor is a code editor with AI built in, based on Visual Studio Code. If you have never used a code editor, it looks like a file list on the left, a code area in the middle and a chat panel on the side. What makes it a good match for customizing a website template is one specific habit: every change the AI makes shows up as a diff you can accept or reject.

When you work with templates, that habit saves you. A template contains dozens of files, and an AI that edits them silently can leave you with a site that is hard to fix. In Cursor you see exactly what is about to change before it does.

This guide shows how to take an Astro template from download to a customized site.

Before you start

You need three things:

  • A template. Every Weblisy template is a complete Astro project that opens as a normal folder. The Michael template is free if you want to practice first.
  • Cursor installed from its official website.
  • A recent version of Node.js, so the site can run on your computer.

Step 1: Open the folder

Unzip the template. In Cursor, use the File menu to open the folder. Cursor will show the project files on the left.

Do not open the zip’s parent folder or a single file. Opening the whole project folder is what lets the agent see how pages and components connect.

Step 2: Run the site

Cursor has a built-in terminal, so you do not need to switch windows. Open it and run the two commands that start any Astro project:

npm install
npm run dev

The second command prints a local address, usually http://localhost:4321. Open it in your browser and keep it next to Cursor. As you work, this page is your preview.

If you prefer not to type commands, ask the agent to do it: “Install the dependencies and start the dev server.” It will ask for approval before running anything.

Step 3: Set project rules

Rules are instructions Cursor applies to the agent’s work, so you do not have to repeat them. You can store them in the .cursor/rules folder, and Cursor also reads an AGENTS.md file in the project root.

A short set of rules is enough:

- This is a website for a photography studio called Northlight.
- Keep the existing fonts, colors and spacing unless I ask to change them.
- Do not add CSS frameworks or new dependencies.
- Keep every link as a placeholder (#) until I provide real URLs.
- Only edit the files needed for the request.

The last line is the most useful. Without it, an agent will sometimes “improve” unrelated files.

Step 4: Learn the project before you change it

Open the agent chat and start with a question, not a change. Cursor’s Ask mode is made for this, since it answers without editing files.

Explain how this project is organized. Which files hold the hero, the navigation and the footer? Where do the images and text come from?

You will learn where things live, and the agent will have the structure in its context for the next requests.

Step 5: Make changes with @ references

Cursor lets you point at specific files with the @ symbol. This is the most reliable way to avoid vague results.

In @src/components/Hero.astro, replace the headline with "Portraits that feel like you" and shorten the description to one sentence. Do not change the layout.

Your file names will differ, so use the file list on the left to find the right ones.

When the agent finishes, Cursor shows the changes as a diff. Read it. Accept the lines that match your request and reject anything unrelated. Then check the browser.

Good request sizes for a template:

  • Replace the text in one section.
  • Swap the images in one section using their URLs.
  • Change the colors using the existing variables.
  • Remove or reorder one section.

Step 6: Add new sections with component prompts

Templates cannot cover everything. When you need a block the template does not include, pick one from the component catalog, copy its prompt and paste it into agent chat:

Add the section described below as a new component on the page I referenced with @, after the hero. Match the fonts and colors already used in this project, keep every link as a placeholder (#), and do not edit other files.

[Paste the component prompt here]

Reference the page with @ in the same message. The agent then knows exactly where the section goes and how the rest of the page is built.

Common mistakes

  • Accepting everything without reading. Large prompts can touch several files. Reject changes that are not part of what you asked for.
  • Repeating the same instruction. If you type “keep the fonts” more than twice, move it into the rules.
  • Using a cloud agent with MCP. If you connect Weblisy through MCP, use a local chat. Cloud agents cannot see MCP servers that you added on your own computer.
  • Skipping the browser. The diff can look right while the page looks wrong. Always check the preview, including a narrow window for mobile.
  • Forgetting Git. Commit after each working step so you can go back if a later request goes wrong.

Cursor compared with other tools

Cursor is at its best when you want control. You see the files, you see the diffs and you decide what stays. If you would rather describe the goal and let the AI handle the files, Claude Code and Codex work in a more hands-off way. If you do not want to set up anything on your computer, Lovable runs in the browser.

The comparison in Best AI Tools for Building Websites helps you pick, and the Cursor page collects the setup steps, a starter prompt and the answers to common questions in one place.

A simple routine to repeat

Once the template is set up, this loop covers most of the work:

  1. Choose one section.
  2. Ask the agent for one change, with an @ reference.
  3. Read the diff and accept what fits.
  4. Check the browser.
  5. Commit.

It is slower than asking for the whole site at once, and it is also why the result stays under control.