SuperAPI AI 工具集

design-data

设计与创作

查看项目

更新于 10-15 10:05

技能介绍

Spectrum Design Data 用于在使用或扩展 Adobe Spectrum 时查询设计令牌、组件 schema 与设计系统结构。它通过 @adobe/design-data-mcp MCP 服务器提供能力,该服务器采用进程内 wasm,无需 CLI 二进制文件。

用途

当用户询问 Spectrum 设计令牌、组件 schema 或设计系统决策时,可使用本技能进行查询。它面向需要了解 Spectrum 设计系统数据结构的开发与设计场景。

主要能力

服务器提供以下工具:

design-data-primer:获取内嵌 Spectrum 数据集的结构概览,包括令牌数量、可用 mode-set(color-scheme、scale、contrast)、组件列表、分类字段与数据来源。无必填输入。建议在设计令牌会话开始时调用。

design-data-query:按查询表达式过滤 Spectrum 令牌,返回匹配的令牌对象数组。必填输入为 filter(字符串)。表达式语法示例:"component=button" 表示所有 button 令牌;"component=button,state=hover" 表示 button hover 令牌;"property=color-*" 表示所有 color 属性令牌;"colorScheme=dark" 表示 dark-scheme 令牌。无匹配时返回空数组。

design-data-suggest:使用关键词重叠评分,按自然语言意图推荐匹配的 Spectrum 令牌,返回按置信度排序的匹配结果。必填输入为 intent(字符串),例如 "primary CTA button background color";可选输入为 limit(数字,默认 5)。

design-data-component:按 ID 获取 Spectrum 组件的完整声明,返回组件的 displayName、description 以及所有可用选项(变体、尺寸、状态、布尔属性等)。必填输入为 id(字符串),采用 kebab-case 组件 ID,例如 button、action-button。建议先调用 design-data-primer 查看可用组件 ID。

design-data-resolve:在给定 mode-set 上下文中解析 Spectrum 令牌属性的具体值,返回胜出的令牌及其解析值。必填输入为 property(字符串),即令牌属性名,例如 background-color-default;可选输入包括 colorScheme("light" 或 "dark")、scale("desktop" 或 "mobile")、contrast("regular" 或 "high")。

使用方式

引导配置:将 @adobe/design-data-mcp 添加到项目的 .cursor/mcp.json(或等效的 MCP 配置)以激活工具:

{ "mcpServers": { "design-data": { "command": "npx", "args": ["-y", "@adobe/design-data-mcp"] } } }

服务器使用内嵌 Spectrum 快照,读取操作无需环境变量或数据集路径配置。

推荐工作流:先调用 design-data-primer 了解可用数据;当已知组件/属性/状态时使用 design-data-query;当用户用自然语言描述意图时使用 design-data-suggest;使用 design-data-component 查看特定组件的所有可用选项;使用 design-data-resolve 获取令牌在给定上下文中的具体值。

在 Cursor 中使用:可将本技能安装为 Remote Rule(GitHub),与 s2-docs 技能模式相同。路径为 Cursor Settings → Rules → Add Rule → Remote Rule (GitHub),粘贴:https://github.com/adobe/spectrum-design-data/tree/main/tools/design-data-skill/skills/design-data 。若需始终可用的工具访问(上下文成本更高),可按上述引导配置将 MCP 服务器添加到 .cursor/mcp.json。

使用自定义数据集:如需指向特定 Spectrum 版本或自定义 design-data fork,可在项目根目录添加 .design-data.toml:

[source] type = "github" repo = "adobe/spectrum-design-data" tag = "@adobe/spectrum-tokens@14.11.0"

若无配置文件,则自动使用内嵌 Spectrum 快照。

适用场景

适用于在使用或扩展 Adobe Spectrum 时查找设计令牌、组件 schema 和设计系统决策;适合需要按组件、属性、状态过滤令牌,或按自然语言意图推荐令牌,以及解析特定 mode-set 下令牌具体值的场景。

限制

对于需要 validate/diff/write 的自定义数据集,应改用 design-data-agent 技能或 @adobe/design-data-agent-mcp,参见 tools/design-data-agent-mcp/skills/design-data/SKILL.md。本技能资料未提供收费、价格、平台支持范围或效果方面的信息。