Ensemble

---

これは何ですか？

Ensemble MCP は、AI エージェントがプロフェッショナルなデザインツールを利用できるようにするModel Context Protocol サーバーです。自然な会話を通じて、カラーパレットの生成、フォントの組み合わせ、シャドウシステムの作成、デザインシステム全体のトークンのエクスポートができます。

10 個のツール。1 つの API。無限の可能性。

ツール	機能	主な引数
harmony_generate_palette	1 色のブランドカラーから完全なカラーモデルを作成します	color_scheme
duet_pair_fonts	見出し、本文、等幅フォントとタイポグラフィスケールを設定します	type_style
tempo_generate_scale	タイポグラフィに合わせて調整したスペーシングシステムを作成します	density
chord_generate_shadows	パレットの色味を反映したエレベーションシャドウを作成します	shadow_intensity
cadence_generate_grid	ブレークポイント、カラム、ガターを備えたレスポンシブグリッドを作成します	density
riff_generate_motion	持続時間、イージングカーブ、トランジションプリセットを作成します	animation_style
bridge_generate_theme	ライトシステムからダークモード全体を作成します	color
pitch_audit_contrast	WCAG に適合するパレットの色の組み合わせと、修正が必要な箇所を確認します	color
compose_export	システム全体を CSS、JSON、Tailwind、SCSS としてエクスポートします	formats
a11y_validate	1 組の色のアクセシビリティをチェックします（無料、キー不要）	foreground、background

各ビルダーにはブランドの color と任意の preferences オブジェクトを指定できるため、個別に呼び出したツール同士でも結果に一貫性が保たれます。結果は決定論的です。同じ色と設定を指定すると、常に同じシステムが生成されます。

------|--------------| | harmony_generate_palette | 1 色から調和の取れたカラーパレットを生成します | | duet_pair_fonts | 互いに引き立て合う見出し用フォントと本文用フォントを組み合わせます | | tempo_generate_scale | タイポグラフィスケールとスペーシングシステムを作成します | | chord_generate_shadows | 5 段階のエレベーションシャドウシステムを生成します | | bridge_generate_theme | ライトテーマの色からダークモードを自動生成します | | cadence_set_grid | プリセットを使って CSS Grid のレイアウトを設定します | | pitch_create_gradient | 線形、放射状、円錐状のグラデーションを作成します | | riff_set_easing | cubic-bezier のイージングカーブを設定します | | compose_export | デザインシステム全体をエクスポートします（CSS、Tailwind、SCSS、JSON） | | a11y_validate | 色のコントラストのアクセシビリティをチェックします（無料、キー不要） |

---

クイックスタート

Claude Desktop

claude_desktop_config.json に追加します。

{
  "mcpServers": {
    "ensemble": {
      "command": "npx",
      "args": ["-y", "@hearthbyte/ensemble-mcp"],
      "env": {
        "ENSEMBLE_API_KEY": "your-api-key-here"
      }
    }
  }
}

Cursor / Cline

{
  "ensemble": {
    "command": "npx",
    "args": ["-y", "@hearthbyte/ensemble-mcp"],
    "env": {
      "ENSEMBLE_API_KEY": "your-api-key-here"
    }
  }
}

手動インストール

npm install -g @hearthbyte/ensemble-mcp
ensemble-mcp

---

プロンプトの例

インストール後、AI に次のように依頼してみてください。

「#6366F1 から三色配色のカラーパレットを生成して」

「クラシカルなフォントの組み合わせと、それに合うゆったりとしたスペーシングシステムを提案して」

「#6366F1 の背景に #FFFFFF のテキストを配置した場合、アクセシビリティ上問題がないか確認して」

「#0F766E から、ドラマチックなシャドウを備えたデザインシステムを作成して、Tailwind の設定としてエクスポートして」

「作成したばかりのパレットのコントラストを監査して、基準を満たさない箇所を教えて」

---

API キー

ビルダーは Ensemble API を呼び出します。利用には Pro キーが必要です（月額 $4.99、または年額 $39）。

無料ツール： a11y_validate - API キー不要のアクセシビリティ検証です。

API キーを取得 →

---

設計理念

Ensemble ツールは、以下の原則に基づいて構築されています。

1. 1 色からデザインシステムを作成 - 1 つの値から、完全なシステムを作成します
2. ツール間の同期 - 色がタイポグラフィに反映され、タイポグラフィがスペーシングの指針になります
3. あらゆる形式でエクスポート - CSS、Tailwind、SCSS、JSON
4. アクセシビリティを最優先 - WCAG 2.1 + APCA チェックを標準搭載

---

リンク

• 🌐 Ensemble Web ツール - ブラウザーで利用できます。インストールは不要です
• 📖 API ドキュメント
• 🤖 WebMCP 仕様

---