design-data

Spectrum Design Data

Access Spectrum design tokens, component schemas, and design-system structure via the @adobe/design-data-mcp MCP server (in-process wasm — no CLI binary required).

Bootstrap

Add @adobe/design-data-mcp to your project's .cursor/mcp.json (or equivalent MCP config) to activate the tools:

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

The server uses an embedded Spectrum snapshot — no environment variables or dataset path configuration required for read operations.

Tools

design-data-primer

Get a structural overview of the embedded Spectrum dataset: token count, available mode-sets (color-scheme, scale, contrast), component list, taxonomy fields, and data provenance. Call this at the start of a design-token session.

No required inputs.

design-data-query

Filter Spectrum tokens by a query expression. Returns an array of matching token objects.

Required input: filter (string)

Expression syntax examples:

• "component=button" — all button tokens
• "component=button,state=hover" — button hover tokens
• "property=color-*" — all color property tokens
• "colorScheme=dark" — dark-scheme tokens

Returns an empty array when no tokens match.

design-data-suggest

Suggest Spectrum tokens matching a natural-language intent using keyword-overlap scoring. Returns matches ranked by confidence.

Required input: intent (string) — e.g. "primary CTA button background color" Optional input: limit (number, default 5)

design-data-component

Get the full component declaration for a Spectrum component by ID. Returns the component's displayName, description, and all available options (variants, sizes, states, boolean props, etc.).

Required input: id (string) — kebab-case component ID, e.g. button, action-button

Call design-data-primer first to see available component IDs.

design-data-resolve

Resolve the concrete value of a Spectrum token property for a given mode-set context. Returns the winning token with its resolved value.

Required input: property (string) — token property name, e.g. background-color-default Optional inputs: colorScheme ("light" or "dark"), scale ("desktop" or "mobile"), contrast ("regular" or "high")

Workflow

1. Start with design-data-primer to understand what data is available.
2. Use design-data-query when you know the component/property/state.
3. Use design-data-suggest when the user describes an intent in natural language.
4. Use design-data-component to check all available options for a specific component.
5. Use design-data-resolve to get the concrete value for a token in a given context.

When working in Cursor

Install this skill as a Remote Rule (GitHub) — same pattern as the s2-docs skill:

Cursor Settings → Rules → Add Rule → Remote Rule (GitHub) → paste:

https://github.com/adobe/spectrum-design-data/tree/main/tools/design-data-skill/skills/design-data

For always-available tool access (higher context cost), add the MCP server to .cursor/mcp.json as shown in the Bootstrap section above.

For custom datasets with validate/diff/write, use the design-data-agent skill or @adobe/design-data-agent-mcp instead — see tools/design-data-agent-mcp/skills/design-data/SKILL.md.

Using a custom dataset

To point at a specific Spectrum version or a custom design-data fork, add a .design-data.toml to your project root:

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

Without a config file, the embedded Spectrum snapshot is used automatically.