Use brand guidelines and design tokens in VS Code
Connect VS Code to your brand guidelines and design tokens in UI Rules in one click, so its AI builds with your colors, typography, and design guidance.
Build with your brand in VS Code. UI Rules brings your design guidelines and tokens into the build over MCP (Model Context Protocol), so VS Code's AI follows your design system.
You sign in to UI Rules as part of the setup, so there is no key to copy. Open Connect in the workspace top bar and pick VS Code.
Install the server
Click Install in VS Code in the Connect dialog. When VS Code opens, click Install to add it for every project, or Install in Workspace for this one.
Start it and sign in
When VS Code asks, start the server and trust it. A UI Rules page opens in your browser. Sign in if asked, select the project, and click Authorize.
Check the connection
Ask "Is UI Rules connected?" to check.
Troubleshooting
If the server does not connect or the AI ignores your brand, see Troubleshooting.
