
Adobe Spectrum Design Data MCP, Adobe's design token server
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.
Supports local MCP servers.
Supports local MCP servers.
Supports local MCP servers.
Supports local MCP servers.
Supports local MCP servers.
Supports local MCP servers.
Supports local MCP servers.
Supports local MCP servers.
Supports local MCP servers.
Supports local MCP servers.
Supports local MCP servers.
Supports local MCP servers.
Client does not support this transport.
Client does not support this transport.
Install design-data MCP
Claude Code
- 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
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-primerFinds 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-querySuggests 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-suggestShows 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-componentGives 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-resolveLists the Spectrum design guidelines
Lists available guideline pages, optionally filtered by category.
Try: “List the guidelines about accessibility.”
Read ·
design-data-guideline-listReads 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-only | Not needed: all seven tools only read the built-in data. |
|---|---|
| Talks to | npm 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
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 2Hide
- design-data-mcp README · github.com
- spectrum-design-data-mcp on npm · npmjs.com