Brandsystem MCP — Brand Guidelines for AI について
@brandsystem/mcp は、Web サイト、PDF、Figma、ローカルファイルのブランド資料をポータブルな .brand ランタイムにまとめる MCP サーバーです。ブランドルールに沿って AI エージェントを運用したいチーム向けに、作成、確認、出力の機能を備えています。
主な機能
- 01Web サイト、PDF、Figmaからブランド情報を抽出
- 02ブランドランタイムとDTCGトークンを生成
- 03トーン、ガバナンス、アンチパターンを管理
- 04ブランド準拠コンテンツの生成と確認
- 05各種ツールやスタイル形式へエクスポート
活用シーン
- 01既存のブランドガイドをAI向けコンテキストに変換
- 02ブランドルールに沿ったSNSコンテンツの作成
- 03草稿がブランド要件を満たすか確認
- 04ブランドトークンをCSSやTailwindへ出力
MCP 対応
MCP サーバーとして、ブランドランタイムの作成、コンテンツ生成、準拠確認、ブランドデータのエクスポートを行うツールを MCP クライアントに提供します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
ツール
12掲載時のツール一覧 · 2 日前に更新
| パラメーター | 型 | 必須 | 説明 |
|---|---|---|---|
| mode | enum | いいえ | 'auto'(推奨):website_url が指定されている場合、完全なパイプラインを 1 回の呼び出しで実行します。'interactive':利用可能なソース(作業ディレクトリ内で検出されたファイルを含む)を評価し、ソースメニューを表示します。interactive | auto |
| industry | string | いいえ | より高度な抽出に使用する業界分野(例:'fintech'、'healthcare'、'content marketing') |
| client_name | string | はい | 会社名またはブランド名(例:'Acme Corp') |
| website_url | string | いいえ | ブランドアイデンティティの抽出元となる会社ウェブサイトの URL(例:'https://acme.com') |
| brandcode_url | string | いいえ | 既存のホスト型ブランドを取り込むための Brandcode Studio ブランド URL(例:'https://brandcode.studio/start/brands/acme')。brand_brandcode_connect 経由で取り込みます。 |
| guideline_pdf | string | いいえ | 作業ディレクトリ内またはその配下にある PDF ブランドガイドラインのパス(例:'./brand-guidelines.pdf')。brand_extract_pdf 経由で取り込みます。 |
| figma_file_key | string | いいえ | デザインファイルから抽出するための Figma ファイルキー。brand_extract_figma 経由で取り込みます。 |
詳細
AI でブランドガイドラインを活用する
@brandsystem/mcp は、すでにお持ちのブランド素材を、AI エージェントが利用できるコンテキストに変換します。 ウェブサイト、PDF ガイド、Figma ライブラリ、ローカルファイル、または Brandcode Studio のブランドを指定してください。デザイントークン、ブランドボイスのルール、出典情報、コンプライアンスチェックを備えた、持ち運び可能な .brand/ ランタイムを生成します。
ローカルファーストで、アカウントは不要です。デフォルトの Core プロファイルでは、採用 → 使用 → チェックの一連の流れを網羅する 12 個のツールを利用できます。
まずはこちら
エージェントにインストールしてから、次のように尋ねてください。「AI でブランドガイドラインを活用するには、どうすればよいですか?」
# Codex
npx @brandsystem/mcp install --client codex --write
# Claude Code, Cursor, Windsurf, or Claude Desktop
npx @brandsystem/mcp install --client claude-code --write
# Cline
npx @brandsystem/mcp install --client cline --write
Claude Desktop(ワンクリック): 最新の GitHub リリースから brandsystem-mcp-<version>.mcpb をダウンロードし、ダブルクリックします(または「設定」>「拡張機能」にドラッグします)。Claude Desktop から .brand/ ディレクトリを含むフォルダーを指定するよう求められます。Node のインストールも JSON の編集も不要です。
install は --write を指定しない限り、ドライランです。必要に応じて claude-code を cline、cursor、windsurf、または claude-desktop に置き換えてください。JSON ファイルを対象とする場合は既存の設定が保持されます。Cline と Codex のセットアップでは、それぞれの公式 MCP コマンドに処理を委ねるため、現在のスキーマが引き続き正として扱われます。エージェントは、この README 全体を読まずに、簡潔なインストールガイドに従ってセットアップできます。
すでに設定済みですか?エージェントに次のように伝えてください。
既存のブランドガイドラインを AI で活用してください。このウェブサイト/PDF/Figma ライブラリを起点に、人による確認が必要な点を示してください。
解決する課題
AI ツールにはブランドのコンテキストがないため、カテゴリの平均的なアウトプットがデフォルトになります。ブランドガイドラインは PDF、Figma ファイル、そして人々の頭の中にあり、どれも AI ツールが作成時に読み取れません。よくある失敗は「出力が壊れている」ことではなく、「正しいがありきたり」であることです。機械的なチェックには合格するものの、優秀なジェネラリストなら誰でも作れそうに見えるアウトプットです。
この MCP サーバーは、「2 つの MCP、1 つのブランド」モデルの作成側を担います。稼働中のソースからブランドアイデンティティを抽出し、構造化されたガバナンス(アンチパターン、根拠のステータス、ブランドボイスのルール、適用ルール)と DTCG トークン、brand-runtime.json、interaction-policy.json を備えた .brand/ ディレクトリにコンパイルします。このディレクトリがポータブルなブランドランタイムとなり、ブランドとともにさまざまなサーフェスへ持ち運べる成果物です。
- Claude Design は、ガバナンスが適用されたリポジトリを指定すると、
.brand/ディレクトリをネイティブに読み取ります - Claude Code、Claude Desktop、Cursor、Windsurf は stdio 経由でこのサーバーに直接接続し、生成時に
brand-runtime.jsonを読み込みます - ChatGPT などのリモートファーストのクライアントは、アップロードされた成果物(
brand-report.html/brand-runtime.json)またはリモート MCP 接続を介して同じランタイムを利用します。詳しくは互換性の概要をご覧ください - @brandcode/mcp(ホスト型の Use MCP)は、認証済みのライブ読み取りを
mcp.brandcode.studio/{slug}で利用したいチーム向けに、同じランタイムを HTTP 経由で提供します
brand-runtime.json を読み込むと、エージェントへのプロンプトは、インラインのブランドコンテキスト 200~400 トークン分から、差分だけに削減されます。最初の出力からブランドに沿ったものになります。レビューがボトルネックになることもありません。
クイックスタート
1. MCP 設定に追加する
以下を .mcp.json(Claude Code)、.cursor/mcp.json(Cursor)、または Windsurf の MCP 設定にコピーしてください。Codex ユーザーは代わりに npx @brandsystem/mcp install --client codex --write を実行できます。
{
"mcpServers": {
"brandsystem": {
"command": "npx",
"args": ["-y", "@brandsystem/mcp"]
}
}
}
リポジトリにコミットするプロジェクトレベルの設定では、バージョン("@brandsystem/mcp@<version>")を固定してください。そうすれば、未レビューのリリースが共同作業者の環境で自動実行されることはありません。npx @brandsystem/mcp install を実行すると、固定された指定が書き込まれます。
2. ブランドシステムを作成する
AI ツールに次のように伝えてください。
brand_start を実行し、client_name="Acme Corp"、website_url="https://acme.com"、mode="auto" を指定してください
このコマンドひとつで、ウェブサイトから色、フォント、ロゴを抽出します。簡易チェックの結果が不十分な場合は、レンダリングまたは複数ページにわたる詳細な抽出に切り替え、DTCG トークンをコンパイルし、design-synthesis.json と DESIGN.md を生成して、持ち運び可能な HTML ブランドレポートも生成します。すべて 60 秒以内に完了します。
3. 作成されるもの
.brand/
brand.config.yaml ← brand name, source URLs, session state
core-identity.yaml ← colors (with roles), fonts, logo specs
tokens.json ← DTCG design tokens
brand-runtime.json ← single-file brand context for any AI agent
interaction-policy.json ← anti-patterns, voice constraints, never-say words
design-synthesis.json ← spacing, radius, shadows, component signals
DESIGN.md ← portable design brief (agent-readable)
brand-report.html ← visual report (paste into any AI chat)
assets/logo/ ← extracted logo files (SVG/PNG)
brand-runtime.json を任意のサブエージェントのコンテキストに読み込んでください。最初の出力からブランドに沿ったものになります。プロンプトごとに定型文を追加する必要はありません。
4. 使用する
「Q3 product launch」についてのソーシャルグラフィックを brand_write で作成してください
AI は色、タイポグラフィ、ロゴ、アンチパターン、ボイスルールなど、ブランドのコンテキスト全体を把握したうえで、ブランドに沿ったコンテンツを生成します。
各ツールのネイティブ形式にエクスポートする
ブランドを一度だけエンコードし、各ツールが標準で読み込む形式にして配置します。brand_export は .brand/exports/ に書き込みます。
| 対象 | 出力 | 配置先 |
|---|---|---|
agents-md | brandsystem:start/end マーカーの間にある AGENTS.md セクション | プロジェクトルートの AGENTS.md — Codex、Cursor、その他 AGENTS.md 対応エージェントが読み込みます |
cursor-rules | description/globs/alwaysApply: false のフロントマター付き brand.mdc | .cursor/rules/brand.mdc — UI ファイルに自動適用されます |
css-variables | :root { --brand-color-*; --brand-font-* } に加え、ブランドにダークパレットがある場合は [data-theme="dark"]/prefers-color-scheme: dark ブロック | 任意のスタイルシート |
tailwind | Tailwind CSS v4 の @theme { --color-brand-*; --font-brand-*; --radius-brand-* } | @import "tailwindcss"; の後 |
shadcn | ブランドの役割に基づいてマッピングされた shadcn/ui の :root と .dark の変数(--background、--primary、--ring、--radius など) | shadcn/ui プロジェクトの globals.css |
claude-skill、chat、code、team、email、pdf | スキルファイル、チャットへのアップロード、CLAUDE.md のスニペット、ガイドライン、要約、PDF ガイド | Claude のスキル、AI チャット、チームメイト |
target="tailwind" を指定して brand_export を実行してください
CSS の出力先はコンパイル済みの DTCG トークンから生成されます。ブランド文字列は検証されるため(16 進数の色、妥当なフォント名、引用符で囲まれたフォントファミリー)、抽出された内容が宣言の外に抜け出すことはありません。指示用の出力先(agents-md、cursor-rules)には出典情報が記載され、ブランド値はフェンス付きのデータブロックに保持されます。
5. さらに詳細に設定する(任意)
| セッション | 追加される内容 | コマンド |
|---|---|---|
| 1. コアアイデンティティ | 色、フォント、ロゴ、トークン | brand_start(上記で完了) |
| 2. ビジュアルアイデンティティ | 構成、アンチパターン、イラストのスタイル | brand_deepen_identity |
| 3. メッセージング | ボイス、トーン、使用禁止語、ブランドストーリー | brand_compile_messaging |
| 4. コンテンツ戦略 | ペルソナ、ジャーニーの段階、テーマ | brand_build_personas |
各セッションで brand-runtime.json が充実していきます。いつでも終了できます。セッション 1 だけでも十分に役立ちます。
6. チームと共有する
brand_brandcode_connect を実行して Brandcode Studio に保存してください
ブランドは brandcode.studio に保存されます。チームメイトは同じブランドを各自のツールに取り込めます。信頼できる唯一の情報源になります。
できること
セッション 1:コアアイデンティティ -- Web サイトまたは Figma ファイルから色、フォント、ロゴを抽出します。DTCG トークン、構造化されたデザイン統合レイヤー、ポータブルな DESIGN.md、HTML レポートにまとめます。
セッション 2:ビジュアルアイデンティティ -- ガイド付きインタビューを通じて、構成ルール、パターン言語、イラストのスタイル、アンチパターンを定義します。アンチパターンは適用可能なコンプライアンスルールになります。
セッション 3:メッセージング -- 既存の Web サイトの語り口を監査したうえで、ガイド付きインタビューを通じて、視点、ボイスコード(トーン、語彙、AI 的表現の検出)、ブランドストーリーを定義します。
セッション 4:コンテンツ戦略 -- 購買者ペルソナ、ジャーニーの段階、編集テーマ、ペルソナ x 段階のメッセージングマトリックスを作成します。
各セッションは前のセッションを土台に進みます。どの段階でも中断できます。すぐに価値が得られます。
2 つの使い方
ローカルファーストの MCP フロー -- Web サイトまたは Figma ファイルから始め、.brand/ ディレクトリをローカルに作成して、アカウントなしですぐにチャットツールやコードツールで使用します。
Brandcode Studio 接続フロー -- 既存のホスト済みブランドに接続し、パッケージ化されたブランドを .brand/ に取り込んで、継続的に同期します。
2 つの MCP、1 つのブランド
.brand ランタイムが製品です。これを提供する MCP は 2 つあります。
@brandsystem/mcp — Build(このパッケージ)。 .brand ランタイムをローカルで作成、コンパイルします。Web サイト、Figma、PDF から抽出します。ガバナンス(アンチパターン、プルーフポイントのステータス、ボイスルール、適用ルール)と DTCG トークン、brand-runtime.json、interaction-policy.json を 1 つの .brand/ ディレクトリにコンパイルします。ポータブルでバージョン管理可能なため、任意のリポジトリにコミットできます。
@brandcode/mcp — Use(ホスト型)。 認証済み MCP クライアントを Brandcode ベアラーキー認証で、ライブ Full Brand Runtime(https://mcp.brandcode.studio/{slug})に接続します。エージェントは最新のランタイムを取得し、承認済みのナレッジを検索し、ドラフトをチェックし、パッケージ利用可能なアセットを取得し、追記専用のレビュー用フィードバックを残します。また、明示的な capture スコープがあれば、テイストキャプチャを人によるレビュー用にキューに登録します。ツールごとのガイドラインのコピーも、古いスナップショットもなく、MCP からの正規データの変更もありません。タグライン:「あなたのブランドを、すべての AI ツールでいつでも使えるように。」
同じ .brand ランタイムアーティファクトに、2 つの利用経路があります。Build は作成し、Use は提供します。
Brandcode MCP のフェーズ 0 は、元となる 8 つの読み取り/追記専用インターフェースとして specs/brandcode-mcp-phase-0-lock.md で固定されています。現在のホスト型実装では、スコープ付きの contribute-tier ツールとして capture_taste が追加されています。このツールには明示的な capture スコープが必要で、人によるレビュー用にレビュー候補をキューに登録します。正規データに昇格することはありません。
ホスト型サービスの提供状況: Brandcode MCP はプレリリース段階で、承認済みクライアントのみ利用できます。まだ一般公開もレジストリへの登録もされていません。ホスト型サービスのブランドデータはクライアントが所有し、フィードバックは追記専用で、エージェントの履歴はスコープで制限され、機密情報が除去されます。削除およびエクスポートのリクエストは、Brandcode Studio の担当者を通じて対応します。一般公開までは、ローカルでのビルド/同期には @brandsystem/mcp を、ホスト型ランタイムから短いキャッシュ TTL 以内に最新情報を取得する接続読み取りには Live Mode(brand_brandcode_live)を使用してください。
メンテナーは、スモークハーネス(BRANDCODE_MCP_SMOKE_URL とスコープ付きテストキーを指定した npm run smoke:hosted-mcp)を使って、ホスト型デプロイをエンドツーエンドで検証できます。MCP の initialize、tools/list、固定されたホスト型ツールの順序、コアとなるホスト型ツールの呼び出し、読み取り専用の権限不足時の動作を検証します。キーをハードコードすることはありません。必要な証明用入力が不足している場合は、blocked または skipped として報告されます。
Claude Design との連携
.brand/ ディレクトリは、Claude Design への第一級の入力として設計されています。.brand/(ガバナンス YAML、ナラティブライブラリ、根拠ファイル、テイストノート、DTCG トークン)を含むリポジトリを Claude Design に指定すると、アップロードしたアセットから即興で生成するのではなく、ガバナンスされたブランドを基盤として動作します。これが Deploy のパスです。@brandsystem/mcp で一度作成すれば、Anthropic のすべてのサーフェス(Claude Design、Claude Code、コンパイルパック経由の Chat)が同じランタイムを利用します。
ツールリファレンス
ツールプロファイル(0.10 以降)
デフォルトでは、サーバーは Core プロファイルを登録します。これは、完全な一連の流れ(導入 → ランタイム/コンテキスト → 作成 → チェック → エクスポート)に加えて、Studio コネクターのエントリーポイントと clarify/promote のパスを網羅する 12 個のツールです。これにより、エージェントが最初に選択するツールを絞り込めます。
Core では、失敗時に brand_feedback も自動的に利用可能になります。セッション内のツールでエラーが発生する、応答が大きすぎて一部省略される、または抽出結果が LOW か空である場合を除き、ツール一覧には表示されません。その場合、サーバーはこれを一覧に追加し(notifications/tools/list_changed 経由)、失敗した応答の next_steps でこのツールを案内します。ツール一覧を更新しないクライアント向けの動作です。情報が自動送信されることはありません。エージェントが brand_feedback を呼び出した場合にのみレポートが Brandcode チームに送られ、含まれるのはエージェントが記述したメモのみで、.brand/ ファイルは含まれません。docs/DATA-FLOWS.md を参照してください。
full プロファイルでは、オーサリングシステム全体(以下のすべてのツール)が登録されます。環境変数または引数で有効にします。
{
"mcpServers": {
"brandsystem": {
"command": "npx",
"args": ["-y", "@brandsystem/mcp", "--profile=full"]
}
}
}
または、BRANDSYSTEM_PROFILE=full を設定します。Core のツール:brand_start、brand_status、brand_runtime、brand_context、brand_check、brand_preflight、brand_report、brand_export、brand_clarify、brand_compile、brand_brandcode_auth、brand_brandcode_connect。
エントリーポイント
| ツール | 機能 |
|---|---|
brand_start | ここから始めます。 ウェブサイトの URL から 60 秒以内にブランドシステムを作成します。JS でレンダリングされたサイトで結果が不十分な場合に、レンダリングとディープサイトへのフォールバックを行う 1 回の呼び出しでセットアップするには、mode='auto' を使用します。 |
brand_status | 進捗を確認し、次の手順を取得します。または、ブランドがまだ存在しない場合は、利用開始ガイドを表示します。 |
セッション 1:コアアイデンティティ
| ツール | 機能 |
|---|---|
brand_extract_web | 任意のウェブサイト URL からロゴ(SVG/PNG)、色、フォントを抽出します。 |
brand_extract_visual | ヘッドレス Chrome でレンダリング済みページのスクリーンショットを撮影し、JS を多用するサイトから計算済みの色、フォント、ビジュアルコンテキストを抽出します。 |
brand_extract_site | 代表的なページを見つけ、デスクトップとモバイルでレンダリングし、スクリーンショットを撮影して、複数のコンポーネントをサンプリングし、extraction-evidence.json を保存します。 |
brand_generate_designmd | 抽出した根拠、または現在のブランド状態から design-synthesis.json と DESIGN.md を生成します。 |
brand_extract_figma | Figma のデザインファイルから抽出します(精度が高くなります)。2 段階で実行します:計画の後に取り込みます。 |
brand_set_logo | SVG マークアップ、URL、またはデータ URI でロゴを追加/置換します。 |
brand_compile | 抽出データから DTCG デザイントークン、ブランドランタイムコントラクト、インタラクションポリシーを生成します。 |
brand_clarify | 曖昧なブランド値(色の役割、フォントの確認など)を対話形式で解決します。 |
brand_audit | .brand/ ディレクトリの完全性と正確性を検証します。 |
brand_report | 持ち運び可能な HTML ブランドレポートを生成します。ガイドラインとして、任意の AI チャットにアップロードできます。 |
brand_init | 低レベルのディレクトリ構成を作成します。代わりに brand_start を使用してください。 |
セッション 2:ビジュアルアイデンティティ
| ツール | 機能 |
|---|---|
brand_deepen_identity | 構成ルール、パターン、イラストのスタイル、アンチパターンを定義します(6つのインタビューセクション)。 |
brand_ingest_assets | ブランドアセットをスキャンし、MANIFEST.yaml メタデータとともにカタログ化します。 |
brand_preflight | HTML/CSS がブランドルールに沿っているか確認し、ブランドに合わない色、誤ったフォント、アンチパターン違反を検出します。サンドボックス化されたヘッドレス Chrome で計算結果を検証するには、render: true を追加してください(作成した内容の確認を参照)。 |
セッション 3:メッセージング
| ツール | 機能 |
|---|---|
brand_extract_messaging | 既存のウェブサイトの語り口を監査します。特徴、語彙、主張、AI らしい表現、ギャップを分析します。 |
brand_compile_messaging | 視点、ボイスコーデックス(トーン、語彙、AI らしい表現の検出)、ブランドストーリーを定義します。 |
セッション 4:コンテンツ戦略
| ツール | 機能 |
|---|---|
brand_build_personas | 7つの質問によるガイド付きインタビューを通じて、購買者ペルソナを作成します。 |
brand_build_journey | 購買者ジャーニーの段階を定義します(実績のあるデフォルト設定が4つ付属します)。 |
brand_build_themes | 認知、エンゲージメント、コンバージョンのバランスを取った編集コンテンツのテーマを定義します。 |
brand_build_matrix | ペルソナとジャーニー段階のすべての組み合わせについて、メッセージのバリエーションを生成します。 |
コンテンツスコアリング
| ツール | 機能 |
|---|---|
brand_audit_content | 複数の観点から、ブランドルールに照らしてコンテンツを採点します(0~100)。 |
brand_check_compliance | 公開前に、コンプライアンスを合格/不合格で手早く判定します。 |
brand_audit_drift | 複数のコンテンツにわたる体系的なブランドの逸脱を検出します。 |
ランタイムとユーティリティ
| ツール | 機能 |
|---|---|
brand_runtime | コンパイル済みのブランドランタイム契約(AI エージェント向けの単一ドキュメント形式のブランドコンテキスト)を読み取ります。 |
brand_context | ランタイムからタスクに応じた範囲を決定論的に選択します(task_type → セクション、audience → ペルソナの一致、コンパクトな予算)。一致したセレクターと明示的な不一致を返し、暗黙のフォールバックは行いません。 |
brand_write | コンテンツ生成用に、ブランドコンテキスト全体(ビジュアル、語り口、戦略)を読み込みます。 |
brand_export | 各ツールのネイティブ形式でブランドをエクスポートします:AGENTS.md、Cursor ルール、CSS 変数、Tailwind v4 テーマ、shadcn/ui テーマ、Claude スキル、チャット/チーム/メール向け Markdown、または PDF。 |
brand_feedback | バグ、使いづらさ、機能のアイデアを brandsystem チームに報告します。 |
Brandcode Studio コネクター
| ツール | 機能 |
|---|---|
brand_brandcode_connect | ローカルの .brand/ ディレクトリをホストされた Brandcode Studio ブランドに接続し、最新のパッケージを取得します。 |
brand_brandcode_sync | 同期トークンを考慮した差分処理で、以前に接続したホストブランドから更新を取得します。 |
brand_brandcode_status | 現在の Brandcode Studio 接続、同期履歴、ローカルパッケージの概要を確認します。 |
brand_brandcode_live | 接続済みの読み取りツールを切り替え、短いキャッシュ TTL の間にホストされたランタイムを更新します。 |
ツールのフロー
ツールは自動的に連鎖します。各ツールの応答で、次に実行するツールを LLM に伝えます。
Session 1: brand_start → brand_extract_web or brand_extract_visual or brand_extract_site → brand_generate_designmd → brand_compile → brand_clarify → brand_report
Session 2: brand_deepen_identity (interview x 6) → brand_compile (generates VIM)
Session 3: brand_extract_messaging → brand_compile_messaging (interview x 3) → brand_write
Session 4: brand_build_personas → brand_build_journey → brand_build_themes → brand_build_matrix
brand_status はいつでも呼び出せます。brand_preflight はコンテンツ生成後に実行されます。
構築した内容を確認する
静的チェックではソースを読み取ります。ページでブランドフォントを指定していてもフォールバックフォントで表示されたり、正しい16進カラーコードを使っていても、テキストが読みにくくなる背景色に重ねていたりすることがあります。render: true を指定した brand_preflight では、実際のブラウザーで計算結果を確認できます。
{ "html": "site/index.html", "render": true, "viewport": "mobile", "screenshot": true }
- 入力: HTML文字列、または作業ディレクトリ内の
.htmlファイルへのパス(シンボリックリンクを考慮したパス範囲チェック)。作業ディレクトリ内にあるスタイルシート、@import、スクリプト、フォント、画像は、レンダリング前にインライン化されます。 - サンドボックス: ページは、抽出に使用するのと同じ制限付きヘッドレス Chrome でレンダリングされます(Chromium のサンドボックスは有効、サービスワーカーはバイパス)。ネットワークへのすべての外向き通信は拒否されます。外向き通信プロキシはすべての接続を拒否し、リクエストインターセプターは
data:、blob:、about:以外のリクエストを中断します。リモートフォントや CDN のスタイルシートは読み込まれません。ブロックされた項目はレスポンスに一覧表示されるので、ローカルコピーに切り替えられます。 - 測定項目: 表示されるすべての要素について、計算済みのテキスト、背景、境界線の色(アルファ合成後)、実際に表示に使われるフォントフェイス(スタック内で最初に利用可能なファミリー)、フォントサイズとウェイト、ロゴが表示されるかどうかを測定します。
- チェック項目:
R-COLOR:最も近いブランドカラーとの CIEDE2000 距離を確認します。2.3 以下は一致、6 以下は情報として報告(「正確な値を使用してください」)、それを超えると警告、15 を超えるとエラーです。彩度の低いニュートラルカラーは常に許容されます。clarify-primaryが未解決の間、色のエラーは助言として扱われます。R-FONT:表示されるフォントフェイスはブランドフォントである必要があります。ブランドフォントの後に続く汎用フォントやシステムフォールバックは問題ありません。ブランドフォントが最初に指定されていても読み込めない場合は、情報として報告されます。R-CONTRAST:実際の前景色と背景色で測定した WCAG AA(4.5:1、大きなテキストは 3:1)を確認します。画像やグラデーション上のテキストは判定不能として扱われます。R-LOGO:ブランド名はテキストとして表示されていますが、ロゴの SVG または画像が表示されていません。
- 出力:
overall(PASS/WARN/FAIL)、0〜100 のscore(色 40/タイポグラフィ 30/コントラスト 30)、重大度順に並べた検出結果です。各検出結果には、ロケーター、測定値、最も近いブランド値または必須しきい値、上限をmax_findingsとした出現回数が含まれます。また、測定したパレットと文字のスケール、簡潔なstatic_preflightの概要、さらにscreenshot: trueの場合は、ユーザーに提示するための.brand/checks/配下の PNG パスも含まれます。静的ルールによる重大なアンチパターン違反も、レンダリングチェックの失敗になります。
ローカルに Chrome または Chromium をインストールしておく必要があります。インストールされていない場合、ツールはその旨を伝え、静的チェックに戻るよう案内します。
CLI コマンド
npm パッケージには、セットアップ、診断、ホスト型ブランドコネクター用の CLI エントリーポイントが含まれています。
npx @brandsystem/mcp doctor # local checkup: Node, profile, .brand/ state, credential permissions, client configs
npx @brandsystem/mcp install --client claude-code # write MCP config (dry-run by default; add --write to apply, existing config backed up)
npx @brandsystem/mcp install --client cline --write
npx @brandsystem/mcp install --client cursor --profile full
npx @brandsystem/mcp inspect # version, profile, tool list, .brand/ artifact inventory
npx @brandsystem/mcp brandcode connect https://brandcode.studio/start/brands/pendium
npx @brandsystem/mcp brandcode sync
npx @brandsystem/mcp brandcode status
install は他のサーバーのエントリーを上書きしません。ディープマージを行い、既存ファイルを先にバックアップし、無効な JSON の場合は処理を拒否します。実行したバージョン(@brandsystem/mcp@<version>)に仕様を固定します。Codex と Cline も同様です。浮動する @brandsystem/mcp を書き込むには、--unpinned を渡してください。保護されたホスト型ブランドには、--share-token=TOKEN を追加してください。
信頼済みの Studio オリジン。 認証情報(セッション、管理者、共有トークン)は、信頼済みの Brandcode Studio オリジン(デフォルトでは https://www.brandcode.studio と https://brandcode.studio)にのみ送信されます。また、信頼済みオリジンのパッケージによって宣言された承認のみが、ブランドを production_approved に設定できます。その他のホストからも公開パッケージを読み取ることはできますが(https のみ、SSRF 対策済み、認証情報なし)、それらの承認の申告は無視されます。ローカル開発またはステージングでは、BRANDCODE_STUDIO_TRUSTED_ORIGINS でオリジンを追加してください(カンマ区切り。明示的に指定した http://localhost、http://127.0.0.1、または http://[::1] を除き、https が必須です)。
署名済みパッケージ。 Brandcode Studio がパッケージに署名すると(Ed25519、キーは src/connectors/brandcode/signing-keys.ts にピン留めされています)、コネクターは署名を検証し、.brand/brandcode-package.sig.json として保存します。有効な署名があれば、どのオリジンからでも production_approved が付与されるため、コピーされたパッケージも検証可能な状態が保たれます。無効な署名では、承認は付与されません。本文の改ざん、不明なキー、またはキーの誤りが該当します。brand_brandcode_connect と brand_brandcode_sync は、package_signature を signed/verified、signed/invalid、または unsigned として報告します。また、brand_audit はプル後に変更された署名済みパッケージを警告します。署名されていないパッケージの承認を拒否するには、BRANDCODE_REQUIRE_SIGNED_APPROVAL=true を設定してください。docs/SIGNED-PACKAGES.md を参照してください。
.brand/ ディレクトリ
パイプライン全体を実行すると、.brand/ ディレクトリは次のようになります。
.brand/
brand.config.yaml # Client name, industry, source URLs, session state
core-identity.yaml # Colors, typography, logos with confidence scores
extraction-evidence.json # Multi-page rendered evidence bundle (optional)
design-synthesis.json # Structured design synthesis (radius, shadow, layout, personality)
DESIGN.md # Portable agent-facing design brief
tokens.json # DTCG design tokens (compiled output)
brand-runtime.json # Compiled runtime contract (single-doc brand context)
interaction-policy.json # Enforceable rules (anti-patterns, voice, claims)
needs-clarification.yaml # Items requiring human review
brand-report.html # Portable HTML brand report
visual-identity.yaml # Session 2: composition, patterns, anti-patterns
visual-identity-manifest.md # Session 2: compiled VIM document
system-integration.md # Session 2: CLAUDE.md / .cursorrules setup guide
messaging.yaml # Session 3: perspective, voice, brand story
messaging-audit.md # Session 3: voice fingerprint analysis
brand-story.md # Session 3: compiled brand narrative
assets/
logo/
logo-wordmark.svg # Extracted logo files
illustrations/ # Brand illustrations with MANIFEST.yaml
stickers/ # Brand stickers with MANIFEST.yaml
patterns/ # Brand patterns with MANIFEST.yaml
checks/ # Rendered-check screenshots (brand_preflight render=true, screenshot=true)
ファイルの詳細
| ファイル | 形式 | 目的 |
|---|---|---|
brand.config.yaml | YAML | プロジェクトのメタデータ:クライアント名、業界、Web サイトの URL、Figma ファイルキー、セッション番号、スキーマバージョン |
core-identity.yaml | YAML | 抽出したすべてのブランドデータ:カラー(役割と信頼度を含む)、タイポグラフィ(ファミリーとウェイトを含む)、ロゴ仕様(インライン SVG とデータ URI を含む)、スペーシング |
extraction-evidence.json | JSON | 代表的なページとビューポートから取得した、複数ページのレンダリング済み証拠です。スクリーンショット、計算された要素、統合の根拠として使用された CSS カスタムプロパティが含まれます |
design-synthesis.json | JSON | ブランドを構造化して解釈したものです。証拠と現在のアイデンティティに基づく、角丸、シャドウ、スペーシング、レイアウト、コンポーネント、モーション、パーソナリティのシグナルが含まれます |
DESIGN.md | Markdown | 証拠バンドルと現在のブランド状態から統合された、エージェント向けの持ち運び可能なデザインブリーフです |
tokens.json | JSON | DTCG デザイントークンです。カラーとタイポグラフィに加え、利用可能な場合は統合に基づく角丸、シャドウ、レイアウト、スペーシング、モーションのグループが含まれます |
brand-runtime.json | JSON | AI エージェント向けの単一ドキュメント形式のブランドコントラクトです。4 つのセッション YAML をフラットで素早く参照できる形式に統合します。信頼度が medium 以上の値のみを含みます。brand_compile によってコンパイルされ、brand_runtime によって読み込まれます |
interaction-policy.json | JSON | 適用可能なルールエンジンです。ビジュアルのアンチパターン、トーンの制約(使用禁止表現、AI らしい表現パターン)、コンテンツの主張に関するポリシーが含まれます。プリフライトとスコアリングツールで使用されます |
needs-clarification.yaml | YAML | システムが確信を持って解決できなかった項目の優先順位付きリストです:プライマリカラーの欠落、信頼度の低い値、役割が未割り当ての項目 |
brand-report.html | HTML | 自己完結型のブランドレポートです。オフラインで動作し、すべてのアセットをインラインで埋め込みます。ブランドガイドラインとして任意の AI ツールに貼り付けられます |
assets/logo/ | SVG/PNG | 抽出されたロゴファイルです。SVG には、持ち運びやすさのために core-identity.yaml 内にインラインのパスデータが含まれます |
プラットフォームのセットアップ
Codex
Codex の公式 MCP 設定コマンドに処理を委譲する、パッケージインストーラーを使用します。
npx @brandsystem/mcp install --client codex --write
インストール後、新しい Codex タスクを開始します。Codex CLI、Codex アプリ、IDE 拡張機能は同じ MCP 設定を共有します。
Cline
Cline の公式の非対話型 MCP コマンドに処理を委譲する、パッケージインストーラーを使用します。
npx @brandsystem/mcp install --client cline --write
新しい Cline タスクを開始し、次のように尋ねます:「AI でブランドガイドラインを使用するにはどうすればよいですか?」 Cline CLI と IDE 拡張機能は、~/.cline/data/settings/cline_mcp_settings.json にある同じグローバル設定を共有します。
Claude Code
プロジェクトルートに .mcp.json を作成します。
{
"mcpServers": {
"brandsystem": {
"command": "npx",
"args": ["-y", "@brandsystem/mcp"]
}
}
}
Cursor
プロジェクトルートに .cursor/mcp.json を作成します。
{
"mcpServers": {
"brandsystem": {
"command": "npx",
"args": ["-y", "@brandsystem/mcp"]
}
}
}
Windsurf
~/.codeium/windsurf/mcp_config.json を作成します。
{
"mcpServers": {
"brandsystem": {
"command": "npx",
"args": ["-y", "@brandsystem/mcp"]
}
}
}
Claude Desktop
ワンクリック: MCP バンドルをインストールします。最新の GitHub リリースから brandsystem-mcp-<version>.mcpb をダウンロードし、Claude Desktop で開きます。インストールダイアログで、ブランドプロジェクトのフォルダー(.brand/ がある場所)とツールプロファイル(core または full)を選択します。メンテナーは npm run build:mcpb を使ってバンドルをビルドします(→ build/brandsystem-mcp-<version>.mcpb)。そのマニフェストは package.json と登録済みの Core ツールから生成されます。
手動: [Settings]>[Developer]>[Edit Config]を開きます(claude_desktop_config.json)。Claude Desktop はプロジェクトフォルダー内でサーバーを起動しないため、BRANDSYSTEM_PROJECT_DIR を .brand/ がある(または今後作成される)フォルダーに設定します。
{
"mcpServers": {
"brandsystem": {
"command": "npx",
"args": ["-y", "@brandsystem/mcp"],
"env": { "BRANDSYSTEM_PROJECT_DIR": "/absolute/path/to/your/brand-project" }
}
}
}
互換性の概要
ブランドを AI ツールに取り込む方法は 3 つあります。混同しないでください。
| 方法 | クライアント | 必要なもの |
|---|---|---|
| 直接ローカル MCP(stdio) | Claude Code、Claude Desktop、Cursor、Windsurf | 上記の .mcp.json 設定。サーバーはお使いのマシン上で実行されます |
| ホスト型リモート MCP | ChatGPT(開発者モード)およびその他のリモート MCP クライアント | 承認済みの Brandcode Studio ブランドとベアラーキー(プレリリース版のため、承認されたクライアントのみ)。ChatGPT はリモート MCP サーバーに接続します。ローカルの stdio プロセスには接続できません。OpenAI は、プライベートサーバー向けにセキュアトンネルのオプションを公開しています |
| ランタイムアーティファクトのコピー | あらゆる AI ツール | brand-report.html または brand-runtime.json を会話にアップロードします。MCP 接続は不要です |
Claude Chat(MCP なし)
MCP サポートなしで Claude Chat を使用している場合:
- まずコード環境でパイプラインを実行し、
brand-report.htmlを生成します - HTML ファイルを Claude Chat の会話にアップロードします
- 「作成するものすべてに、このブランドガイドラインを使用してください」と伝えます
レポート HTML は自己完結型で、あらゆる AI ツールでスタンドアロンのブランドリファレンスとして機能します。
トラブルシューティング
「.brand/ ディレクトリが見つかりません」
brand_start、brand_init、brand_feedback を除くすべてのツールには、.brand/ ディレクトリが必要です。まず brand_start を実行してください。
ローカル抽出ではなくホスト型ブランドのフローを使用する場合、初回接続時に brand_brandcode_connect が .brand/ を自動的に作成します。
抽出結果が空(色やフォントが見つからない)
通常、ウェブサイトが JavaScript 経由で CSS を動的に読み込んでいることが原因です。brand_extract_web が解析するのは、<style> ブロックとリンクされたスタイルシートにある静的 CSS のみです。対処方法:
brand_extract_visualを実行すると、ヘッドレス Chrome と計算済みスタイルを使って、レンダリング済みの単一ページを分析しますbrand_extract_siteを実行すると、デスクトップとモバイルの代表的なページをサンプリングし、extraction-evidence.jsonに保存します- 抽出または手動編集後に
brand_generate_designmdを実行すると、design-synthesis.jsonとDESIGN.mdを再生成します - 別のページを試す(ホームページやブログ記事など、インライン CSS やリンクされた CSS をより多く使用しているページ)
- Figma 抽出を使用する(
brand_extract_figma)。より高い精度で抽出できます - 抽出後に
brand_clarifyを使って値を手動で設定します
mode='auto' の brand_start は、抽出品質が低く、Chrome/Chromium が利用可能な場合、このビジュアルフォールバックをすでに試します。その後、利用可能なエビデンスの中で最良のものから design-synthesis.json と DESIGN.md を生成します。
Figma 抽出に失敗する
brand_extract_figma は Figma に直接接続しません。次の 2 つのフェーズで動作します。
- Plan は、取得するデータ(変数、スタイル、ロゴ)の手順を返します
- Ingest は、Figma MCP ツールから渡されたデータを処理します
別途 Figma MCP サーバー(例:@anthropics/figma-mcp)を接続し、取得したデータを ingest モードで brand_extract_figma に渡してください。
ロゴが検出されない
ウェブ抽出では、<img>、<svg>、<link rel="icon"> 要素を検索します。ロゴが JavaScript 経由でレンダリングされている場合や、CSS の背景として埋め込まれている場合は、brand_set_logo を使って SVG マークアップ、URL、またはデータ URI で手動追加してください。
「応答サイズが 5K の目標値を超えています」(コンソール警告)
これはソフト警告であり、エラーではありません。一部のツール(brand_write、brand_deepen_identity)は、5K 文字を超える詳細な会話ガイドを返します。ハードリミットは 50K で、これを超えると切り詰められます。
サーバーが起動しない
# Verify Node.js >= 22.13.0
node --version
# Test the server manually
npx @brandsystem/mcp
# Check for port conflicts (stdio transport shouldn't have any)
# The server uses stdio, not HTTP -- it reads from stdin and writes to stdout
フィードバックの報告
バグ、使いにくさ、アイデアの報告には brand_feedback を使用してください。
brand_feedback with category="bug", summary="Logo SVG has empty gradient stops",
detail="The extractor found the SVG structure but <linearGradient> stops have no
stop-color attributes. Logo renders as a black rectangle.",
tool_name="brand_extract_web", severity="degrades_experience"
エージェントのテレメトリには、category="agent_signal" を指定し、signal、tool_used、signal_context を使用してください。ブランドのコンテキストは .brand/config から自動入力されます。
仕組み
信頼度スコアリング
抽出された各値には信頼度レベルが付与されます。
| レベル | 意味 | トークンの動作 |
|---|---|---|
confirmed | 人間による検証済み | トークンに含まれます |
high | 強い根拠(例:Figma の変数、--brand-primary という名前の CSS カスタムプロパティ) | トークンに含まれます |
medium | 妥当な推定(例:CSS で最も頻繁に使用される有彩色) | トークンに含まれます |
low | 弱い根拠(例:汎用プロパティで一度だけ現れる色) | トークンから除外され、needs-clarification.yaml に追加されます |
ソースの優先順位
同じブランド要素が複数のソースで見つかった場合、優先順位の高いソースが採用されます。
figma > manual > web
Figma から取得したプライマリカラーは、Web から抽出した色を置き換えます。手動で確認した値は、どちらの自動取得ソースよりも優先されます。同じソース内では、信頼度の高い値が優先されます。
Web からの抽出
brand_extract_web は対象の URL を取得し、次の処理を行います。
- すべての
<style>ブロックと、最大 5 件のリンクされたスタイルシートを解析します - CSS プロパティとカスタムプロパティから色の値を抽出します
- プロパティ名から色の役割を推定します(例:
--primary、--brand-accent) - 明示的なプライマリカラーが見つからない場合、最も頻繁に使用される有彩色を「プライマリ」に昇格させます
- フォントファミリーを抽出し、使用頻度順に並べます
<img>、<svg>、<link rel="icon">要素からロゴ候補を見つけます- ロゴをインライン SVG または base64 データ URI としてダウンロードし、埋め込みます
ビジュアル抽出
brand_extract_visual は対象 URL に対してヘッドレス Chrome を起動し、次の処理を行います。
- レンダリングされたページの 2x DPR スクリーンショットをキャプチャします
- body、header、hero、リンク、カード、ボタンなどのセマンティック要素から計算済みスタイルを抽出します
:rootから CSS カスタムプロパティを読み取ります- 視覚的な文脈から色の役割を推定します(例:ボタンの背景色 → プライマリ)
- 呼び出し元のエージェントが定性的な視覚分析を行えるよう、スクリーンショットを MCP 画像ブロックとして返します
これは、静的な CSS 解析では重要なブランドの手がかりを見落とす、JavaScript でレンダリングされるアプリやページビルダー向けのフォールバック経路です。
サイト全体の詳細な抽出
brand_extract_site は、レンダリング経路をホームページ以外にも拡張します。
- 同じドメイン内の代表的なページを検出します
- 選択した各ページのデスクトップおよびモバイルのスクリーンショットをキャプチャします
- ボタン、カード、リンク、入力欄、セクションなど、複数のコンポーネントのインスタンスをサンプリングします
- 結果を
.brand/extraction-evidence.jsonに保存します - その証拠を
brand_generate_designmd/brand_compileに渡し、.brand/design-synthesis.jsonと.brand/DESIGN.mdを生成します merge=trueの場合、追加の色とフォントをcore-identity.yamlにマージします
ホームページだけではブランドシステムを把握できない場合や、トークンのコンパイル前により豊富な根拠を得たい場合に使用してください。
Figma からの抽出
brand_extract_figma は、Figma MCP と brandsystem の連携を実現するため、2 つのステップで動作します。
- プランモード -- Figma から取得するデータ(変数、テキストスタイル、ロゴコンポーネント)の具体的な手順を返します
- 取り込みモード -- 収集した Figma データを処理し、変数名を役割に対応付けて、信頼度
highでcore-identity.yamlにマージします
DTCGトークンのコンパイル
brand_compile は core-identity.yaml をDesign Tokens Community Group形式に変換します。
- 色は、役割をキーとする
$type: "color"トークンになります。同じテーマ内で、同じ役割に属する色が2つ正当に存在する場合(たとえば、ページのサーフェスと控えめなパネルのサーフェス)、次点の色は役割バリアント(surface-alt、text-secondary、neutral-alt、border-alt、accent-alt、action-alt)として保持され、variantOfを拡張情報に含むcolor.surface-altなどの兄弟トークンとしてコンパイルされます。バリアントには、少なくともmediumの信頼度があり、ベースカラーと同じソース階層に属し、目に見える違いがある必要があります。テーマごとに、ベースとなる各役割に設定できるバリアントは1つまでです - タイポグラフィは、
fontFamily、dimension(サイズ)、fontWeightの各エントリを含むグループ化されたトークンになります - スペーシングは、スケール値を持つ
dimensionトークンになります - 各トークンには、ソースと信頼度のメタデータを含む
$extensions["com.brandsystem"]が含まれます - 信頼度が
medium以上の値のみが含まれます
全体像
Build、Use、Evolve、Deployの4つの動詞が連なっています。@brandsystem/mcp が担うのはBuildです。それらの間を移動するのが .brand ランタイムです。
Build Use Deploy
───── ─── ──────
@brandsystem/mcp ────► @brandcode/mcp ────► Every surface
(this package) (mcp.brandcode.studio) Claude Design
Claude Code
authors the ─────────► .brand/ runtime ─────────► Cursor
portable runtime (portable artifact) ChatGPT
NotebookLM
▲ Gemini
│ ...any MCP client
│
Evolve ─── Brandcode Studio
(governance promotion,
taste compilation,
memory wall)
Build — このパッケージです。アイデンティティを抽出し、ガバナンスをコンパイルして、.brand/ ディレクトリを生成します。
Use — @brandcode/mcp は mcp.brandcode.studio/{slug} でホストされています。認証済みのMCPクライアントは、デフォルトで最新のフルブランドランタイムを取得します。
Evolve — Brandcode Studio。テイストに関するメモは記憶から正式なガバナンスへと昇格し、アンチパターンが蓄積されます。本番サイクルを重ねるたびに、ランタイムが洗練されていきます。
Deploy — ガバナンスが適用された .brand リポジトリを、どこへでも持ち運べます。Claude Designに指定してください。Claude Code、Chat、Gemini、NotebookLM向けのパックをコンパイルします。すべてのサーフェスが同じランタイムを使用します。
段階的な深度
各ステージは前のステージを土台にしています。どの段階で止めても、すぐに価値が得られます。
| ステージ | 得られるもの | 方法 |
|---|---|---|
| 1. 無料スキャン | ブランドトークン+DESIGN.md+プラットフォーム設定ガイド付きHTMLレポート | brand_start(自動)、または brand_extract_web / brand_extract_visual / brand_extract_site → brand_generate_designmd → brand_compile → brand_report |
| 2. MCPによる詳細分析 | Figmaからの抽出、明確化、完全な監査 | セッション1で brand_extract_figma + brand_clarify を実行 |
| 3. ビジュアルアイデンティティ | 構成ルール、パターン、アンチパターン、VIM | セッション2:brand_deepen_identity → brand_compile |
| 4. コアメッセージ | ボイスプロファイル、視点、ブランドストーリー | セッション3:brand_extract_messaging → brand_compile_messaging |
| 5. Studioとの同期 | ホストされたパッケージの取得、同期履歴、共有配布 | brand_brandcode_connect → brand_brandcode_sync → Live Modeで読み込む場合は brand_brandcode_live |
| 6. Live Use MCP | 認証済みエージェントが mcp.brandcode.studio/{slug} にアクセスし、最新のランタイム、ナレッジ検索、ドラフトチェック、アセット取得を利用 | @brandcode/mcp はベアラーキー認証で一度接続するだけで、エージェントのセッション間でも読み取り内容は最新に保たれます |
| 7. Claude Designへのデプロイ | Claude Designは .brand/ ディレクトリをネイティブに参照します。ガバナンス、ナラティブ、根拠となる情報、テイストに関するメモがすべて変換なしで読み込まれます | .brand/ を含むリポジトリをClaude Designに指定すると、最初の生成からブランドに沿った出力が得られます |
ステージ1〜4は、ローカルで完結するスタンドアロンのMCPフローです。オープンソースで完全にポータブルなため、アカウントは不要です。
ステージ5〜7はデプロイの流れです。.brand ランタイムが共有され、ライブで提供され、すべての生成サーフェスで使用されます。Brandcode StudioおよびColumn Five Mediaから利用できます。
ポータブルなもの
| 成果物 | ポータブルか | 所有者 |
|---|---|---|
@brandsystem/mcp(作成ツール) | 完全にポータブル — オープンソースで、あらゆるブランドで利用可能 | MIT ライセンス |
.brand/ ディレクトリ(ランタイム) | 完全にポータブル — ブランドとともに持ち運べるポータブルな成果物 | クライアント |
| Brandcode フレームワーク(スキーマ + スタンス + U-mech) | 完全にポータブル — すべてのブランドインスタンスにインポートされる共通レイヤー | オープン |
| クライアントの主張、ナラティブ、ルール(I-content) | インスタンスごと — ブランドごとに固有 | クライアント |
@brandcode/mcp(ホスト型 Use MCP) | ランタイムを提供 — 認証済みの MCP クライアントが接続 | Brandcode |
開発
# Install dependencies
npm install
# Build TypeScript
npm run build
# Watch mode for development
npm run dev
# Run tests
npm test
# Watch mode for tests
npm run test:watch
# Type check without emitting
npm run lint
# Start the server (stdio transport)
npm start
プロジェクト構成
src/
index.ts # Entry point -- stdio transport
cli.ts # CLI entry point for brandcode connect/sync/status
server.ts # MCP server creation and tool registration (all tools, priority order)
tools/ # One file per tool
brand-start.ts # Entry point (Session 1)
brand-status.ts # Progress dashboard
brand-extract-web.ts # Website extraction
brand-extract-figma.ts # Figma extraction (plan/ingest)
brand-set-logo.ts # Manual logo add/replace
brand-compile.ts # Token + VIM + runtime compilation
brand-clarify.ts # Interactive clarification
brand-audit.ts # Schema validation
brand-report.ts # HTML report generation
brand-init.ts # Low-level directory scaffolding
brand-deepen-identity.ts # Session 2: visual identity interview
brand-ingest-assets.ts # Session 2: asset cataloging
brand-preflight.ts # Session 2: HTML compliance checking
brand-extract-messaging.ts # Session 3: voice/messaging audit
brand-compile-messaging.ts # Session 3: perspective + voice interview
brand-build-personas.ts # Session 4: buyer personas
brand-build-journey.ts # Session 4: buyer journey stages
brand-build-themes.ts # Session 4: editorial themes
brand-build-matrix.ts # Session 4: messaging matrix
brand-audit-content.ts # Content scoring (0-100)
brand-check-compliance.ts # Binary pass/fail compliance gate
brand-audit-drift.ts # Batch drift detection
brand-runtime.ts # Read compiled brand runtime contract
brand-brandcode-connect.ts # Hosted brand connect
brand-brandcode-sync.ts # Hosted brand sync
brand-brandcode-status.ts # Hosted brand status
brand-write.ts # Content generation context loader
brand-export.ts # Portable brand file export
brand-feedback.ts # Bug reports + feedback
connectors/
brandcode/ # Hosted brand client, persistence, and URL resolution
lib/ # Shared utilities
brand-dir.ts # .brand/ directory I/O (YAML, JSON, markdown, assets)
confidence.ts # Confidence scoring and source precedence
css-parser.ts # CSS color and font extraction
dtcg-compiler.ts # DTCG token compilation
color-namer.ts # Human-readable color name generation
content-scorer.ts # Brand compliance scoring engine
logo-extractor.ts # Logo candidate detection
svg-resolver.ts # SVG inlining and base64 encoding
report-html.ts # HTML report generation
vim-generator.ts # Visual Identity Manifest + system integration markdown
runtime-compiler.ts # Compile brand-runtime.json from 4 source YAMLs
interaction-policy-compiler.ts # Compile interaction-policy.json (enforceable rules)
response.ts # Structured MCP response builder
version.ts # Package version reader
types/
index.ts # TypeScript type definitions
schemas/
index.ts # Zod schemas for validation (7 schema files)
bin/
brandsystem-mcp.mjs # CLI entry point
specs/
brand-runtime-schema.md # Runtime contract documentation
interaction-policy-schema.md # Interaction policy documentation
test/
lib/ # Library unit tests (9 files)
tools/ # Tool tests (2 files: export + smoke)
server.test.ts # Server creation smoke test
エージェント評価スイート
eval/ ディレクトリには、フィクスチャ、方法論、実行可能なハーネスが含まれています。実際のプロンプトに対する最初のツールの選択、応答のトークン予算、エンベロープへの準拠、ラベル付けされたケースに対するコンプライアンスチェックの精度、さらに、説明なしで別のエージェントが生成されたランタイムを使用できるかどうかなど、エージェントにとって重要な項目を測定します。決定論的なティアは npm run eval で実行できます。モデルに依存するティア(最初のツールの選択)は ANTHROPIC_API_KEY を指定した場合のみ実行されます。結果は、モデルのバージョンと日付を明記した実際の実行結果からのみ公開されます。このリポジトリが提供するのは検証の仕組みであり、主張ではありません。詳しくは eval/README.md をご覧ください。
セキュリティ
- 脆弱性は非公開で報告してください。 リポジトリの Security ページ → Advisories → 「Report a vulnerability」から報告してください。SECURITY.md をご覧ください。脆弱性の疑いについて、公開の Issue は作成しないでください。
- 設計上、ローカル優先です。 抽出とコンパイルはお使いのマシン上で実行されます。ネットワークを使用するのは、ツールに指定したソースの取得(ウェブサイト、またはご自身の Figma MCP 経由での Figma)、ホストされたブランドに接続した場合の任意の Brandcode Studio コネクター呼び出し、および任意の
brand_feedbackレポートに限られます。 - ローカルに書き込まれる内容: すべて作業ディレクトリ内の
.brand/に保存されます。コネクターの認証情報は.brand/brandcode-auth.jsonに保存されます(gitignore 対象)。
ライセンス
MIT
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。