Brandrail

Name: Brandrail
Author: brandrail.com.au

本地服务

brandrail.com.au开发工具03 天前更新

代码仓库访问官网

关于 Brandrail

Brandrail 是面向使用 AI 编码工具团队的本地设计系统检查器和 MCP 服务。它提供项目规范、令牌、组件参考和代码验证，且不会上传代码。

主要功能

01本地设计系统检查
02品牌评分与修复建议
03设计令牌和组件查询
04在真实浏览器中扫描页面
05AI 规则文件与初始化

适用场景

01检查生成的 UI 是否符合品牌规范
02查找组件和令牌值
03扫描运行中的页面以发现违规

MCP 相关

本地 stdio MCP 服务提供只读工具，用于查询规范、令牌、组件、模板和迁移，并验证代码片段。它可使用默认令牌，也可连接 Brand Kit。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "au-com-brandrail-brandrail": {
      "command": "npx",
      "args": [
        "-y",
        "brandrail"
      ],
      "env": {
        "BRANDRAIL_KEY": "<BRANDRAIL_KEY>"
      }
    }
  }
}

启动命令npx -y brandrail

需要配置的环境变量

BRANDRAIL_KEY密钥Optional. API key from Brandrail Dashboard > Connect, to load your organisation's Brand Kit. Without it, the repo's brandrail.config.json or starter tokens are used.

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npmbrandrail0.10.3stdio

工具

收录的工具列表 · 更新于 1 天前

参数	类型	必填	说明
framework	enum	否	项目的 UI 框架（根据其 package.json：@angular/core → angular，vue → vue，svelte → svelte，solid-js → solid，react → react）。默认使用此连接所设定的框架。react \| angular \| vue \| svelte \| solid \| web-components \| html

详细介绍

brandrail

让 AI 生成的 UI 符合品牌规范。brandrail 会根据你的设计系统（Brand Kit）检查代码和实时页面，并将规则写入 AI 编码工具读取的文件中。

npx brandrail init            # brandrail.config.json, src/brandrail.tokens.css + AGENTS.md, CLAUDE.md, Cursor/Copilot/Windsurf/Gemini rules
npx brandrail check           # violations + brand score for this repo
npx brandrail scan <url>      # check a running page in a real browser

使用 Brandrail 账户

npx brandrail connect                     # sign in through the browser; sets up the Brand Kit, AI rule files,
                                          # the MCP server for Claude Code / Cursor / Copilot, and the UI kit
npx brandrail check --changed --upload    # only changed lines, results in the dashboard

connect 会在你的机器上创建 API 密钥，并将其保存到 ~/.config/brandrail/credentials.json（权限模式为 600）；Brandrail 始终只会收到密钥的哈希值，写入仓库的文件中也不包含密钥。AI 工具会启动 npx brandrail mcp，在你的机器上检查代码：代码绝不会上传。在 CI 中，请改为设置 BRANDRAIL_KEY。

MCP 服务

brandrail mcp 是供 Claude Code、Cursor、Copilot、Codex、Windsurf 和其他任何 MCP 客户端使用的 MCP 服务。它通过 stdio 在你的机器上运行；代码会在本地检查，绝不会上传。无需账户即可使用入门令牌；连接账户（或设置 BRANDRAIL_KEY）即可使用你自己的 Brand Kit。

{
  "mcpServers": {
    "brandrail": { "command": "npx", "args": ["-y", "brandrail", "mcp"] }
  }
}

npx brandrail connect 会为你写入此配置，以及各 AI 工具读取的规则文件。

工具	功能
`get_guidelines`	项目的设计系统规则：要在其框架中使用的组件、允许的令牌，以及检查器执行的规则。编写 UI 前调用一次。
`get_design_tokens`	所有颜色、间距、圆角和字体令牌，以及要使用的 CSS 变量。
`find_component`	根据需求（“日期选择器”“主要操作”）查找组件，并提供其导入方式、规则和示例。
`get_component_docs`	项目框架中某个组件的完整文档：导入方式或标签、属性、规则和示例。
`get_template`	使用你的组件构建的完整页面（列表、详情、表单、设置、仪表板、登录），并提供要创建的文件和该页面的规则。
`get_migration_map`	Material、MUI、Bootstrap、Ant、Chakra 或 PrimeNG 中每个部分的替代方案。
`validate_snippet`	对生成的代码运行检查器，并返回品牌评分和每项修复建议。

所有工具均为只读。文档：https://www.brandrail.com.au/docs/connect

命令

命令
`check [paths]`	`--format pretty\|json\|markdown\|github`、`--fail-below 80`、`--changed [base]`、`--upload`
`scan <url>`	`--pages 3`、`--storage-state auth.json`（扫描登录后才能访问的页面）、`--wait 2000`、`--upload`。需要运行 `npm i -D playwright && npx playwright install chromium`
`init`	`--from-api`、`--mcp`、`--tokens-css <file>`、`--no-rules`、`--force`。将 Brand Kit 写为 CSS 变量；在应用入口导入该文件一次即可
`import <tokens.json>`	将 DTCG、Tokens Studio 或 Figma 变量 JSON 导入配置。`--replace`、`--primitives`
`rules`	列出规则
`connect`	`--no-browser`、`--no-install`、`--remote`（托管 MCP 服务）、`--framework`、`--force`（重新登录）
`mcp`	供 AI 工具使用、通过 stdio 运行的 MCP 服务。`--framework`、`--report`（发送评分，绝不发送代码）
`migrate [paths]`	查看迁移到设计系统还剩哪些工作：按组件库和文件列出其他 UI 库（Material、MUI、Bootstrap、Ant Design、Chakra、PrimeNG）。`--json`、`--top 30`、`--upload`
`report`	可分享的 HTML 交接报告（路径和数量，绝不包含代码）。`--out file.html`
`whoami`、`logout`	显示或移除已保存的登录信息