Connections
Connect your design system to your AI tools
Connect Cursor, Claude Code, Codex, and v0 to the same brand guidelines and design tokens. Your tools follow your design system as they build, keeping your work on-brand across apps.
Demo video coming soon
A quick look at connecting an AI tool and getting your first on-brand output.
Works with the AI tools you already use
Choose your tool below, then use its setup guide to connect your project. Your guidelines and styles stay together in UI Rules.
Adjust project guidelines from your AI tool
Give your tool editing permission, then ask it to add or update a guideline for the project you are building.
Ask where you already are
Spot something to fix mid-build and tell your agent, without leaving your editor.
Your project keeps the change
Authorized edits apply to this project. Other projects keep their existing brand guidelines.
Cursor
Buttons shouldn’t rely on color alone to look clickableUpdating in UI Rules
UI RulesProject updated
Never rely on color alone to signal that a Button is interactive.
Connect your design system through MCP
MCP (Model Context Protocol) is the connection that lets AI tools read information from other apps. UI Rules uses it to share your guidelines, design tokens, and available components with the tools you connect.
One connection
Connect each AI tool over MCP so it can request your project’s guidelines and design tokens.
Guided setup for developers
The UI Rules command-line tool helps developers connect Cursor or Claude Code. It can also export design tokens as files.
Guidelines stay in UI Rules
Maintain your guidelines in UI Rules instead of copying their contents into each project.
Choose what tools can access
Connections read your project by default. Grant editing permissions only when you want a tool to make changes.
Control what your connected tools receive
Change it once
Edit a brand guideline or design token in UI Rules.
Share live updates
Tools using the project’s live version pick up your latest guidelines and design tokens.
No files to juggle
Keep shared brand guidance in UI Rules rather than duplicating it across tool-specific files.
Keep a stable version
Pin a project to a saved version when you want to keep in-progress edits separate.
Soon
Built for your shadcncraft library
shadcncraft is our sister library of premium shadcn components and blocks. Connect it and you can attach your own guidelines to each component and choose which blocks each project uses. Own shadcncraft and your Pro trial runs for 30 days instead of 14.
Find your AI tool’s setup guide
Follow the setup steps for your tool, then check that it can read your project’s guidelines and design tokens.
How the design system MCP connection worksUse your brand guidelines in CursorReal support when you need it
Stuck on a connection or a rule? Reach us by email or in Discord, and get help from people who use it too.
Get support
Bring your design system into your next build
Connect your tools to the brand guidelines and design tokens your team already uses.