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

Build with your brand in Claude. UI Rules brings your design guidelines and tokens, including colors, typography, and spacing, into the build so Claude 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

- Claude Code, the Claude desktop app, or a claude.ai account.
- 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. If you would rather use an API key, see [Use an API key instead](#use-an-api-key-instead).

## Which way to connect

- **Everywhere.** A connector on your Claude account. It applies wherever you use that account, in claude.ai and the Claude desktop app, including chats about other work. On a Team or Enterprise plan an Owner adds the connector. The Connect dialog opens on this one.
- **For one project.** Claude Code, added from a terminal in your project folder.

The **Connect** dialog in the workspace top bar shows the same steps when you pick **Claude**.

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

<Steps>
<Step>
### Add the connector

Click **Add to Claude** in the Connect dialog. claude.ai opens the connector form, already filled in.

Or, in the Claude app, click **Customize**, then **Connectors** in the left rail, then **+ → Add custom connector**, and enter:

- **Name**: `UI Rules`
- **Remote MCP server URL**: `https://mcp.uirules.com/mcp`

Click **Continue**, keep the detected settings, and click **Add**.
</Step>
<Step>
### Connect

Adding the connector does not connect it. Click **Connect**. A UI Rules page opens in your browser. Sign in if asked, select the project, and click **Authorize**.
</Step>
<Step>
### Allow the tools

Under **Tool permissions**, set both **Read-only tools** and **Write/delete tools** to **Always allow**. Both default to needing approval, so without this Claude asks before every rule it fetches and every note it saves.
</Step>
<Step>
### Check the connection

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

</Tab>

<Tab value="For one project">

<Steps>
<Step>
### Open a terminal in your project folder

In the Claude desktop app, open your project, send any message, and press **⌘J**.
</Step>
<Step>
### Add the server

Run this.

```bash
claude mcp add --transport http uirules https://mcp.uirules.com/mcp
```
</Step>
<Step>
### Sign in

Run this. A UI Rules page opens in your browser. Sign in if asked, select the project, and click **Authorize**.

```bash
claude mcp login uirules
```
</Step>
<Step>
### Check the connection

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

If you run Claude Code inside Cursor, restart it. Claude Code older than 2.1.186 has no `claude mcp login`. Run `/mcp` inside Claude Code and authenticate there.

</Tab>

</Tabs>

## Use an API key instead

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, and the steps below it already include it.

- **Everywhere:** in the Connect step, paste the key on the UI Rules page instead of signing in.
- **For one project:** instead of the add and sign-in steps, run the add command with the key as a header.

  ```bash
  claude mcp add --transport http uirules https://mcp.uirules.com/mcp \
    --header "x-api-key: uir_sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  ```

<Callout type="warn">
Keep your key private. Do not commit it to source control or paste it into shared channels.
</Callout>

## Troubleshooting

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

## 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.