Keep AI on-brand
Generate consistent UI from the AI tools you already use, guided by your brand and design system rules.
Why UI Rules
From generic output to on-brand by default
Without UI Rules
With UI Rules
Without UI Rules: AI tools default to generic styling
With UI Rules: Output starts from your brand, styling and tone of voice
Without UI Rules: You recreate your brand from scratch in every AI tool
With UI Rules: Set up your brand once and send it to every AI tool. Scan your site, or import your styles, CSS, or a design.md (soon)
Without UI Rules: Your guidelines sit in docs the AI never reads
With UI Rules: Your guidelines go straight to the AI tools, applied to every output
Without UI Rules: Rules are pasted into every prompt, wasting tokens and eventually dropping out of the context window
With UI Rules: Only the relevant rules are sent to your AI tools, preserving your tokens
Without UI Rules: Accessibility is something you patch afterward
With UI Rules: Accessibility rules are applied as the UI is generated
Without UI Rules: Generated code drifts from your components
With UI Rules: Your own component library is reused, not one-off code
Benefits
Your brand and design system, connected to your AI tools
Rules from top teams, out of the box
Start with rules sourced and curated from the world's best brand and design systems, not a blank page. Your generated UI is more accessible, more usable, and ships faster.
- DoRequiredBody text meets 4.5:1 contrast.
- Don’tRequiredNever use a placeholder as the label.
- InfoOptionalOutline buttons are for secondary actions.
On-brand by default
Generated UI starts from your color, type, and spacing. Bring what you have: scan your site, or drop in your existing styles, CSS, or a design.md (soon).
Cursor
Build me a booking system
Connecting to UI Rules over MCP…
Brand loaded215 rules · 38 styles
AaAa
Starting build…
Up-to-date in every AI tool
Connect once and your rules and styles are available across every AI tool you use, every time. Make an update, and every tool stays in sync.
You changed the corner radius
0.5rem → 0.75rem
Updated in 5 apps
Describe it in plain language
Manage your rules and styles by describing the change. The agent proposes, you approve. Nothing happens without you.
make all corners square
Sure. Here’s what I’d change:
--radius0.5rem→0RejectApprove
How it works
One app for on-brand UI, everywhere
Make me a pricing page
Your AI tool
MCP
Your rules
Output follows your rules
1
Set your rules and styles
Load your brand, or start from the expert defaults.
2
Connect an AI tool
One connection over MCP. No plugin, nothing in your codebase.
3
See your rules applied
Every prompt comes back on-brand, the same every time.
I’m a multi-award-winning designer with two decades leading design systems and teams across top agencies and large organizations. I built UI Rules to productize that thinking, so everything I know about keeping a brand consistent lives somewhere your AI tools can actually use.
Hamish O’Neill
Founder of UI Rules
Frequently asked questions
Be the first to use the app
Set your brand rules once and let every AI and design tool follow them.