Used by top design teams

Make AI-generated UI follow your design rules

Designers and teams: Store your brand styles and UI rules in one place, then use them across the AI and design tools you already use.

Join waitlist

Problem

The gaps in AI coding apps

Everything looks the same.

AI tools generate UI using generic defaults. That’s fast, but it rarely matches your colors, typography, or visual style. Teams end up fixing the same issues by hand.

Design rules aren’t part of the coding flow

Most design guidelines live in docs that AI tools don’t see. If rules aren’t part of the active coding context, they get ignored.

Solution

How we solve it

Brand styles

Colors (423)

Typography

font-sans: Britti Sans +7 more

font-serif: Georgia +2 more

font-mono: DM Mono +3 more

Drop files, or browse

globals.css file

Globals.css

95 KB / 132 KB

Uploading

STEP 1

Connect your CSS

Point UI Rules to your existing CSS variables. We extract your colors, typography, spacing, and radius as reusable rules.

Brand styles

Colors (423)

Typography

font-sans: Britti Sans +7 more

font-serif: Georgia +2 more

font-mono: DM Mono +3 more

Drop files, or browse

globals.css file

Globals.css

95 KB / 132 KB

Uploading

STEP 1

Connect your CSS

Point UI Rules to your existing CSS variables. We extract your colors, typography, spacing, and radius as reusable rules.

Brand styles

Colors (423)

Typography

font-sans: Britti Sans +7 more

font-serif: Georgia +2 more

font-mono: DM Mono +3 more

Drop files, or browse

globals.css file

Globals.css

95 KB / 132 KB

Uploading

STEP 1

Connect your CSS

Point UI Rules to your existing CSS variables. We extract your colors, typography, spacing, and radius as reusable rules.

Spacing

Not Synced

Typography

Synced

Radius

Synced

Layout

Synced

Variables

Synced

STEP 2

Apply design rules

Your CSS values are converted into clear rules that define spacing, typography, layout, and component behavior.

Spacing

Not Synced

Typography

Synced

Radius

Synced

Layout

Synced

Variables

Synced

STEP 2

Apply design rules

Your CSS values are converted into clear rules that define spacing, typography, layout, and component behavior.

Spacing

Not Synced

Typography

Synced

Radius

Synced

Layout

Synced

Variables

Synced

STEP 2

Apply design rules

Your CSS values are converted into clear rules that define spacing, typography, layout, and component behavior.

Connecting

STEP 3

Use your rules in AI tools

Use these rules directly in AI coding tools like Cursor or Copilot, so generated UI aligns with your system by default.

Connecting

STEP 3

Use your rules in AI tools

Use these rules directly in AI coding tools like Cursor or Copilot, so generated UI aligns with your system by default.

Connecting

STEP 3

Use your rules in AI tools

Use these rules directly in AI coding tools like Cursor or Copilot, so generated UI aligns with your system by default.

Automatic branding

Branded UI by default

Your CSS variables are applied automatically via CLI and MCP, so AI-generated UI uses your real spacing, typography, color, and radius without manual setup. Every new project and tool starts with your brand, not generic defaults.

Production Quality

Smarter UI generation with built-in rules

Alongside your styles, UI Rules applies curated design and component guidelines based on established design systems and proven design principles. These rules are available automatically through CLI and MCP, so layout, hierarchy, accessibility, and component behavior are enforced during generation.

Pricing

Choose the best plan

Free

Populate your brand styles and preview their rules.

$0

No payment required

Join waitlist

Add your brand globals.css

Personal reference only

Cannot share rules with AI tools

Paid

For AI assistance in your daily workflow

$TBC

/month

Plus local taxes

Join waitlist

Share rules with AI apps

Use UI Rules as a live source of truth

Access upcoming features

Roadmap

What's next?

Available Now

Auto-extract tokens from globals.css

Curated database of spacing/layout rules

Formats optimized for LLM consumption

Deeply optimized for the shadcn ecosystem

Coming soon

Tweak rules visually before injecting them

Add your own team's specific "Do's and Dont's"

Switch contexts for agencies or multiple projects

Extract tokens directly from design files

Waitlist

Be the first to use the app

We respect your privacy

FAQ

Find answers

What is UI Rules?

