Skip to main content

Design System MCP Server

Package: ainative-design-system-mcp-server
npm: npm install -g ainative-design-system-mcp-server
Tools: 3 (extractDesignTokens, analyzeComponentLibrary, generateTheme)

Gives AI agents direct access to your design system — extract tokens from CSS/SCSS, scan component libraries, and generate theme configurations for Tailwind, Material-UI, Chakra, and Styled Components.

Quick Start​

Claude Code​

claude mcp add ainative-design-system -- ainative-design-system-mcp

Manual Config​

{
  "mcpServers": {
    "ainative-design-system": {
      "command": "ainative-design-system-mcp",
      "args": []
    }
  }
}

No API key required — the server reads your local files.

Tools​

extractDesignTokens​

Scans CSS, SCSS, Less, or Stylus files and extracts design tokens.

What it extracts:

  • CSS variables and custom properties
  • Color palettes (with hex, RGB, HSL analysis)
  • Typography scales (font families, sizes, weights, line heights)
  • Spacing systems (margins, paddings, gaps)
  • Breakpoints and grid definitions
  • Shadow and border-radius tokens

Example prompt:

"Extract all design tokens from my src/styles/ directory and generate a JSON token file"

Output formats: JSON, YAML, JavaScript (ES module)

analyzeComponentLibrary​

Scans your component directory and produces a style and prop inventory.

What it analyzes:

  • Component files across React, Vue, Svelte, Angular
  • Extracted styles per component (inline, CSS modules, styled-components)
  • Prop types and variants
  • Usage patterns and co-occurrence
  • Accessibility attributes (aria-*, role)

Example prompt:

"Analyze my component library in src/components/ and tell me which components are missing dark mode styles"

generateTheme​

Generates a theme configuration file for a target framework from your existing tokens.

Supported targets:

  • Tailwind CSS (tailwind.config.js)
  • Styled Components (theme object)
  • Material-UI (createTheme())
  • Chakra UI (theme extension)
  • CSS-in-JS (generic token object)

Also generates:

  • Dark/light mode variants (auto-detected from existing variables)
  • WCAG contrast compliance report
  • Brand color palette with accessible variants

Example prompt:

"Generate a Tailwind config from my existing SCSS variables and make sure all text/background combos pass WCAG AA"

What You Can Do With It​

You: "Look at my design system and find all colors that fail WCAG AA contrast"

Agent: [runs extractDesignTokens on src/styles]
       Found 47 color tokens. 8 text/background pairs fail WCAG AA:
       - --color-text-muted (#9CA3AF) on --color-bg-light (#FFFFFF): 2.8:1 (need 4.5:1)
       ...

You: "Fix them and regenerate my Tailwind config"

Agent: [runs generateTheme with updated palette]
       Updated tailwind.config.js with 8 corrected color values.

Installation​

npm install -g ainative-design-system-mcp-server

Verify:

ainative-design-system-mcp --version