branding-mcp

カラー、タイポグラフィ、間隔、シャドウ、ボーダー、モーショントークン、グラデーション、複数バリエーションのロゴ、ファビコン、OG 画像を含むデザインシステム全体を、複数形式へのエクスポート付きで生成します。58 個の MCP ツールを備え、API 依存なしでアルゴリズムを優先して生成します。

機能

• カラーパレット生成 — HSL ベースのカラー調和（補色、類似色、三色配色など）と WCAG コントラスト検証
• タイポグラフィシステム — 厳選したフォントの組み合わせによるモジュラーな文字サイズスケール
• 間隔スケール — 等比数列による間隔システム
• シャドウ／エレベーションシステム — ブランドカラーを反映したシャドウを備えた 6 段階のエレベーションスケール。ライト／ダークテーマに対応
• ボーダー／シェイプシステム — 8 種類すべてのブランドスタイルに対応する、スタイルに応じた角丸スケールとボーダー幅
• モーション／アニメーションシステム — ブランドスタイルごとの継続時間スケール、cubic-bezier イージング、トランジションプリセット
• グラデーションシステム — スタイルに応じた 5 種類のグラデーションプリセット（ヒーロー、ボタン、カード、テキスト、背景）
• 複数バリエーションのロゴ — スタイルに応じたシェイプを備えた、ワードマーク、モノグラム、抽象形、アイコンのバリエーション
• ファビコン生成 — ブランドアイコンから 4 サイズ（16、32、180 の apple-touch、512 の PWA）を生成
• OG 画像テンプレート — ブランドグラデーションを使用したデフォルト、記事、ソーシャル形式
• 複数形式へのエクスポート — W3C Design Tokens、CSS カスタムプロパティ、Tailwind プリセット、Figma トークン、React テーマ、Sass 変数
• ブランド検証 — WCAG コントラストチェック、完全性スコアリング、一貫性分析
• ブランドガイドライン — HTML ブランドブックの生成

クイックスタート

npm install
npm run build

npm から実行（stdio）

npx -y @forgespace/branding-mcp@latest

グローバルにインストール

npm install -g @forgespace/branding-mcp
forgespace-branding-mcp

IDE／クライアント設定

{
  "mcpServers": {
    "forgespace-branding": {
      "command": "npx",
      "args": ["-y", "@forgespace/branding-mcp@latest"]
    }
  }
}

AI による調整を利用する場合は、ANTHROPIC_API_KEY を設定してください。外部 API を使わないアルゴリズムのみのモードでもサーバーは動作します。

MCP ツール

コアツールと各分野向けツールを利用できます（合計 58 個）。以下の表では、コアツールと、ヘルスケアを含む主要な分野別生成ツールを紹介します。

ツール	説明
generate_brand_identity	名前、業界、スタイルからブランド全体を生成
generate_color_palette	調和情報と WCAG データを含むカラーパレット
generate_typography_system	フォントの組み合わせとモジュラーな文字サイズスケール
export_design_tokens	ブランドを JSON／CSS／Tailwind／Figma／React／Sass にエクスポート
create_brand_guidelines	HTML ブランドブックを生成
validate_brand_consistency	WCAG 準拠と完全性をチェック
refine_brand_element	特定のブランド要素を反復調整
generate_brand_assets	ブランドからファビコンと OG 画像を生成
generate_design_system	1 回の呼び出しでデザインシステム全体を生成（アイデンティティ＋エクスポート）
generate_brand_fintech	コンプライアンスとセキュリティを考慮したフィンテック向け戦略
generate_brand_healthcare	ケアモデルと安全性のシグナルを考慮したヘルスケア向け戦略

MCP リソース

リソース	URI	説明
ブランドテンプレート	brand://templates	事前設定済みの業界テンプレート
ブランドナレッジ	brand://knowledge	色彩理論とタイポグラフィのルール

開発

npm run dev          # Watch mode
npm run validate     # Lint + format + test
npm run test         # Run tests
npm run test:coverage # Coverage report
npm run build        # Build TypeScript

配布

• npm — 次のパッケージとしてインストールできます： @forgespace/branding-mcp
• MCP Registry のメタデータ — レジストリへの登録用に server.json と mcpName が含まれています
• タグリリースの自動化 — v* をプッシュすると、provenance 付きで npm に公開され、その後 GitHub OIDC 経由で同じバージョンが MCP Registry に公開されます
• 週次のレジストリ運用 — .github/workflows/mcp-registry-status.yml により、npm と MCP Registry の差異、公開状況、次のアクションをまとめた Issue が更新されます
• GitHub — Forge-Space/branding-mcp

アーキテクチャ

src/
├── index.ts                    # MCP server entry
├── lib/
│   ├── branding-core/          # Core library (reusable)
│   │   ├── generators/         # Color, typography, spacing, logo, gradients, favicons, OG
│   │   ├── exporters/          # Multi-format token export
│   │   ├── validators/         # WCAG, consistency checks
│   │   └── documents/          # Brand book generation
│   ├── config.ts               # Environment config
│   ├── logger.ts               # Pino logging
│   └── types.ts                # TypeScript interfaces
├── tools/                      # 58 MCP tool registrations
└── resources/                  # Templates + knowledge base

エコシステムとの連携

Forge Space エコシステムの一部です：

• mcp-gateway — MCP サーバーとして登録します（ポート 8033）
• ui-mcp — brandId パラメーターを使用してブランドトークンを取得します
• uiforge-webapp — /branding/* にあるブランド管理 UI
• forge-patterns — 共有設定と規約

コミュニティ

• ドキュメント
• GitHub ディスカッション
• Issue トラッカー

ライセンス

MIT