Rules
Your design guidelines, followed by your AI tools
Turn how your brand looks, works, and sounds into guidelines your AI tools follow. Set what is required, recommended, or optional, and bring those decisions into every build.
A quick look at writing a rule, setting its type and importance, and watching your AI tools follow it.
Rules in action
See what clear guidelines change
This example shows how three guidelines shape a signup form: readable contrast, visible field labels, and button text that explains the action.
Generic output
Sign Up Form
Please enter your information in the fields below to proceed.
Email
No rules
Branded output
Create account
Enter your details to continue.
Email
- Body text meets 4.5:1 contrast.
- Never use a placeholder as the label.
- Button labels say what happens, in sentence case.
Start with guidelines you can make your own
Start with curated guidelines for styling, component usage, and accessibility. Keep what fits your brand, adapt what needs to change, or write your own.
3 of 3 rules in use
Body text meets 4.5:1 contrast.
Never use a placeholder as the label.
Outline buttons are for secondary actions.
Guidelines for how your brand looks, works, and sounds
Cover the design decisions that colors and fonts alone cannot explain.
AaBritti Sans
Radius 0.5rem
Styles
How to use your brand's colors, typography, spacing, and corner styles.
Save changesCancel
Usage
How your components and blocks go together, so AI tools use them correctly.
Error: invalid inputThat email is already registered. Sign in instead.
Voice and tone Pro
How your product speaks, from button labels to error messages.
Email addressyou@example.com
Contrast 4.8:1Accessibility
Guidance on readable contrast, clear labels, and visible keyboard focus.
Give AI the guidance relevant to its task
Organize your guidelines by where they apply, so connected tools can find the guidance for the part of your interface they are building.
Focused guidance
Tools load the guidelines for the area they are building, such as buttons or forms, and check their work against them.
One shared source
Give Cursor, Claude Code, Codex, and v0 access to the same brand guidelines, without maintaining a separate copy for each tool.
Updates you control
Update brand guidelines in UI Rules, or let an authorized AI tool customize them for a project. Other projects keep their shared brand guidance.
You write
Make sure text lines never get too long
Enhance
Enhanced
Keep body text line length at or under 70 characters.
DoRecommendedDiscardApply
Enhance Pro
Make your guidelines clearer
Write what you mean in plain language. Enhance suggests clearer wording, a guidance type, and an importance level. Review and edit the suggestion before applying it.
Manage the whole system
Share brand guidelines across projects, and save versions you can return to.
Brand215 rules · 38 styles
MarketingLarger buttons
ProductTighter spacing
Internal toolsAAA contrast
Shared guidance, with room to adapt
Set your guidelines and styles once for the whole brand, then let each project adjust what it needs. Everything else stays shared.
- v3Contrast rule set to RequiredLive · 2 hours ago
- v2Added voice and tone rulesYesterday
- v1Primary color updated4 days ago
Version history for your design system
Save a version of your guidelines and styles before a big change. Compare saved versions and restore an earlier one when you need it.
Tell AI what matters most
In UI Rules, each guideline is saved as a rule. Choose Do, Don’t, Caution, or Info, then set its importance to Required, Recommended, or Optional. Add a reason so your team and AI tools understand why it matters.
Read the guide to using design system guidelines in Claude Code
Put your design guidelines to work with AI
Keep exploring
Styles
Your color, type, spacing, logo, and icons, ready for every AI tool you connect.
Agent
Describe a change in plain language and preview before it applies.
Connections
Connect your rules to Cursor, Claude Code, v0, Lovable, Codex, and Figma Make.