Part of a series on keeping AI tools on brand with UI Rules. Watch the video version on YouTube.
When you ask an AI tool to build a form, you want it to use the guidelines your team has already agreed on: where labels go, how buttons are written, and what happens when something goes wrong. The tool needs those guidelines to make decisions that fit your system.
UI Rules connects your design guidelines to Cursor, v0, Lovable, Codex, Figma Make, and Claude Code. You write and organize your rules in one place, and each connected tool can read them as it builds. This guide shows how to create and manage those rules, with a worked example in Claude Code.
What a design rule actually is
A rule describes a design decision you want your tools to follow. It can be as simple as a sentence, with a type and importance level to clarify how it should be used. You can also add a heading and explain the reason behind it.
The rule itself, short and single-purpose: "Never use a placeholder as the label."
A type. Do and Don't are instructions. Caution is a warning a tool should weigh. Info is context worth knowing rather than something to enforce.
A heading makes the rule easier to find. A rationale explains why it matters. For a rule about form labels, you might write: "Placeholder text disappears when someone starts typing. Keep the label visible so they can check what the field is asking for." That explanation helps both your teammates and your AI tools understand the decision.
Importance tells the tool how strongly to prioritize the rule. Choose Required for a requirement, Recommended for your usual approach, or Optional for a preference. These labels communicate your intent; you should still review what the tool builds.
Design guidelines you get out of the box
When you create a brand, you can start with curated guidelines or write your own from scratch. The curated set includes guidance for colors, components, accessibility, and content. Review it against your own system, keep what fits, and edit the rest.
Rules can apply broadly or to a specific part of your system. A general color rule might explain when to use color for emphasis. A rule attached to your primary color can be more specific: "Use this for the single most important action on the screen." Components such as buttons have their own guidelines too.
Writing and editing design system rules
Open an existing rule to edit it, or add a new one. For example, if your brand uses uppercase button labels, write "Use uppercase for all button labels" and set its type to Do. Add a heading and rationale if they're useful, then save. The updated rule is available the next time a connected tool reads it.
Group related rules together and reorder them so they're easy to review. Once you're happy with a rule, you can lock it to protect it from edits.
Try your rules in a connected AI tool
You can try this with any of the supported apps once you've connected it to your brand. For this example, I used Claude Code. With the uppercase rule saved, I asked:
Create a simple alert that shows I'm running out of disk space. Be sure to include some buttons.
Claude Code read the rules from UI Rules and built the alert with uppercase button labels. I hadn't mentioned capitalization in the prompt. It's a small example, but it shows how a guideline you've written can inform the result without being repeated in the request.
To try this yourself, create a brand in UI Rules, add a few guidelines, and connect the app you already use. The connection guides cover Cursor, v0, Lovable, Codex, Figma Make, and Claude Code.
Top comments (0)