Figma use_figma Plugin API Rules
warpdotdev/warp
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.
Validate, query, resolve, diff, and author spec-conformant design tokens and components using the design-data MCP tools against a local dataset.
$ npx skills add adobe/spectrum-design-data --skill design-data-agent -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install adobe/spectrum-design-data design-data-agent --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "design-data-agent" agent skill from https://github.com/adobe/spectrum-design-data/tree/main/tools/design-data-agent-mcp/skills/design-data into .claude/skills/design-data-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-data-agent", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/adobe/spectrum-design-data/tree/main/tools/design-data-agent-mcp/skills/design-dataType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add adobe/spectrum-design-data --skill design-data-agent -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install adobe/spectrum-design-data design-data-agent --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/adobe/spectrum-design-data.git skills-src && mkdir -p .agents/skills && cp -r skills-src/tools/design-data-agent-mcp/skills/design-data .agents/skills/design-data-agent && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-data-agent" agent skill from https://github.com/adobe/spectrum-design-data/tree/main/tools/design-data-agent-mcp/skills/design-data into .agents/skills/design-data-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-data-agent", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add adobe/spectrum-design-data --skill design-data-agent -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install adobe/spectrum-design-data design-data-agent --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/adobe/spectrum-design-data.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/tools/design-data-agent-mcp/skills/design-data .cursor/skills/design-data-agent && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-data-agent" agent skill from https://github.com/adobe/spectrum-design-data/tree/main/tools/design-data-agent-mcp/skills/design-data into .cursor/skills/design-data-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-data-agent", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/adobe/spectrum-design-data.git --path tools/design-data-agent-mcp/skills/design-data--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add adobe/spectrum-design-data --skill design-data-agent -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install adobe/spectrum-design-data design-data-agent --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/adobe/spectrum-design-data.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/tools/design-data-agent-mcp/skills/design-data .gemini/skills/design-data-agent && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-data-agent" agent skill from https://github.com/adobe/spectrum-design-data/tree/main/tools/design-data-agent-mcp/skills/design-data into .gemini/skills/design-data-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-data-agent", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install adobe/spectrum-design-data design-data-agentInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add adobe/spectrum-design-data --skill design-data-agent -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/adobe/spectrum-design-data.git skills-src && mkdir -p .github/skills && cp -r skills-src/tools/design-data-agent-mcp/skills/design-data .github/skills/design-data-agent && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-data-agent" agent skill from https://github.com/adobe/spectrum-design-data/tree/main/tools/design-data-agent-mcp/skills/design-data into .github/skills/design-data-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-data-agent", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add adobe/spectrum-design-data --skill design-data-agent -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install adobe/spectrum-design-data design-data-agent --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/adobe/spectrum-design-data.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/tools/design-data-agent-mcp/skills/design-data .opencode/skills/design-data-agent && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-data-agent" agent skill from https://github.com/adobe/spectrum-design-data/tree/main/tools/design-data-agent-mcp/skills/design-data into .opencode/skills/design-data-agent/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-data-agent", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
design-data-agentValidate, 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. 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.
6 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit dc75d47. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
mcp__design-data-agent__primermcp__design-data-agent__query_tokensmcp__design-data-agent__suggest_tokenmcp__design-data-agent__resolve_tokenmcp__design-data-agent__describe_componentmcp__design-data-agent__validate_usagemcp__design-data-agent__diff_datasetsmcp__design-data-agent__writemcp__design-data-agent__start_authoring_sessionmcp__design-data-agent__authoring_session_step_intent…and 6 more on the same allowed-tools line.
From allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
npxFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
spectrum.adobe.comFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from adobe/spectrum-design-data at commit dc75d47, republished under its Apache-2.0 licence (© adobe). 671 words, ~1,954 tokens.
.claude/skills/design-data-agent/SKILL.md (or your agent's skills folder).@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:
export DESIGN_DATA_PATH=./packages/design-data/tokens
export DESIGN_DATA_SPEC_PATH=./packages/design-dataFor Spectrum tokens with zero setup (embedded snapshot), use the design-data skill instead — this skill targets custom or repo-local datasets.
Add @adobe/design-data-agent-mcp to your .cursor/mcp.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.
primer firstCall 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.
resolve_tokenRequired: 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, orcolorRoleto narrow the match, then checkambiguousanddeprecatedon the result.componentis sparsely populated in the current dataset, so prefer the other fields when available.resolve_tokenstill uses cascade ranking when multiple candidates remain; usequery_tokensto inspect the full candidate set.
query_tokensRequired: 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. Usedescribe_componentto see a component's known token bindings instead.
Exit codes:
0= matches found; empty array = no matches (not an error).
suggest_tokenRequired: 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.
describe_componentRequired: id (string) — kebab-case component ID, e.g. button, action-button
Returns the component contract: name, displayName, options, anatomy, states,
and tokenBindings.
validate_usageOptional inputs:
path — dataset path (defaults to DESIGN_DATA_PATH)strict (boolean) — treat warnings as errorsschema_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 thedesign-dataCLI directly if you need exceptions support.
diff_datasetsRequired: oldPath, newPath
Optional: filter (substring to narrow results by token name)
Returns { renamed, deprecated, reverted, added, deleted, updated }.
writeWrite or update the product context document in the dataset.
Optional inputs: output (defaults to $DESIGN_DATA_PATH/product-context.json),
rationale (string)
Use the following tools in sequence to create a new token through the wizard:
start_authoring_session — start a session (returns session_id)authoring_session_step_intent — provide natural-language intent; get token suggestionsauthoring_session_step_classification — set layer, property, name fieldsauthoring_session_step_values — set mode-specific value rowsauthoring_session_commit — validate and write the token to diskauthoring_session_cancel — cancel without writingHelper 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_tokentool calls the wasmsuggestAPI directly.authoring_session_step_intentstill delegates to thedesign-dataCLI for session-state-aware ranking within an authoring flow.
desktop and mobile — not medium/large.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).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
Just SKILL.md in tools/design-data-agent-mcp/skills/design-data of adobe/spectrum-design-data.
Open the folder on GitHubat commit dc75d47
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design Data Agent this skilladobe/spectrum-design-data | 155 | — | ~2k | Automated safety check: Pass | Apache-2.0 | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| MCP Developmentcoollabsio/coolify | 63k | 1 repos | ~949 | Automated safety check: Pass | MIT | |
| Figma Screen Generatorwarpdotdev/warp | 65k | 2 repos | ~5k | Automated safety check: Pass | AGPL-3.0 | |
| Extract Design Systemarvindrk/extract-design-system | 234 | 1 repos | ~514 | Automated safety check: Pass | MIT | |
| Website Design Taste Extractorsenlindesign/taste-skill | 381 | — | ~5.3k | Automated safety check: Pass | None |
warpdotdev/warp
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.
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
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.
arvindrk/extract-design-system
Extract design primitives from a public website and generate starter token files for your project.
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.
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.
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.
adobe/spectrum-design-data
Look up Spectrum design tokens, component schemas, and design-system decisions when building with or extending Adobe Spectrum.
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).
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.
Works with
Categories
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.
Design Data Agent fits situations like: the user asks about design tokens; A design system; spec-conformance; drift detection.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.