Agent (Pro)

Update your design guidelines and styles with AI

Ask the UI Rules Agent to change a color, clarify a guideline, or update your brand styles. It drafts the changes for you to review and approve, without editing each setting by hand.

Demo video coming soon

A quick look at describing a change, reviewing the preview, and approving it.

What you can update with the Agent

Update your design tokens

Ask for square corners or a new primary color. The Agent proposes which style values to change.

Clarify your guidelines

Use AI Enhance to turn a rough guideline into clearer wording. Review its suggestions before saving.

Scan your website

Share your website URL to draft brand styles from its colors, typography, and spacing.

Add your logo

Upload a logo and ask the Agent to draft guidance on where it belongs.

Control what AI tools see

Ask to hide a component or block from a project. Review the proposed visibility change.

Bring existing guidelines (soon)

Importing guidelines from PDFs, documentation sites, and Markdown is planned.

Read the Agent guide and example prompts

Edit project guidelines from your AI coding tool

With authoring access enabled, Cursor, Claude Code, or Codex can update guidelines and design tokens for one project through MCP. These edits save directly to that project, so confirm the change in your coding tool before it writes.

See how project editing works through Connections

Cursor

Yes, add that guideline to this project: button labels should say what happensSaved to this UI Rules project.

UI RulesProject updated

Button labels say what happens, in sentence case.