关于 Ensemble
Ensemble 是面向 AI Agent 的 MCP 服务，可从品牌色生成相互协调的设计系统，涵盖配色、字体、布局、效果与无障碍检查，并支持多种格式导出。
主要功能
- 01生成协调的配色方案
- 02搭配字体并创建字号比例
- 03构建间距、网格和阴影系统
- 04创建动效设置和深色主题
- 05检查 WCAG 对比度与无障碍性
- 06将设计令牌导出为 CSS、JSON、Tailwind 或 SCSS
适用场景
- 01从品牌色创建设计系统
- 02选择适配的标题与正文字体
- 03在实现前检查配色对比度
- 04为项目导出设计令牌
MCP 相关
该 MCP 服务向 MCP 客户端提供设计生成、导出和无障碍检查工具。大多数生成工具调用 Ensemble API；a11y_validate 无需 API 密钥。
配置
本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。
工具
10收录的工具列表 · 更新于 2 周前
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| color | string | 是 | 十六进制格式的品牌颜色（例如 #6366F1）。整个系统均以此为基础。 |
| colors | array | 否 | 其他十六进制格式的品牌颜色（最多共 5 种颜色，包含 `color`）。 |
| preferences | object | 否 | 其他设计偏好，以便单独调用的工具保持一致。将相同的值传递给每个工具。 |
| preferences.corners | enum | 否 | 圆角风格（默认：圆润）sharp | rounded | pill |
| preferences.density | enum | 否 | 间距密度（默认：均衡）compact | balanced | airy |
| preferences.type_style | enum | 否 | 字体风格（默认：现代）modern | classical | minimalist | expressive |
| preferences.color_scheme | enum | 否 | 调色板的生成方式（默认：类似色）monochromatic | analogous | complementary | triadic | split-complementary |
| preferences.animation_style | enum | 否 | 动效风格（默认：最简）none | minimal | fluid | energetic |
| preferences.shadow_intensity | enum | 否 | 阴影强度（默认：柔和）flat | subtle | pronounced | dramatic |
| color_scheme | enum | 否 | 根据品牌颜色生成调色板的方式（默认：类似色）monochromatic | analogous | complementary | triadic | split-complementary |
详细介绍
这是什么？
Ensemble MCP 是一个 Model Context Protocol 服务，可让 AI Agent 使用专业设计工具。生成配色方案、搭配字体、创建阴影系统并导出完整设计令牌——全部通过自然对话完成。
10 个工具。一个 API。无限可能。
| 工具 | 功能 | 主要参数 |
|---|---|---|
harmony_generate_palette | 根据一种品牌色生成完整配色系统 | 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 | 检查一组颜色是否符合无障碍要求（免费，无需密钥） | foreground, background |
每个构建工具都接受品牌 color 和可选的 preferences 对象，因此单独调用的工具也能相互协调。结果具有确定性：相同的颜色和偏好设置始终会生成相同的系统。
------|--------------|
| harmony_generate_palette | 根据单一颜色生成和谐的配色方案 |
| duet_pair_fonts | 搭配相辅相成的标题和正文字体 |
| tempo_generate_scale | 创建字体级数和间距系统 |
| chord_generate_shadows | 生成 5 级阴影层次系统 |
| bridge_generate_theme | 根据浅色主题自动生成深色模式 |
| cadence_set_grid | 使用预设配置 CSS Grid 布局 |
| pitch_create_gradient | 创建线性、径向和圆锥渐变 |
| riff_set_easing | 设置三次贝塞尔缓动曲线 |
| 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 密钥即可进行无障碍验证。
设计理念
Ensemble 工具遵循以下原则：
- 输入一种颜色，生成设计系统 - 从单个值开始，获取完整的系统
- 跨工具同步 - 颜色影响排版，排版为间距设计提供参考
- 随处导出 - CSS、Tailwind、SCSS、JSON
- 无障碍优先 - 内置 WCAG 2.1 和 APCA 检查
链接
- 🌐 Ensemble Web 工具 - 在浏览器中使用，无需安装
- 📖 API 文档
- 🤖 WebMCP 规范
由 HearthByte 倾情打造 🧡
你的工作，你的选择，始终如此。
评论
一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。