Part of a series on keeping AI tools on brand with UI Rules. Watch the video version on YouTube.
Managing a design system means making lots of small edits: clarifying a guideline, changing a style, or deciding which components belong in a project. Working through a form for each change takes time, even when you already know what you want.
The UI Rules Agent lets you describe those changes in plain language. It drafts proposals for you to review, so you can spend more time on the decisions and less on entering them.
Review every design system change before it lands
The Agent proposes. You decide what actually lands.
Every change it drafts arrives as a proposal you can approve or reject. Asking for an edit does not apply it automatically. You get to check whether the proposal captures what you meant before it becomes part of your design system.
That matters because a short request can leave room for interpretation. "Make the labels clearer" could mean changing the wording, placement, or both. A proposal gives you something specific to assess against your brand guidelines.
Review the substance, not just whether the wording sounds polished. Check which decision the proposal expresses and whether it belongs in your system. If it misses your intent, reject it and describe the change more precisely. Nothing is applied without your approval.
The same approach carries through the Agent's work, whether you're adding guidance or changing what connected tools can see.
Write design guidelines by describing the change
Start with a decision you would explain to another designer:
Add a rule that form labels always sit above the field.
The Agent drafts a rule from that request, including a type and importance level. You review the proposed wording and check that those choices match your intent.
A type describes how to interpret a rule: Do, Don't, Caution, or Info. Importance distinguishes Required, Recommended, and Optional guidance. A form-label convention might be a requirement in your system or a recommended approach with exceptions. The proposal lets you assess that distinction before approving it.
Keep the request focused on one decision. If the placement of a label and the wording of an error message are separate guidelines, describe them separately. The guide to writing design system rules explains how rule text, types, importance, and rationale fit together.
Control what your AI tools can see
Your system may include components or blocks that don't belong in a particular project. You can ask the Agent to change their visibility in plain language, such as:
Hide all marketing blocks.
Review the proposed visibility change, then approve it if the selection is right. The blocks aren't deleted. They stop being served to your connected AI tools.
This gives you a way to shape the component set those tools work with. You can keep marketing blocks out of a product project's available choices without removing them from your system.
Add your logo alongside its guidelines
Give the Agent your logo and it prepares it with its variants, ready for usage rules. As with other changes, you review the proposal before it is applied.
The asset and its guidance belong together. Having a logo available doesn't explain which version belongs on a dark background or where it should appear. Use your existing brand decisions to guide those rules, so your connected AI coding tools have both the asset and the context for using it.
Refine rules and scan your website with Pro
The free plan includes a limited Agent. The full Agent, Enhance, and Scan your website are available on Pro.
Enhance helps turn a loosely written guideline into something more precise. For example, you might start with:
Make sure text lines never get too long.
Enhance can propose "Keep body text line length at or under 70 characters," with Do as the type and Recommended as the importance. It shows what changed and why, and you can apply or discard the suggestion. Check that a suggested limit fits your system before accepting it.
Scan your website starts from a different source: your live site. Give the Agent the URL and it drafts styles for you to review as proposals. These styles are your design tokens, including values for color, typography, and spacing. The brand styles guide explains how those values work alongside your written guidelines.
Coming soon: give the Agent an existing brand document and turn its guidelines into editable rules and styles.
Where to start
Choose one small update you already know you need. Describe it as you would to a colleague, review the proposal, and approve it when it matches your decision. Then move on to the next change.
Start with your own design system at uirules.com.
Top comments (0)