# UI Rules

> Bring your brand guidelines and design tokens into Cursor, Claude Code, Codex, and v0. Keep your styles and design guidance together in UI Rules.

UI Rules is the product name. Rules is the feature for organizing design guidelines.
Connected AI tools can read guidelines and brand styles through Model Context Protocol (MCP).
Review generated designs against your guidelines; a connection does not guarantee compliance.

## Product

- [UI Rules](https://uirules.com): A workspace for brand and design system guidelines, shared with connected AI tools as they build websites and apps.
- [Rules: manage design guidelines](https://uirules.com/features/rules): Write and organize guidelines, mark their guidance and importance, and start with curated design guidance.
- [Styles: manage brand colors, typography, and spacing](https://uirules.com/features/styles): Manage brand styles and import values from CSS, a website scan, or Figma variables.
- [Agent: update guidelines in plain language](https://uirules.com/features/agent): Describe a change to guidelines or styles, then review and approve the proposed update.
- [Connections: share guidelines with AI tools](https://uirules.com/features/connections): Connect Cursor, Claude Code, v0, Lovable, Codex, and Figma Make through Model Context Protocol (MCP).
- [FAQ](https://uirules.com/faqs): What UI Rules is, who it is for, and how it connects to AI tools.

## Docs: Start here

- [Introduction](https://uirules.com/docs.md): UI Rules stores your brand's design rules and serves them to AI coding tools over MCP, so AI-generated UI matches your brand.

## Docs: Quickstart

- [Quickstart](https://uirules.com/docs/quickstart.md): Create a brand, author your first rules, and serve them to an AI coding tool over MCP in a few minutes.

## Docs: Organizations

- [Account](https://uirules.com/docs/organizations/account.md): Manage your personal profile and account settings in UI Rules.
- [Members and roles](https://uirules.com/docs/organizations/members-and-roles.md): Invite teammates to your organization and choose what each one can do with owner, admin, and member roles.
- [Overview](https://uirules.com/docs/organizations/overview.md): Understand the organization, the workspace that holds your brands, members, and billing in UI Rules.
- [Usage](https://uirules.com/docs/organizations/usage.md): See how much of each plan limit your organization has used: brands, projects, seats, and this month's MCP calls and agent turns.

## Docs: Brands

- [Creating and managing brands](https://uirules.com/docs/brands/creating-and-managing.md): Create a brand, run several brands in one organization, and switch between them.
- [Overview](https://uirules.com/docs/brands/overview.md): A brand is a complete design language plus ruleset that UI Rules serves to your AI coding tools over MCP.
- [Brand settings](https://uirules.com/docs/brands/settings.md): Rename a brand, write the brief agents read alongside its rules, check its ruleset's health, and delete a brand.

## Docs: Styles

- [Colors](https://uirules.com/docs/styles/colors.md): Author your brand's color tokens with light and dark values, organized into general, chart, and sidebar groups, with rules per token.
- [Importing styles](https://uirules.com/docs/styles/importing-styles.md): Bring your brand's token values into UI Rules from Figma variables, a website, a pasted CSS theme, or a shadcn preset code.
- [Layout](https://uirules.com/docs/styles/layout.md): Author General layout rules for the grids and stacks AI tools compose with.
- [Overview](https://uirules.com/docs/styles/overview.md): Styles hold your brand's actual token values and the rules that govern them, served to AI tools alongside every project.
- [Radius](https://uirules.com/docs/styles/radius.md): Set your brand's corner radius token scale and author General radius rules that AI tools follow.
- [Shadows](https://uirules.com/docs/styles/shadows.md): Set your brand's shadow token scale and author General shadow rules that AI tools follow.
- [Sizing](https://uirules.com/docs/styles/sizing.md): Author General sizing rules so AI tools use dimensions that fit your brand.
- [Spacing](https://uirules.com/docs/styles/spacing.md): Author General spacing rules so AI-generated layouts breathe the way your brand intends.
- [Typography](https://uirules.com/docs/styles/typography.md): Set your brand's Sans, Serif, and Mono font families and the text size scale, previewed with brand specimens.

## Docs: Library

- [Accessibility](https://uirules.com/docs/library/accessibility.md): Author accessibility rules so AI tools build interfaces that work for everyone.
- [Blocks](https://uirules.com/docs/library/blocks.md): Author rules for composed blocks and control which ones AI tools can see.
- [Brand assets](https://uirules.com/docs/library/brand-assets.md): Upload your logo and author logo-usage rules so AI tools place it correctly.
- [Components](https://uirules.com/docs/library/components.md): Author rules for each component in your brand vocabulary and control which ones AI tools can see.
- [Content](https://uirules.com/docs/library/content.md): Author voice and tone rules so AI tools write copy that sounds like your brand.
- [Iconography](https://uirules.com/docs/library/iconography.md): Pick the icon library your brand's components draw from, see what it needs installed, and author the rules AI tools follow when they place an icon.

## Docs: Rules

- [AI Enhance](https://uirules.com/docs/rules/ai-enhance.md): Enhance rewrites a rough rule into a precise one, tells you what it changed and why, and lets you edit every part before you apply it.
- [Locks](https://uirules.com/docs/rules/locks.md): Lock a rule, a rule group, or a library entry so it cannot be edited, reordered, deleted, or switched until someone unlocks it.
- [Organizing rules](https://uirules.com/docs/rules/organizing.md): Group your rules so related guidance stays together and AI tools read a clear, structured ruleset.
- [Writing rules](https://uirules.com/docs/rules/writing-rules.md): Learn the UI Rules rule model and how to write clear, well-weighted rules that AI tools follow.

## Docs: Projects

- [Connecting an app](https://uirules.com/docs/projects/connecting-an-app.md): Connect an app to a project and serve your brand ruleset to AI tools over MCP, by signing in or with a connection key.
- [Overrides](https://uirules.com/docs/projects/overrides.md): Apply token, visibility, and rule overrides per project to diverge from the brand without modifying it.
- [Overview](https://uirules.com/docs/projects/overview.md): Projects are connected apps that serve your brand ruleset and apply sparse overrides on top.

## Docs: Agent

- [Making changes](https://uirules.com/docs/agent/making-changes.md): The Agent proposes token, rule, visibility, and logo changes, each with a scope and a preview, so you can apply them one at a time.
- [Overview](https://uirules.com/docs/agent/overview.md): The Agent is an AI panel that turns a plain-language request into proposed changes to your brand's tokens, rules, and visibility.

## Docs: Connect to AI tools

- [Use brand guidelines and design tokens in Claude Code](https://uirules.com/docs/connect/claude-code.md): 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.
- [Set up from the command line (soon)](https://uirules.com/docs/connect/cli.md): The UI Rules CLI will connect Claude Code or Cursor from a terminal and export your design tokens as a file your app imports. It is not published yet.
- [Apply your design system guidelines in Codex](https://uirules.com/docs/connect/codex.md): Connect Codex to UI Rules over MCP, for one project or everywhere, so the UI it generates follows your brand and design system guidelines.
- [Use brand guidelines and design tokens in Cursor](https://uirules.com/docs/connect/cursor.md): Connect Cursor to your brand guidelines and design tokens in UI Rules. Make your colors, typography, and design guidance available while you build.
- [Connect any MCP tool to your design system guidelines](https://uirules.com/docs/connect/custom-mcp.md): Connect an AI tool that has no guide of its own to UI Rules as a remote MCP server, by signing in or with an API key header.
- [Apply your design system guidelines in Figma Make](https://uirules.com/docs/connect/figma-make.md): Connect Figma Make to UI Rules as a custom connector, so it builds with your brand and design system guidelines, styles, and components.
- [Import Figma variables with the UI Rules plugin](https://uirules.com/docs/connect/figma-plugin.md): Install the UI Rules plugin from Figma Community and import your variable collections as brand design tokens, light and dark modes included.
- [Apply your design system guidelines in Lovable](https://uirules.com/docs/connect/lovable.md): Connect Lovable to UI Rules as a custom MCP connector, so it builds to your brand and design system guidelines rather than its own defaults.
- [Connect your design system guidelines to AI tools](https://uirules.com/docs/connect/overview.md): Choose a setup guide for Cursor, Claude, Codex, VS Code, v0, Lovable, Figma Make, or any other MCP tool. Connect your brand guidelines and design tokens through UI Rules.
- [MCP tools reference](https://uirules.com/docs/connect/tools-reference.md): Every tool a connected AI agent gets from UI Rules over MCP: what each one is for, the order the server asks agents to use them in, and which connection-key scope each needs.
- [Connect troubleshooting](https://uirules.com/docs/connect/troubleshooting.md): Fixes for common problems connecting AI coding tools to your UI Rules brand over MCP.
- [Apply your design system guidelines in v0](https://uirules.com/docs/connect/v0.md): Connect v0 by Vercel to UI Rules as a custom MCP connection, so it builds to your brand and design system guidelines rather than its own defaults.
- [Use brand guidelines and design tokens in VS Code](https://uirules.com/docs/connect/vscode.md): Connect VS Code to your brand guidelines and design tokens in UI Rules in one click, so its AI builds with your colors, typography, and design guidance.

## Docs: Workspace

- [Activity](https://uirules.com/docs/workspace/activity.md): A timeline of every change to your brand, filterable by who made it and what it touched.
- [API keys](https://uirules.com/docs/workspace/api-keys.md): See every key that reads your brand, what each one is allowed to do, when it was last used, and revoke the ones you no longer want.
- [Command menu](https://uirules.com/docs/workspace/command-menu.md): Press ⌘K to search everything the workspace can reach: pages, components, blocks, tokens, rule groups, and rules, each a direct jump.
- [Trash](https://uirules.com/docs/workspace/trash.md): Deleting is reversible. Deleted items move to Trash, where you can restore them or remove them for good.
- [Version history](https://uirules.com/docs/workspace/version-history.md): Save your guidelines, compare changes, restore an earlier version, and choose when updates reach your AI tools.

## Docs: Billing

- [Plans](https://uirules.com/docs/billing/plans.md): What each UI Rules plan includes: brands, projects, seats, monthly usage, and the features that unlock on Pro and above.
- [shadcncraft Pro (soon)](https://uirules.com/docs/billing/shadcncraft-pro.md): Connecting a shadcncraft Pro license to UI Rules is coming. When it lands, the bundle's Pro components and blocks join your library, with rules attached, ready for your AI tools.
- [Trial](https://uirules.com/docs/billing/trial.md): How the app-granted trial works, when it starts, and what happens when it ends.

## Docs: Changelog

- [Docs launched](https://uirules.com/docs/changelog/2026-06-docs-launched.md): The UI Rules documentation site is live.
- [A brand you can steer](https://uirules.com/docs/changelog/2026-08-brand-workspace.md): A setup checklist on the brand overview, a command menu that browses your whole brand, brand and organization logos, and shadcn preset imports.
- [Rule search that finds the right rules](https://uirules.com/docs/changelog/2026-08-search-that-finds-things.md): Search now expands synonyms, ranks by relevance, and says plainly when nothing matched instead of returning noise.
- [Easier connections, clearer imports, and token delivery checks](https://uirules.com/docs/changelog/2026-09-connections-imports-and-token-delivery.md): A roundup of improvements to tool connections, Figma imports, rules, token exports, project history, and account settings.
- [Website imports, guided setup, and clearer AI changes](https://uirules.com/docs/changelog/2026-10-website-imports-guided-setup-and-ai-changes.md): A roundup of website style imports, guided brand setup, more reliable CSS imports, previewed AI changes, and clearer plan limits.
- [Changelog](https://uirules.com/docs/changelog.md): What's new in UI Rules, with the latest changes listed first.