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.

Add the server

Click Add to Cursor in the Connect dialog, then Install when Cursor asks.

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.

Check the connection

Ask "Is UI Rules connected?" to check.

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.

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

The key goes in your user file, never the project's .cursor/mcp.json, which is shared with the repo.

Troubleshooting

If the server does not connect or the AI ignores your brand, see 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 for its native rule system.

Manage design tokens in Styles: keep your colors, typography, and spacing together.
Organize design guidelines in Rules: explain how your brand styles and components should be used.
Import Figma variables or import a CSS theme to bring in existing brand styles.

Use brand guidelines and design tokens in Cursor