UI Rules lets you store your brand styles and design rules in one place and make them available to AI tools, so generated UI follows your system instead of generic defaults.

Who is UI Rules for?

Designers and teams using AI tools to generate UI who want consistent branding, usability, and design quality without manual cleanup.

How is this different from a design system?

UI Rules does not replace your design system. It makes your existing styles and rules usable by AI tools during generation.

Do I need to change my existing setup?

No. You connect UI Rules to your existing CSS variables. There’s no need to restructure your codebase or rewrite styles.

How does UI Rules work with AI tools?

UI Rules shares your styles and rules with AI tools via CLI and MCP, so they are available automatically during generation.

Do I need to paste prompts or commands every time?

No. Once connected, your rules are always available. You don’t need to repeat instructions when starting new projects or switching tools.

What kind of rules does UI Rules apply?

UI Rules applies your brand styles along with curated design and component rules based on established design systems and proven design principles.

Does UI Rules help with accessibility?

Yes. Design rules cover hierarchy, spacing, and component behavior, which helps keep generated UI more accessible and usable by default.

What can I do on the free plan?

The paid plan lets you use your rules inside AI tools, treat UI Rules as a live source of truth, and access upcoming features.

Is UI Rules available now?

UI Rules is in early access. You can join the waitlist to be notified as features become available.

When will payments open?

Payments will open once AI integrations are ready for general use in the coming months.

What is UI Rules?

UI Rules lets you store your brand styles and design rules in one place and make them available to AI tools, so generated UI follows your system instead of generic defaults.

Who is UI Rules for?

Designers and teams using AI tools to generate UI who want consistent branding, usability, and design quality without manual cleanup.

How is this different from a design system?

UI Rules does not replace your design system. It makes your existing styles and rules usable by AI tools during generation.

Do I need to change my existing setup?

No. You connect UI Rules to your existing CSS variables. There’s no need to restructure your codebase or rewrite styles.

How does UI Rules work with AI tools?

UI Rules shares your styles and rules with AI tools via CLI and MCP, so they are available automatically during generation.

Do I need to paste prompts or commands every time?

No. Once connected, your rules are always available. You don’t need to repeat instructions when starting new projects or switching tools.

What kind of rules does UI Rules apply?

UI Rules applies your brand styles along with curated design and component rules based on established design systems and proven design principles.

Does UI Rules help with accessibility?

Yes. Design rules cover hierarchy, spacing, and component behavior, which helps keep generated UI more accessible and usable by default.

What can I do on the free plan?

The paid plan lets you use your rules inside AI tools, treat UI Rules as a live source of truth, and access upcoming features.

Is UI Rules available now?

UI Rules is in early access. You can join the waitlist to be notified as features become available.

When will payments open?

Payments will open once AI integrations are ready for general use in the coming months.

What is UI Rules?

UI Rules lets you store your brand styles and design rules in one place and make them available to AI tools, so generated UI follows your system instead of generic defaults.

Who is UI Rules for?

Designers and teams using AI tools to generate UI who want consistent branding, usability, and design quality without manual cleanup.

How is this different from a design system?

UI Rules does not replace your design system. It makes your existing styles and rules usable by AI tools during generation.

Do I need to change my existing setup?

No. You connect UI Rules to your existing CSS variables. There’s no need to restructure your codebase or rewrite styles.

How does UI Rules work with AI tools?

UI Rules shares your styles and rules with AI tools via CLI and MCP, so they are available automatically during generation.

Do I need to paste prompts or commands every time?

No. Once connected, your rules are always available. You don’t need to repeat instructions when starting new projects or switching tools.

What kind of rules does UI Rules apply?

UI Rules applies your brand styles along with curated design and component rules based on established design systems and proven design principles.

Does UI Rules help with accessibility?

Yes. Design rules cover hierarchy, spacing, and component behavior, which helps keep generated UI more accessible and usable by default.

What can I do on the free plan?

The paid plan lets you use your rules inside AI tools, treat UI Rules as a live source of truth, and access upcoming features.

Is UI Rules available now?

UI Rules is in early access. You can join the waitlist to be notified as features become available.

When will payments open?

Payments will open once AI integrations are ready for general use in the coming months.

Socials

Socials

Socials