Introduction
UI Rules is design-system-as-context for AI. It stores your brand's styles and rules and serves them to AI coding tools over MCP, so the UI those tools generate matches your brand.
The problem
AI coding tools are good at producing working UI, but they do not know your brand. Ask one to build a screen and you get generic results: default colors, the wrong fonts, off-brand spacing, and components that ignore the patterns your team already agreed on. You then spend your time correcting the same things on every generation.
The tool is not the problem. It just has no context for your design system. UI Rules gives it that context.
How it works
Your brand is the source of truth. It holds your styles (the actual token values for color, typography, radius, shadow, spacing, and sizing) plus your rules (named guidelines for how UI should be built). UI Rules serves that brand to your AI tools over MCP through a connection key, so every generation starts from your design language instead of a generic default. Projects (your connected apps) inherit the brand untouched and can layer sparse overrides on top. On conflict the project wins, and the brand is never modified.
Core concepts
- Organization: the account that holds your brands, teammates, and billing.
- Brand: a complete design language plus ruleset. It is the source of truth, served to AI tools by default and inherited by every project.
- Project: a connected app. It serves the brand ruleset as-is, plus any sparse overrides you add.
- Rule: a single guideline with text, a Guidance marker (Do, Don't, Caution, or Info), and an Importance (Required, Recommended, or Optional). Rules live in named groups.
- Style: a brand's token values for one category (color, typography, radius, shadow, spacing, or sizing), each with its own rules.
- MCP connection: how your brand reaches AI tools. Your styles, rules, and component vocabulary are exposed over MCP through a connection key.
