Agent skill

Design Data Agent

by adobe in adobe/spectrum-design-data

Validate, query, resolve, diff, and author spec-conformant design tokens and components using the design-data MCP tools against a local dataset.

Apache-2.0Auto-check passedFrontend & Design

Install Design Data Agent

skills CLI
$ npx skills add adobe/spectrum-design-data --skill design-data-agent -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install adobe/spectrum-design-data design-data-agent --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/adobe/spectrum-design-data.git skills-src && mkdir -p .claude/skills && cp -r skills-src/tools/design-data-agent-mcp/skills/design-data .claude/skills/design-data-agent && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
design-data-agent
GitHub stars
155
Token cost
~2k tokens
SKILL.md length
671 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
Apache-2.0

At a glance

Validate, query, resolve, diff, and author spec-conformant design tokens and components using the design-data MCP tools against a local dataset.

  • Works in 6 steps: start_authoring_session — start a… → authoring_session_step_intent — provide… → authoring_session_step_classification —… → …
  • The user asks about design tokens
  • SKILL.md covers Bootstrap, Session start — call primer…, Token lookup and Component info —…, plus 6 more sections
  • Calls npx; reaches spectrum.adobe.com

What it does

Design Data Agent is an agent skill from adobe/spectrum-design-data. Validate, query, resolve, diff, and author spec-conformant design tokens and components using the design-data MCP tools against a local dataset. Use when the user asks about design tokens, a design system, token lookup, spec-conformance, drift detection, or token authoring on custom data.

Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design tokens, Design systems and GitOps. It works with Model Context Protocol. The repository describes itself as: Design data, including design tokens, component schemas, and tooling for Spectrum, Adobe's design system. The licence is Apache-2.0.

When your agent uses it

  • The user asks about design tokens
  • A design system
  • Spec-conformance
  • Drift detection

Example prompts

  • “/design-data-agent”

Requirements

  • Node.js
  • Pre-approved tools (allowed-tools): mcp__design-data-agent__primer, mcp__design-data-agent__query_tokens, mcp__design-data-agent__suggest_token, mcp__design-data-agent__resolve_token, mcp__design-data-agent__describe_component, mcp__design-data-agent__validate_usage, mcp__design-data-agent__diff_datasets, mcp__design-data-agent__write, mcp__design-data-agent__start_authoring_session, mcp__design-data-agent__authoring_session_step_intent, mcp__design-data-agent__authoring_session_step_classification, mcp__design-data-agent__authoring_session_step_values, mcp__design-data-agent__authoring_session_commit, mcp__design-data-agent__authoring_session_cancel, mcp__design-data-agent__authoring_session_get, mcp__design-data-agent__authoring_session_list

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. start_authoring_session — start a session (returns session_id)
  2. authoring_session_step_intent — provide natural-language intent; get token suggestions
  3. authoring_session_step_classification — set layer, property, name fields
  4. authoring_session_step_values — set mode-specific value rows
  5. authoring_session_commit — validate and write the token to disk
  6. authoring_session_cancel — cancel without writing

What it can do on your machine

Read from SKILL.md and the folder at commit dc75d47. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • mcp__design-data-agent__primer
    • mcp__design-data-agent__query_tokens
    • mcp__design-data-agent__suggest_token
    • mcp__design-data-agent__resolve_token
    • mcp__design-data-agent__describe_component
    • mcp__design-data-agent__validate_usage
    • mcp__design-data-agent__diff_datasets
    • mcp__design-data-agent__write
    • mcp__design-data-agent__start_authoring_session
    • mcp__design-data-agent__authoring_session_step_intent

    …and 6 more on the same allowed-tools line.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • spectrum.adobe.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Design Data Agent loads about 2k tokens when it runs. Until then it costs about 77 tokens; SKILL.md has 671 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~77
When it runs · the whole SKILL.md, loaded when a task matches
~2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from adobe/spectrum-design-data at commit dc75d47, republished under its Apache-2.0 licence (© adobe). 671 words, ~1,954 tokens.

