Apply your design system guidelines in Lovable
Lovable takes a custom MCP connector. Once connected, Lovable's agent reads your brand styles, rules, and component vocabulary while it builds.
The connection is personal to your Lovable account. Other workspace members connect their own accounts.
You sign in to UI Rules as part of the setup, so there is no key to copy. The Connect dialog in the workspace top bar shows the same steps when you pick Lovable.
Add the connector
Open the connector list
Open Connectors, click + in the top right, then choose MCP server.
Fill in the form and sign in
Paste the name and URL, keep OAuth, and click Add & authorize. A UI Rules page opens in your browser. Sign in if asked, select the project, and click Authorize.
- Server name:
UI Rules - Server URL:
https://mcp.uirules.com/mcp
Grant permissions
Under Manage my agent's permissions, set Manage all permissions to Always allow.
Tell Lovable to use it
This step is not optional. Without it, Lovable's agent never calls UI Rules.
Click Settings → Knowledge and paste this into Workspace knowledge.
Before any UI work, call the UI Rules MCP tools get_brand_brief, get_project_notes, get_rules_index and get_design_tokens, in that order. Do not generate design inspiration or choose a visual direction; the brand's rules and tokens are the design direction. Every word of copy you write is governed too: call get_rules for the area covering writing before you write any text. Run check_rule_compliance at the end and report what it returns.Check the connection
Ask "Is UI Rules connected?" to check.
Use an API key instead
In the Connect dialog, open Use an API key instead and click Create API key, or Choose permissions to limit what it can do. The key is shown once.
In the form, select Bearer token or API key instead of OAuth and paste the key.
If it still builds without asking
A request that does not mention the design system gives the agent nothing to look up. If it builds without ever calling UI Rules, add this to your first message:
Use my UI Rules design system: pull the tokens and the rules from the MCP and follow them.Troubleshooting
If Lovable does not connect or ignores your brand, see Troubleshooting.
