# How to use a website template in Cursor

> Set up a website template in Cursor: project rules for your design system, agent mode for edits, MCP config for sections and tokens, and prompt packs.

By the Frontier team. Published 2026-10-05, updated 2026-10-05.

To use a website template in Cursor, open the template's folder as a project, add a project rule in `.cursor/rules` that tells the agent your design rules, then make changes in agent mode one request at a time and review each diff. If you want the agent to pull ready-made sections and design tokens, add an MCP server in `.cursor/mcp.json` or `~/.cursor/mcp.json`. If you bought a prompt pack, paste it into agent mode and let the agent build the project.

Cursor is a code editor with an AI agent built in, which makes it a comfortable place to customise a template: you see the files, the diff and the result in one window. The risk is the same as with any coding agent. A template is a set of design decisions, and an agent that cannot see those decisions will make new ones. The setup below fixes that.

## Start with a template built as plain files

Agents work best on code they can read end to end. The HTML edition of a template, static HTML, CSS and JS, is the simplest case: every page is a file, the styles are plain CSS, and nothing is hidden behind a builder. Our [Cursor website templates](collections/cursor-website-templates.html) collection lists the templates we have prepared for this, and the [HTML website templates](collections/html-website-templates.html) collection lists every template with an HTML edition ready.

We use [Relay](templates/relay.html) as the running example. It is an AI agent platform template with 33 pages, code samples with a TypeScript and Python toggle, and product mock-ups built as editable source, which gives the agent a lot of real structure to follow.

Open the folder in Cursor, then commit the template as delivered with git before the first edit. Cursor's agent applies edits as it works, so a clean baseline makes it easy to compare and roll back whole steps.

