---
title: "Use brand guidelines and design tokens in Cursor"
description: "Connect Cursor to your brand guidelines and design tokens in UI Rules. Make your colors, typography, and design guidance available while you build."
label: "Cursor"
date: "2026-10-05"
---

Build with your brand in Cursor. UI Rules brings your design guidelines and tokens, including colors, typography, and spacing, into the build so Cursor follows your design system.

This guide explains how to connect your UI Rules project and check the connection. It uses MCP (Model Context Protocol), which lets AI tools access information from other apps.

## Prerequisites

- Cursor installed.
- A UI Rules brand with styles and rules configured. New brands start on a default theme, so import your brand styles first if the brand overview's setup guide prompts you to.

You sign in to UI Rules as part of the setup, so there is no key to copy. The **Connect** dialog in the workspace top bar shows the same steps when you pick **Cursor**.

## Which way to connect

- **Everywhere.** One click from the Connect dialog. It applies to every project in Cursor on this computer. The Connect dialog opens on this one.
- **For one project.** A config file in the project folder.

<Tabs items={["Everywhere", "For one project"]}>
<Tab value="Everywhere">

<Steps>
<Step>
### Add the server

Click **Add to Cursor** in the Connect dialog, then **Install** when Cursor asks.
</Step>
<Step>
### Sign in

In Cursor's MCP list, click **Authenticate** next to `uirules`. A UI Rules page opens in your browser. Sign in if asked, select the project, and click **Authorize**.
</Step>
<Step>
### Check the connection

Ask **"Is UI Rules connected?"** to check.
</Step>
</Steps>

</Tab>

<Tab value="For one project">

<Steps>
<Step>
### Add the server

Create or open `.cursor/mcp.json` in your project folder and paste this.

```json
{
  "mcpServers": {
    "uirules": {
      "url": "https://mcp.uirules.com/mcp"
    }
  }
}
```
</Step>
<Step>
### Sign in

In Cursor's MCP list, click **Authenticate** next to `uirules`. A UI Rules page opens in your browser. Sign in if asked, select the project, and click **Authorize**.
</Step>
<Step>
### Check the connection

Ask **"Is UI Rules connected?"** to check.
</Step>
</Steps>

</Tab>

</Tabs>

## Use an API key instead

For the everywhere setup, you can use an API key instead of signing in. In the Connect dialog, open **Use an API key instead** and click **Create API key**, or **Choose permissions** to limit what it can do. The key is shown once.

Instead of the add and sign-in steps, create or open `~/.cursor/mcp.json` and paste this with your key in place of the placeholder.

```json
{
  "mcpServers": {
    "uirules": {
      "url": "https://mcp.uirules.com/mcp",
      "headers": {
        "x-api-key": "uir_sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      }
    }
  }
}
```

<Callout type="warn">
The key goes in your user file, never the project's `.cursor/mcp.json`, which is shared with the repo.
</Callout>

## Troubleshooting

If the server does not connect or the AI ignores your brand, see [Troubleshooting](/docs/connect/troubleshooting).

## How is UI Rules different from Cursor rules?

Cursor's own rules provide instructions for its AI, including project-specific coding conventions. UI Rules gives your connected AI tools shared brand guidelines and design tokens to follow as they build. You can use both together. See [Cursor’s rules documentation](https://cursor.com/docs/rules) for its native rule system.

## Related guides

- [Manage design tokens in Styles](/features/styles): keep your colors, typography, and spacing together.
- [Organize design guidelines in Rules](/features/rules): explain how your brand styles and components should be used.
- [Import Figma variables](/docs/connect/figma-plugin) or [import a CSS theme](/docs/styles/importing-styles) to bring in existing brand styles.