Apply your design system guidelines in Lovable
Lovable takes a custom MCP connector on the workspace. Once connected, Lovable's agent reads your brand styles, rules, and component vocabulary while it builds.
The connector lives on your Lovable workspace, not on one project. It applies to every project in that workspace, and Disconnect removes it for everyone. This is the same trade-off as connecting every Claude chat.
Prerequisites
- A Lovable account.
- A UI Rules brand with styles and rules configured.
- A connection key for the project you want to serve, or a UI Rules login. Create a key from Connect your AI tools on the project overview.
Add the connector
Open the connector list
Open a project, click the + in the chat box, then Connectors → Manage connectors. Scroll to the bottom of the All list and choose the Add MCP server tile.
Fill in the form
- Server name:
UI Rules - Server URL:
https://mcp.uirules.com/mcp
Leave Authentication on OAuth and click Add & authorize.
Authorize
A UI Rules page opens. Sign in if you are not already, pick the project, and click Authorize.
Prefer a key? Choose Bearer token or API key instead and paste your connection key.
Grant permissions
Under Manage my agent's permissions, set Manage all permissions to Always allow. UI Rules now shows as Connected with a Chat badge.
Tell Lovable to use it
This step is not optional. Without it, Lovable tends to pick its own visual direction before it reads your brand.
Open Settings → Knowledge and paste this into Workspace knowledge:
Before any UI work, call the UI Rules MCP tools get_project_notes, then list_rule_areas, then get_design_tokens. Do not generate design inspiration or choose a visual direction; the brand's rules and tokens are the design direction. Run check_rule_compliance at the end and report what it returns.Troubleshooting
If Lovable does not connect or ignores your brand, see Troubleshooting.