Download SKILL.mdSave it as .claude/skills/design-data-agent/SKILL.md (or your agent's skills folder).
name
design-data-agent
description
Validate, query, resolve, diff, and author spec-conformant design tokens and components using the design-data MCP tools against a local dataset. Use when the user asks about design tokens, a design system, token lookup, spec-conformance, drift detection, or token authoring on custom data.
allowed-tools
mcp__design-data-agent__primer, mcp__design-data-agent__query_tokens, mcp__design-data-agent__suggest_token, mcp__design-data-agent__resolve_token, mcp__design-data-agent__describe_component, mcp__design-data-agent__validate_usage, mcp__design-data-agent__diff_datasets, mcp__design-data-agent__write, mcp__design-data-agent__start_authoring_session, mcp__design-data-agent__authoring_session_step_intent, mcp__design-data-agent__authoring_session_step_classification, mcp__design-data-agent__authoring_session_step_values, mcp__design-data-agent__authoring_session_commit, mcp__design-data-agent__authoring_session_cancel, mcp__design-data-agent__authoring_session_get, mcp__design-data-agent__authoring_session_list
metadata.author
adobe
metadata.version
1.14.2
when_to_use
Trigger on: design system, design tokens, spec-conformant, drift, validate tokens, token authoring, custom dataset, DESIGN_DATA_PATH, design-data validate…

design-data agent skill

@adobe/design-data-agent-mcp provides in-process wasm tools for validating, querying, resolving, diffing, and authoring spec-conformant tokens and components from any dataset on the local filesystem.

Set two path variables once and reference them throughout:

bash
export DESIGN_DATA_PATH=./packages/design-data/tokens
export DESIGN_DATA_SPEC_PATH=./packages/design-data

For Spectrum tokens with zero setup (embedded snapshot), use the design-data skill instead — this skill targets custom or repo-local datasets.

Bootstrap

Add @adobe/design-data-agent-mcp to your .cursor/mcp.json:

json
{
  "mcpServers": {
    "design-data-agent": {
      "command": "npx",
      "args": ["-y", "@adobe/design-data-agent-mcp@latest"],
      "env": {
        "DESIGN_DATA_PATH": "./packages/tokens/src",
        "DESIGN_DATA_COMPONENTS": "./packages/design-data/components",
        "DESIGN_DATA_FIELDS": "./packages/design-data/fields"
      }
    }
  }
}

Adjust paths to match your dataset layout. Pin @latest — the embedded Spectrum snapshot is baked into the wasm at build time and travels with the package version, so there's no separate data update to run, but plain npx -y <pkg> (no tag) can reuse a cached older build.


Session start — call primer first

Call primer at the start of every session that touches design data. It returns the active dimensions, component list, taxonomy fields, and token count — structural context that scopes all subsequent lookups. No inputs required.


Token lookup

Resolve a token to its literal value — resolve_token

Required: property (string) — the bare name.property segment, e.g. "background-color" or "corner-radius" (see primer().properties for the full list). Not a flattened legacyKey like "accent-background-color-default" — that form never resolves. Optional context: colorScheme ("light" or "dark"), scale ("desktop" or "mobile"), contrast ("regular" or "high"). Optional narrowing: component, variant, state, and colorRole. Set excludeDeprecated to omit tokens with lifecycle.deprecatedIn.

Gotcha: when several tokens share a property, use variant, state, or colorRole to narrow the match, then check ambiguous and deprecated on the result. component is sparsely populated in the current dataset, so prefer the other fields when available. resolve_token still uses cascade ranking when multiple candidates remain; use query_tokens to inspect the full candidate set.

Query tokens by filter expression — query_tokens

Required: filter (string)

Valid filter keys: property, component, variant, state, colorScheme, scale, contrast, uuid, $schema.

Filter syntax examples:

property=background-color
property=*background*
property=background-color|property=border-color
$schema=https://spectrum.adobe.com/page/design-token/

Gotcha: component=<id> currently always returns [] — tokens aren't component-indexed in this dataset. Use describe_component to see a component's known token bindings instead.

Exit codes: 0 = matches found; empty array = no matches (not an error).

Suggest a token from a description — suggest_token

Required: intent (string) — a natural-language description of the design need, such as "primary CTA button background color".

Optional: limit (number, default 5) — the maximum number of suggestions to return. Results are ranked by confidence using token names, name-object fields, and description text. Use this when the user describes what they need rather than knowing a token name.


Component info — describe_component

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

Returns the component contract: name, displayName, options, anatomy, states, and tokenBindings.


Show full SKILL.md (258 more words)Show less

Validation — validate_usage

Optional inputs:

  • path — dataset path (defaults to DESIGN_DATA_PATH)
  • strict (boolean) — treat warnings as errors
  • schema_path — override schemas directory (defaults to @adobe/spectrum-tokens schemas)

Runs Layer-1 JSON-Schema structural validation and Layer-2 relational rules. Returns { valid, errors, warnings }.

Note: --exceptions-path (SPEC-007 naming allowlist) is not supported in the in-process path. Use the design-data CLI directly if you need exceptions support.


Dataset diff — diff_datasets

Required: oldPath, newPath Optional: filter (substring to narrow results by token name)

Returns { renamed, deprecated, reverted, added, deleted, updated }.


Product-layer authoring — write

Write or update the product context document in the dataset.

Optional inputs: output (defaults to $DESIGN_DATA_PATH/product-context.json), rationale (string)


Token authoring session

Use the following tools in sequence to create a new token through the wizard:

  1. start_authoring_session — start a session (returns session_id)
  2. authoring_session_step_intent — provide natural-language intent; get token suggestions
  3. authoring_session_step_classification — set layer, property, name fields
  4. authoring_session_step_values — set mode-specific value rows
  5. authoring_session_commit — validate and write the token to disk
  6. authoring_session_cancel — cancel without writing

Helper tools: authoring_session_get (inspect state), authoring_session_list (all active sessions).

authoring_session_commit accepts an optional schema_path to override the schemas directory for Layer-1 JSON-Schema validation before writing.

Note: The standalone suggest_token tool calls the wasm suggest API directly. authoring_session_step_intent still delegates to the design-data CLI for session-state-aware ranking within an authoring flow.


Gotchas

  • Scale values: desktop and mobile — not medium/large.
  • Contrast values: regular and high — not standard/high.
  • query_tokens returns [] when no tokens match — not an error.
  • diff_datasets filter matches by token name substring (case-insensitive).

When working in Cursor

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

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

© adobe, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in tools/design-data-agent-mcp/skills/design-data of adobe/spectrum-design-data.

Open the folder on GitHubat commit dc75d47

Compare with similar skills

Design Data Agent next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Design Data Agent compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Design Data Agent this skilladobe/spectrum-design-data155—~2kAutomated safety check: PassApache-2.0
Figma use_figma Plugin API Ruleswarpdotdev/warp65k4 repos~4.4kAutomated safety check: PassAGPL-3.0
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Figma Screen Generatorwarpdotdev/warp65k2 repos~5kAutomated safety check: PassAGPL-3.0
Extract Design Systemarvindrk/extract-design-system2341 repos~514Automated safety check: PassMIT
Website Design Taste Extractorsenlindesign/taste-skill381—~5.3kAutomated safety check: PassNone

Similar skills

  • Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed
  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed
  • Figma Screen Generator

    warpdotdev/warp

    Builds or updates full Figma screens from code or a description by reusing the file's published design system components, variables and styles.

    65k GitHub starsUsed in 2 repos~5k tokens
    Frontend & DesignAuto-check passed
  • Extract Design System

    arvindrk/extract-design-system

    Extract design primitives from a public website and generate starter token files for your project.

    234 GitHub starsUsed in 1 repo~514 tokens
    Frontend & DesignAuto-check passed
  • Website Design Taste Extractor

    senlindesign/taste-skill

    Reverse-engineers a website's design from its URL into a Markdown and JSON pair holding concrete tokens and the trade-offs behind the look.

    381 GitHub stars~5.3k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed
  • Fast Agent Design

    evalstate/fast-agent

    A skill your agent uses to generate well-branded interfaces and assets for fast-agent, either for production or throwaway prototypes/mocks/etc.

    3.9k GitHub stars~220 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

More from adobe/spectrum-design-data

  • S2 Docs

    adobe/spectrum-design-data

    Look up Spectrum 2 (S2) component documentation, design guidelines, and usage patterns when building with React Spectrum or Spectrum Web Components.

    155 GitHub stars~868 tokensUpdated 4 days ago
    Auto-check passed
  • Design Data

    adobe/spectrum-design-data

    Look up Spectrum design tokens, component schemas, and design-system decisions when building with or extending Adobe Spectrum.

    155 GitHub stars~1.2k tokensUpdated 4 days ago
    Auto-check passed
  • Enhance Sync PR

    adobe/spectrum-design-data

    Enhances auto-generated spectrum-design-data PRs from spectrum-tokens-studio-data sync (branch tokens-sync/patch-spectrum2-from-main, author mrcjhicks).

    155 GitHub stars~2.3k tokensUpdated 4 days ago
    Auto-check passed
  • Docs Voice Tone

    adobe/spectrum-design-data

    Reviews docs-site prose (articles, spec pages, READMEs) against Spectrum's voice principles (Clear, Genuine, Concise, Upfront), adapted for public/reference docs rather than in-product UI strings.

    155 GitHub stars~1.1k tokensUpdated 4 days ago
    Auto-check passed

Questions about Design Data Agent

What does Design Data Agent do?

Validate, query, resolve, diff, and author spec-conformant design tokens and components using the design-data MCP tools against a local dataset. Design Data Agent is an agent skill from adobe/spectrum-design-data. Validate, query, resolve, diff, and author spec-conformant design tokens and components using the design-data MCP tools against a local dataset.

When should I use Design Data Agent?

Design Data Agent fits situations like: the user asks about design tokens; A design system; spec-conformance; drift detection.

How do I install Design Data Agent in Claude Code?

Run `npx skills add adobe/spectrum-design-data --skill design-data-agent -a claude-code`. Or copy the skill folder (tools/design-data-agent-mcp/skills/design-data in adobe/spectrum-design-data) into .claude/skills/design-data-agent in your project. Claude Code loads it when a task matches its description.

How do I install Design Data Agent in Codex?

Run `npx skills add adobe/spectrum-design-data --skill design-data-agent -a codex`. Or copy the skill folder (tools/design-data-agent-mcp/skills/design-data in adobe/spectrum-design-data) into .agents/skills/design-data-agent in your project. Codex loads it when a task matches its description.

Can I use Design Data Agent in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add adobe/spectrum-design-data --skill design-data-agent -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-data-agent, .gemini/skills/design-data-agent, .github/skills/design-data-agent and .opencode/skills/design-data-agent in your project.

What does Design Data Agent need to run?

Going by SKILL.md and its folder, Design Data Agent needs the command-line tools its instructions call (npx). Our summary lists: Node.js. Its frontmatter pre-approves these tools: mcp__design-data-agent__primer, mcp__design-data-agent__query_tokens, mcp__design-data-agent__suggest_token, mcp__design-data-agent__resolve_token, mcp__design-data-agent__describe_component, mcp__design-data-agent__validate_usage, mcp__design-data-agent__diff_datasets, mcp__design-data-agent__write, mcp__design-data-agent__start_authoring_session, mcp__design-data-agent__authoring_session_step_intent, mcp__design-data-agent__authoring_session_step_classification, mcp__design-data-agent__authoring_session_step_values, mcp__design-data-agent__authoring_session_commit, mcp__design-data-agent__authoring_session_cancel, mcp__design-data-agent__authoring_session_get, mcp__design-data-agent__authoring_session_list.

Does Design Data Agent access the network?

SKILL.md names 1 domain. In commands or code: spectrum.adobe.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Design Data Agent safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Design Data Agent use?

Design Data Agent is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Design Data Agent use?

About 2k tokens (SKILL.md is roughly 7.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Design Data Agent?

Skills that share tags, products or a category with Design Data Agent: Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars), MCP Development (coollabsio/coolify, 63k stars), Figma Screen Generator (warpdotdev/warp, 65k stars) and Extract Design System (arvindrk/extract-design-system, 234 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Design Data Agent?

adobe (a GitHub organization) maintains it in adobe/spectrum-design-data, which has 155 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 2, 2026.

Source: adobe/spectrum-design-data on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.