adobe/spectrum-design-data
adobe/spectrum-design-data · 3 plugins
Marketplace Design data, including design tokens, component schemas, and tooling for Spectrum, Adobe's design system.
Install
The repo has no one-line install. Follow its README.
Plugins 3
After adding the marketplace, install one with /plugin install <name>@spectrum-design-data.
- 1s2-docsSkill: Spectrum 2 component documentation on-demand. Fetches S2 design guidelines, component options, and usage patterns without loading a persistent MCP server.
/plugin install s2-docs@spectrum-design-data - 2design-dataSkill: Spectrum design tokens and component schemas, zero config. Uses the embedded Spectrum snapshot via the design-data CLI.
/plugin install design-data@spectrum-design-data - 3design-data-agentSkill: spec-conformant design token lookup, validation, diff, and authoring for any custom dataset via the design-data CLI.
/plugin install design-data-agent@spectrum-design-data
Files
Note: for Spectrum 2 token data has been graduated to the main branch. If you need access to the S1 data, use the s1-legacy branch and v12.x.x packages on NPM.
The Spectrum token visualizer shows the token data for S1. For Spectrum 2 data, use opensource.adobe.com/spectrum-design-data/s2-visualizer/.
Spectrum Tokens Monorepo
This repo uses:
- pnpm for package management
- moon to manage task running
- Changesets for automated versioning and releasing
- Prettier for code formatting/linting
- commitlint and Convetional Commits to standardize commit messages
- husky to automate formatting of committed files and linting of commit messages
Packages in this monorepo:
Core Packages
- Spectrum Tokens design tokens for Spectrum, Adobe's design system.
- Spectrum Component Schemas JSON schemas for validating Spectrum component APIs and properties.
Design Data
- Spectrum Design Data the canonical Spectrum dataset — tokens, components, fields, mode-sets, guidelines, and registry data. This is the primary data package consumed by the SDK and tooling.
- Design Data Specification normative spec artifacts: human-readable spec (
spec/), JSON Schemas, validation rule catalog (rules/rules.yaml), and conformance fixtures. - Token Names sidecar taxonomy
nameobjects for@adobe/spectrum-tokens, decoupled so taxonomy changes don't bump the token package. Private; delivery format TBD. - Design System Registry (deprecated — registry data has moved to
packages/design-data/registry/. Use@adobe/spectrum-design-datainstead.)
Documentation & Visualization
- Spectrum Token Visualizer Tool a visualizer for inspecting S1 tokens. Published as a static site.
- Spectrum Token Visualizer Tool S2 a version of the visualizer that shows the Spectrum 2 data. Published as a static site.
- Spectrum S2 Tokens Viewer an enhanced token viewer with component usage analysis for Spectrum 2 tokens.
- Spectrum Tokens Docs a static site to show the component options API and other token data.
- Release Timeline Visualization interactive charts showing release frequency and development activity patterns. Published as a static site.
- Spectrum 2 Documentation comprehensive component guides and design principles from s2.spectrum.corp.adobe.com.
Development Tools
- Component Options Editor Figma plugin for authoring and editing Spectrum component option schemas with visual UI and JSON validation.
- Spectrum Token Diff Generator a library and cli tool that reports changes made between two schema/releases/branches.
- Optimized Diff Engine high-performance diff algorithm for large token datasets.
- Release Analyzer tool for analyzing release history and generating data for change frequency visualization.
- Token Changeset Generator automates creation of changeset files from token diff analysis.
- Transform Tokens JSON utilities for merging and transforming token data between formats.
- Token Manifest Builder generates manifest files for token distribution.
- Spectrum Design Data MCP Model Context Protocol server providing AI assistants with structured access to Spectrum design system data.
- Design Data Agent MCP agent-facing MCP server (distinct from the general MCP above) for AI agent authoring sessions.
- Design Data Skill packaged Claude Code agent skill for consuming Spectrum design data from agent sessions.
- S2 Docs MCP MCP server providing AI assistants with access to Spectrum 2 component documentation and design guidelines.
SDK & TUI
- design-data unified CLI and interactive TUI — validate, resolve, diff, query, and migrate tokens from the command line; run bare (
design-data) to launch the interactive TUI (command palette, cascade resolver, validator, four-screen authoring wizard). The TUI library lives in sdk/tui/.
Setup monorepo locally
- Install pnpm using this guide.
- Install dependencies
pnpm i
Build all packages locally
Run build script
pnpm moon run :buildRun all tests locally
pnpm moon run :test{
"name": "spectrum-design-data",
"description": "Adobe Spectrum design tokens, component schemas, and Spectrum 2 docs for Claude Code.",
"owner": {
"name": "Adobe",
"email": "garthdb@adobe.com"
},
"plugins": [
{
"name": "s2-docs",
"description": "Skill: Spectrum 2 component documentation on-demand. Fetches S2 design guidelines, component options, and usage patterns without loading a persistent MCP server.",
"source": "./tools/s2-docs-mcp"
},
{
"name": "design-data",
"description": "Skill: Spectrum design tokens and component schemas, zero config. Uses the embedded Spectrum snapshot via the design-data CLI.",
"source": "./tools/design-data-skill"
},
{
"name": "design-data-agent",
"description": "Skill: spec-conformant design token lookup, validation, diff, and authoring for any custom dataset via the design-data CLI.",
"source": "./tools/design-data-agent-mcp"
}
]
}Facts
- Kind
- Marketplace
- Repo
- adobe/spectrum-design-data
- Group
- Uncategorized
- Marketplace name
- spectrum-design-data
- Owner
- Adobe
- License
- Apache-2.0
- Language
- Rust
- Created
- 2022-03-08
- Forks
- 36
- Topics
- design-system, design-tokens
- Plugins
- 3
- 1f/prompts.chatf/prompts.chatf.k.a. Awesome ChatGPT Prompts. Share, discover, and collect prompts from the community. Free and open source — self-host for your organization with complete privacy.
- 2affaan-m/everything-claude-codeaffaan-m/everything-claude-codeThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
- 3obra/superpowersobra/superpowersAn agentic skills framework & software development methodology that works.
- 4anthropics/skillsanthropics/skillsPublic repository for Agent Skills
- 5anthropics/claude-codeanthropics/claude-codeClaude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster by executing routine tasks, explaining complex code, and handling git workflows - all through natural language commands.
- 6nextlevelbuilder/ui-ux-pro-max-skillnextlevelbuilder/ui-ux-pro-max-skillAn AI skill that provides design intelligence for building professional UI/UX across multiple platforms.