光谱设计数据 MCP 服务器
已贬值 ——本套计划不再积极维护. 新项目应使用
@adobe/design-data-mcp相反, 它通过原地运行,是积极维护的接班人。 请注意:@adobe/design-data-mcp这不是一个即时替换——它有不同的工具名称,而且确实 不包括query-tokens-by-value, (中文(简体) ),validate-component-props,或组件 --schema 工具。 此软件包仍然可供后向兼容, 但不会收到新的 特性.
一个模型上下文协议(MCP)服务器,提供AI工具有结构化访问Adobe Spectrum设计系统数据,包括设计符和组件API schemas.
概览
这个MCP服务器使AI助手能够通过标准化协议查询并和Spectrum设计数据互动. 它提供下列渠道:
- 设计托肯斯: 彩色调色板、打字、布局符号和语义符号
- 组件外观: Spectrum 组件的 API 定义和验证方案
- 未来: 组件解剖、设计模式和准则
先决条件
- 节点.js 20+
为了兼容性,令牌工具通过 Cononic 嵌入式数据集投影
@adobe/design-data-wasm 而不是读取生成的遗留符号文件 .
工具名和响应形状不变. 这个包裹仍然是被贬损的.
工作空间发展需要 moon run sdk-wasm:build 在测试之前.
安装
npm install -g @adobe/spectrum-design-data-mcp
验证软件包完整性
这个软件包以npm出处发布,以加强供应链安全。 您可以验证包裹的证明:
npm audit signatures
或者克隆并在当地运行 :
git clone https://github.com/adobe/spectrum-design-data.git
cd spectrum-design-data/tools/spectrum-design-data-mcp
pnpm install
使用量
启动 MCP 服务器
# Start the server (default command)
spectrum-design-data-mcp
# Or explicitly start
spectrum-design-data-mcp start
服务器在当地运行,并通过stdio与MCP兼容的AI客户端进行通信.
可用工具
调试工具
query-tokens: 按名称、类型或类别搜索光谱符号query-tokens-by-value: 以直接或已解析的值查找符号( 随同别名)get-token-details: 获取关于特定标志的详细信息get-component-tokens: 获取组件名称的所有符号
Schema 工具
list-components: 列出现有组件(无计划有效载荷)get-component-schema: 一个组件的完整计划validate-component-props: 对照计划验证道具search-components-by-feature: 按属性名称查找组件
配置
MCP 设置
添加到您的 MCP 配置( 例如 ), .cursor/mcp.json 光标 IDE :
备选案文1:使用npx(建议)
{
"mcpServers": {
"spectrum-design-data": {
"command": "npx",
"args": ["-y", "@adobe/spectrum-design-data-mcp"]
}
}
}
备选方案2:使用全球安装
{
"mcpServers": {
"spectrum-design-data": {
"command": "@adobe/spectrum-design-data-mcp"
}
}
}
备选办法3:地方发展
{
"mcpServers": {
"spectrum-design-data": {
"command": "node",
"args": [
"./path/to/spectrum-design-data/tools/spectrum-design-data-mcp/src/index.js"
]
}
}
}
说明: 使用
npx建议采用(备选案文1),因为它避免了路径选择问题,并确保您总是使用最新版本。 这个方法与浏览器MCP等其它MCP服务器相仿并解决了常见的NPX可用性问题.
Claude 桌面 (Legacy 配置)
对于更古老的克洛德桌面配置:
{
"mcpServers": {
"spectrum-design-data": {
"command": "spectrum-design-data-mcp",
"args": []
}
}
}
其他MCP客户端
服务器使用stdio可运输并遵循MCP规格. 请查看您的客户端的文档以了解配置细节 .
实例
构筑工作流程
特定部件
Human: Show me all available button-related design tokens.
AI: I'll gather all button-related tokens from the Spectrum system.
[Uses get-component-tokens with componentName="button"]
Found button-related tokens across categories:
- Color tokens: floating-action-button colors
- Layout tokens: button sizing, padding, spacing
- Examples: radio-button-control-size-small, action-button-edge-to-hold-icon...
按数值查找托肯
Human: Which tokens resolve to 1px?
AI: I'll search for tokens whose value is 1px (direct or alias).
[Uses query-tokens-by-value with value="1px"]
Tokens with value 1px:
- border-width-100 (direct)
- picker-border-width (alias to border-width-100)
调试
查询颜色托肯斯
Human: What blue color tokens are available in Spectrum?
AI: I'll search for blue color tokens in the Spectrum design system.
[Uses query-tokens tool with query="blue" and category="color"]
The Spectrum design system includes several blue color tokens:
- spectrum-blue-100: #e6f3ff
- spectrum-blue-200: #b3d9ff
- spectrum-blue-300: #80bfff
...
验证组件道具
Human: Is this button configuration valid according to Spectrum?
AI: I'll validate those button properties against the Spectrum schema.
[Uses validate-component-props tool with component="action-button"]
The configuration is valid! All required properties are present and the types match the expected schema.
解决问题
安装问题
# Check Node.js version
node --version # Should be 20+
# Clear npm cache if needed
npm cache clean --force
# Verify package installation
npm list -g @adobe/spectrum-design-data-mcp
MCP 连接问题
- 验证 MCP 配置文件路径
- 请检查node.js 路径是否正确
- 确保软件包在全球安装或使用npx
- 配置更改后重新启动您的AI客户端
软件包验证
# Verify package integrity
npm audit signatures
# Check for security vulnerabilities
npm audit
发展
来源建筑
git clone https://github.com/adobe/spectrum-design-data.git
cd spectrum-design-data
pnpm install
cd tools/spectrum-design-data-mcp
测试
pnpm test
项目结构
src/
├── index.js # Main MCP server
├── cli.js # CLI interface
├── tools/ # MCP tool implementations
│ ├── tokens.js # Token-related tools
│ └── schemas.js # Schema-related tools
└── data/ # Data access layer
├── tokens.js # Token data access
└── schemas.js # Schema data access
警卫
供应链安全
- 国家防范机制证明:用npm出处公布的可核查建筑证明
- 安全审计: 定期依赖性安保审计
- * 已验证的软件包:所有依赖性都经过审计和核实
最佳做法
- 总是使用
npm audit signatures - 将软件包更新到最新版本
- 使用
npx -y最安全和最新的处决 - 安保问题报告 GitHub 安全咨询
许可证
Apache-2.0 阿多贝
捐款
这个项目是光谱设计系统的一部分. 请看主线 捐款准则 详细介绍如何捐款.