PlugWiki
design-data-mcp logo

Adobe Spectrum Design Data MCP, Adobe's design token server

Official · by AdobeLocal

Lets your AI assistant look up Adobe Spectrum design tokens, component specs and design guidelines while you build UI.

This is Adobe's server for the Spectrum design system. It lets Claude or Cursor find the right token, read a component's variants and states, and quote the design guidelines. It runs on your machine with the Spectrum data built in, so it needs no keys or setup. Claude Desktop users can also add it as an extension file from the project's releases page.

Good for

  • UI developers who want the correct Spectrum token or component prop
  • Designers checking how a component should look in each state and theme
  • Teams enforcing accessibility rules from the Spectrum guidelines

Works in

12 should work

Tap an app to see how to set it up and any known problems.

Install design-data MCP

Claude Code

  1. 1

    Copy this prompt.

    Add the design-data MCP server to Claude Code. Run this command:
    
    claude mcp add design-data -- npx -y @adobe/design-data-mcp
    
    Then check that it loaded and tell me if I need to sign in or restart.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

Built from the package data we hold. Not yet tested by us.

Tools

  • Gives a session-start overview of the design data

    Returns a summary of token counts, mode sets, components, guidelines and which dataset version is embedded.

    Try: “Give me an overview of the Spectrum design data.”

    Read · design-data-primer

  • Finds tokens with a filter like component=button

    Filters design tokens by a query expression such as component=button or property=color-*.

    Try: “Find all tokens for the button component.”

    Read · design-data-query

  • Suggests tokens from a plain description

    Returns tokens that match a description in plain words, ranked by a similarity score.

    Try: “Which token should I use for a subtle border color?”

    Read · design-data-suggest

  • Shows a component's variants, sizes, states and props

    Returns the full schema of a Spectrum component by its kebab-case ID.

    Try: “What variants and states does the action-button component have?”

    Read · design-data-component

  • Gives a token's final value for a theme setting

    Resolves a token to its concrete value for a given color scheme, scale and contrast.

    Try: “What is the value of the background color token in dark mode?”

    Read · design-data-resolve

  • Lists the Spectrum design guidelines

    Lists available guideline pages, optionally filtered by category.

    Try: “List the guidelines about accessibility.”

    Read · design-data-guideline-list

  • Reads one Spectrum design guideline

    Returns a guideline's purpose, rules, accessibility notes and examples by its ID.

    Try: “Show me the typography guideline.”

    Read · design-data-guideline

Read from the source code

Permissions

low risk · 2 things to watch

Low risk

The assistant can only read Spectrum design data that ships inside the package.

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • The data is a snapshot

    The Spectrum data is built into each package version. Install the latest version to get newer tokens. github.com

  • It checks for a newer dataset

    The overview tool does a best-effort check for a newer Spectrum data version and stays silent if it is offline. Set DESIGN_DATA_SKIP_VERSION_CHECK=1 to turn it off. github.com

Security advisories

No published security advisories as of Nov 1, 2026.

Technical details
Turning on read-onlyNot needed: all seven tools only read the built-in data.
Talks tonpm registry (optional check for a newer Spectrum data version, can be turned off)

Questions

Does it need an API key?

No. The README says it needs no API keys or configuration.

Can it edit my design tokens?

No. This server only reads. Adobe's design-data-agent server is the one that can add, rename and remove tokens in your own files.

How do I install it in Claude Desktop?

Download the design-data extension file from the project's releases page and drag it into Settings, then Extensions. You can also use the manual config from the install box.

How do I get newer tokens?

Run the latest package version. The Spectrum data is baked into each release, and the overview tool shows which dataset version you have.

How is it different from spectrum-design-data-mcp?

That older package is deprecated in favor of this one. Adobe moved the data in-process so there is no separate command-line program to install.

How do I add it to Cursor?

Use the Cursor tab in the install box above.

Information

updated Nov 2, 2026

Publisher
Adobe (official)
Package
@adobe/design-data-mcp
Registry
npm
Transport
stdio
Auth
None
Version
1.8.11
License
Apache-2.0
Last commit
Oct 31, 2026
Open issues
27

GitHubnpm

Other Adobe MCP servers

Sources

Docs, issue trackers and discussions this page is built from. Issues, quotes and findings above link to their own source.

Show all 2
  1. design-data-mcp README · github.com
  2. spectrum-design-data-mcp on npm · npmjs.com

Facts from the official MCP registry, GitHub, npm, PyPI and the Docker catalog. Updated Nov 2, 2026.