![The top of Relay's Home V1 page in the light theme.](https://frontiertemplates.com/img/blog/use-a-website-template-in-cursor-1.jpg)

*Relay, Home V1*

## Write project rules in .cursor/rules

Project rules are how you tell Cursor's agent what the template's design system is. According to [Cursor's rules documentation](https://cursor.com/docs/rules), project rules live in `.cursor/rules` as `.mdc` files, are version-controlled with the project, and each rule has frontmatter that controls when it applies:

- `alwaysApply: true` includes the rule in every request.
- `globs` attaches the rule when a matching file is in context, for example only when a stylesheet is open.
- A `description` without globs lets the agent decide when the rule is relevant.
- With none of these, the rule applies only when you @-mention it.

You can create a rule by typing `/create-rule` in Agent and describing it, or by opening Customize in the sidebar, going to Rules and choosing Add Rule. For a template, one always-on rule for design and one for content is enough to start:

```
---
description: Design rules for this website template
alwaysApply: true
---
- This is a static HTML, CSS and JS site. Do not add a framework, package or build step.
- Colours, type sizes, spacing and radii come from CSS custom properties. Use the tokens; never hard-code a value that has a token.
- Do not add new colours or fonts without asking.
- Light and dark themes are separate token sets. Every change must work in both.
- Header and footer markup is repeated on every page. When you change it, change every page and list the files.
- Product mock-ups are HTML. Edit their text; never replace them with images.
- Keep new headlines close to the original length so they wrap the same way at desktop and phone widths.
- Do not invent customers, numbers or testimonials.
```

Read the style guide page yourself first and add anything specific to the template: the font pairing, how sections are spaced, how buttons are styled. The more the rule names real tokens and patterns, the less the agent improvises.

![The top of Relay's style guide page in the light theme.](https://frontiertemplates.com/img/blog/use-a-website-template-in-cursor-2.jpg)

*Relay, Style guide*

## Make changes in agent mode

Cursor offers several modes. Per [Cursor's help on agent mode](https://cursor.com/help/ai-features/agent), Agent builds and edits, Ask explores code without editing it, and Plan is for complex changes where you want to review the approach first. Agent's edits are applied as it works, and you review them in the diff view and reject anything you do not want.

Use them in that order on a new template:

1. **Ask** first: "Explain how pages share the header, footer and styles, and where the design tokens are defined." You are checking the agent understands the structure.
2. **Plan** for structural work: removing two of the three home pages, renaming sections across the site, restructuring navigation. [Plan mode](https://cursor.com/docs/agent/plan-mode) researches the codebase, asks clarifying questions and produces a plan you can edit before anything is built.
3. **Agent** for the edits themselves, one outcome per request.

Specific requests produce clean diffs. "In pricing.html, rename the three plans to Starter, Team and Scale, and keep the feature rows as they are" is reviewable in a minute. "Make the site about our product" produces a diff nobody can review.

When the agent finishes a change, check the diff for hard-coded colours, inline styles and duplicated classes, then open the page in the browser in both themes and at phone width, around 390px. Commit each accepted step separately. For copy, our post on [writing a landing page for an AI product](blog/writing-a-landing-page-for-an-ai-product.html) is a useful brief to hand the agent.

## Connect the MCP server

The Frontier MCP server gives Cursor real sections, design tokens and page blueprints from our templates as tools the agent can call. Cursor's [MCP documentation](https://cursor.com/docs/mcp) describes two config locations: `.cursor/mcp.json` in a project for project-specific tools, and `~/.cursor/mcp.json` in your home directory for tools available everywhere. Both files are merged, and the project file wins if the same server name appears in both.

Add this to `~/.cursor/mcp.json`:

```
{
  "mcpServers": {
    "frontier": {
      "command": "npx",
      "args": ["-y", "@frontiertemplates/mcp"],
      "env": { "FRONTIER_LICENSE_KEY": "ft_your_key" }
    }
  }
}
```

> Put the version with your licence key in the global file in your home directory. A project `.cursor/mcp.json` is usually committed, and your key should not end up in a repository.

Free sections work without a key. Once the server is connected, you can ask the agent in plain language for things like "add a pricing section from Frontier that uses this site's tokens". The [MCP page](mcp.html) lists what the server provides, and our guide to [the design MCP server for coding agents](blog/design-mcp-server-for-coding-agents.html) covers when it helps and what it does not do.

## Use a prompt pack in agent mode

The prompt pack format is the route for teams who want the site rebuilt inside their own project rather than edited from our files. It is delivered as one short message. Paste it into Cursor in agent mode, and the agent fetches the rest from our store, checked against your licence key: the entry document, page specs as Markdown, the assets and reference screenshots. It then builds the project folder.

This needs agent mode specifically. A chat that cannot fetch files and write a project folder cannot do it. A key only works for templates you have bought, and requests are rate limited per hour. Meetly, Relay, Mordant, Merrow and Northwind have prompt packs ready today; the rest are in production. The [prompt page](prompt.html) has the full explanation.

After the build, add project rules for the new codebase in the same way as above, so later edits follow the same decisions.

## Check the result before you ship

Agents are quick to make a page look right at the width you are looking at. Before you deploy:

- Open every page at 390px and 1440px in both themes.
- Click every header and footer link; removed pages leave dead links.
- Search the project for demo names, sample prices and placeholder emails. The people and companies in our demos are fictional.
- Check forms show their success state and send somewhere real.

![The top of Foldline's Home V1 page at phone width.](https://frontiertemplates.com/img/blog/use-a-website-template-in-cursor-3.jpg)

*Foldline, Home V1 at 390px*

Our [accessibility checklist](blog/website-template-accessibility-checklist.html) is a quick final pass. If you also use Claude Code, the [Claude Code version of this workflow](blog/edit-a-website-template-with-claude-code.html) does the same job with a CLAUDE.md file in place of project rules.

## Which setup to use

| Goal | Setup in Cursor |
| --- | --- |
| Our site with your copy and brand | HTML edition, project rules, agent mode |
| The site rebuilt in your own codebase | Prompt pack in agent mode, then project rules |
| New pages or sections that match a design system | MCP server plus project rules |

For a developer-facing AI product, Relay gives the agent code samples, an integrations index and a changelog to work from.

Template: [relay](https://frontiertemplates.com/templates/relay)

Canonical: https://frontiertemplates.com/blog/use-a-website-template-in-cursor