basalt

Basalt Design System

Git に保存されたデザイントークン。AI が読み取れ、編集も快適です。

このリポジトリは、トークン、コンポーネント、ドキュメントを Git に保存し、MCP 経由で AI コーディングツールに提供するデザインシステムプラットフォーム Basalt によって管理されています。

このリポジトリの内容

tokens/
├── primitives.json        # Raw values (colors, spacing, radii)
├── semantic.light.json    # Light theme semantic tokens
└── semantic.dark.json     # Dark theme semantic tokens

すべてのトークンは DTCG 2025.10 形式（W3C 標準）を使用しています。

AI ツールでこれらのトークンを使用する

Basalt は、MCP サーバー経由でこのデザインシステムを Cursor、Claude Code、Claude Design、Windsurf に提供します。AI ツールは推測するのではなく、実際のトークン値を参照します。

セットアップ手順と利用可能なツールについては、MCP.md をご覧ください。

クイック設定（Cursor / Claude Code / Windsurf）：

{
  "mcpServers": {
    "basalt": {
      "url": "https://basalt.run/api/mcp",
      "headers": {
        "Authorization": "Bearer bsk_your_key_here"
      }
    }
  }
}

basalt.run で無料の API キーを取得できます。

トークンのアーキテクチャ

3 つの階層があり、それぞれ上位のレイヤーを参照します。

プリミティブ → 生の値（color.orange.500 = #F97316） セマンティック → 意図とテーマ設定（color.action.default → color.orange.500） コンポーネント → UI 要素にスコープを限定（button.background.default → color.action.default）

AI ツールは MCP 経由で階層全体を自動的に解決します。

リンク

• basalt.run — ビジュアルエディター、コンポーネントレジストリ、MCP サーバー
• MCP.md — MCP サーバーのドキュメントとセットアップ
• MCP Registry — basalt を検索

ライセンス

MIT — LICENSE をご覧ください。