Brandrail

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	プロジェクトのフレームワークにおけるコンポーネントの完全なドキュメント：インポートまたはタグ、props、ルール、使用例。
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	保存されたサインイン情報を表示または削除します。

--upload を指定しない限り、何もアップロードされません。コードスニペットがアップロードされることはありません。

ライセンス

MIT。Brandrail のウェブアプリとダッシュボードは別途有料のサービスです：https://www.brandrail.com.au/pricing