---
title: "Use brand guidelines and design tokens in VS Code"
description: "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."
label: "VS Code"
date: "2026-10-05"
---

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**.

<Steps>
<Step>
### 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.
</Step>
<Step>
### 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**.
</Step>
<Step>
### Check the connection

Ask **"Is UI Rules connected?"** to check.
</Step>
</Steps>

## Troubleshooting

If the server does not connect or the AI ignores your brand, see [Troubleshooting](/docs/connect/troubleshooting).