Use brand guidelines and design tokens in Claude Code
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.
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.
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.
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.
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.
Check the connection
Ask "Is UI Rules connected?" to check.
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.
claude mcp add --transport http uirules https://mcp.uirules.com/mcp \ --header "x-api-key: uir_sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
Keep your key private. Do not commit it to source control or paste it into shared channels.
Troubleshooting
If the server does not connect or the AI ignores your brand, see Troubleshooting.
Related guides
- 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.
