{"slug": "brandrail-make-claude-code-and-cursor-follow-your-design-system", "title": "Brandrail – make Claude Code and Cursor follow your design system", "summary": "Brandrail launched an MCP server and npm CLI that feed a company's Brand Kit and component library to AI coding tools including Claude Code, Cursor, Copilot, Codex, Windsurf and Gemini CLI before those tools write UI, then validate the generated code and return fixes. The server exposes seven read-only tools — get_guidelines, get_design_tokens, find_component, get_component_docs, get_template, get_migration_map and validate_snippet — and runs locally over stdio, with code checked on the user's machine and never uploaded. Developers connect a repo with `npx brandrail connect`, which writes MCP config and rule files containing no key, or add the server manually via npx without an account; the same package also runs as a CLI checker with `check --changed`, `scan` and `migrate` commands.", "body_md": "Your design system, in every AI coding tool.\n\nAI coding tools don't know your design system, so every screen comes out with different colours, buttons and spacing. Brandrail's MCP server gives the tool your Brand Kit and components before it writes UI, then checks what it wrote and returns the fixes, so it corrects itself before you see the code.\n\n- Seven read-only tools: `get_guidelines` ,`get_design_tokens` ,`find_component` ,`get_component_docs` ,`get_template` ,`get_migration_map` ,`validate_snippet` .\n- Works in React, Angular, Vue, Web Components and plain HTML. The checker also reads Svelte, CSS, PHP, Twig, Mustache, Handlebars, Nunjucks and Liquid.\n- Runs locally over stdio. Code is checked on your machine and never uploaded.\n- Try it with no account: it starts with starter tokens. Connect a free Brandrail account to use your own Brand Kit.\n\nIn each repo:\n\n```\nnpx brandrail connect\n```\n\nIt signs you in through the browser and writes the MCP config and rule files for Claude Code, Cursor, Copilot, Codex, Windsurf and Gemini CLI. The files it writes hold no key, so commit them.\n\nYou type the code it shows on the Brandrail page, so nobody can approve a terminal for you with a link. The\nkey is made on your machine (only its hash is sent) and saved outside the repo. To help you recognise the\nrequest, the terminal's description (`user@computer · folder`) is shown on the approval page.\n\nOr add the MCP server by hand (works without an account):\n\n```\n{\n  \"mcpServers\": {\n    \"brandrail\": { \"command\": \"npx\", \"args\": [\"-y\", \"brandrail\", \"mcp\"] }\n  }\n}\n```\n\nCursor install link:\n\n```\ncursor://anysphere.cursor-deeplink/mcp/install?name=brandrail&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsImJyYW5kcmFpbCIsIm1jcCJdfQ==\n```\n\nSet `BRANDRAIL_KEY` (an API key from Dashboard → Connect) to load your organisation's Brand Kit without\nrunning `connect`. Full docs: [https://www.brandrail.com.au/docs/connect](https://www.brandrail.com.au/docs/connect)\n\n`BRANDRAIL_KEY` is only ever sent to [www.brandrail.com.au](http://www.brandrail.com.au) (or localhost). If `BRANDRAIL_API_URL` points\nanywhere else, the CLI says so on every run and won't send the key; sign in to that server with `connect`.\n\n| Tool | What it does | \n|---|---|\n| `get_guidelines` | The project's design system rules: components to use in its framework, allowed tokens, what the checker enforces. Called once before writing UI. | \n| `get_design_tokens` | Every colour, spacing, radius and type token with the CSS variable to use. | \n| `find_component` | Finds the component for a need (\"date picker\", \"primary action\") with its import, rules and an example. | \n| `get_component_docs` | Full docs for one component in the project's framework: import or tag, props, rules, example. | \n| `get_template` | A whole page (list, detail, form, settings, dashboard, sign-in) built from your components, with the files to create and the page's rules. | \n| `get_migration_map` | What replaces each piece of Material, MUI, Bootstrap, Ant, Chakra or PrimeNG. | \n| `validate_snippet` | Runs the checker on generated code and returns a brand score and each fix. | \n\nThe same package is a command-line checker:\n\n```\nnpx brandrail check --changed          # only what you changed vs origin/main\nnpx brandrail scan http://localhost:3000 --pages 3   # a running app, in a real browser\nnpx brandrail migrate                  # what's left of Material, MUI, Bootstrap and others\n```\n\nEvery command and option: [packages/cli/README.md](https://github.com/brandrail-app/brandrail/blob/main/packages/cli/README.md) and [https://www.brandrail.com.au/docs/cli](https://www.brandrail.com.au/docs/cli)\n\nThe MCP server and CLI run on your machine. Code is checked locally and never uploaded. With a key, they\nfetch your Brand Kit; `--upload` and `--report` send scores and messages to your dashboard, never code.\nSecurity details: [https://www.brandrail.com.au/security](https://www.brandrail.com.au/security)\n\n```\npackages/\n  cli/      the `brandrail` npm package: CLI and local MCP server\n  mcp/      the MCP server's tools\n  engine/   the checker rules engine (pure TypeScript, no runtime dependencies)\nmcpb/       MCP bundle for Smithery and desktop apps\nplugins/\n  cursor/   Cursor plugin: MCP server plus a rule\npnpm install\npnpm test     # engine tests\npnpm build    # → packages/cli/dist/brandrail.mjs\n```\n\nMIT, see [LICENSE](https://github.com/brandrail-app/brandrail/blob/main/LICENSE). The Brandrail web app (Brand Kit hosting, repo sync, GitHub App, teams) is a\nseparate service: [https://www.brandrail.com.au/pricing](https://www.brandrail.com.au/pricing)\n\nQuestions: [hello@brandrail.com.au](mailto:hello@brandrail.com.au) · Security reports: [security@brandrail.com.au](mailto:security@brandrail.com.au)", "url": "https://wpnews.pro/news/brandrail-make-claude-code-and-cursor-follow-your-design-system", "canonical_source": "https://github.com/brandrail-app/brandrail", "published_at": "2026-11-13 03:17:26+00:00", "updated_at": "2026-11-13 03:21:16.004336+00:00", "lang": "en", "topics": ["ai-agents", "agent-protocols", "ai-tools", "developer-tools", "ai-products"], "entities": ["Brandrail", "Claude Code", "Cursor", "GitHub Copilot", "Codex", "Windsurf", "Gemini CLI", "Model Context Protocol"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/brandrail-make-claude-code-and-cursor-follow-your-design-system", "markdown": "https://wpnews.pro/news/brandrail-make-claude-code-and-cursor-follow-your-design-system.md", "text": "https://wpnews.pro/news/brandrail-make-claude-code-and-cursor-follow-your-design-system.txt", "jsonld": "https://wpnews.pro/news/brandrail-make-claude-code-and-cursor-follow-your-design-system.jsonld"}}