---
title: "Design System MCP Server"
description: "Extract design tokens, analyze component libraries, and generate themes from CSS/SCSS files via MCP"
canonical: "https://docs.ainative.studio/docs/mcp/design-system-server"
last-updated: "2026-09-23T01:51:08.820Z"
---

# Design System MCP Server

Source: https://docs.ainative.studio/docs/mcp/design-system-server

> Extract design tokens, analyze component libraries, and generate themes from CSS/SCSS files via MCP

# 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

```bash
claude mcp add ainative-design-system -- ainative-design-system-mcp
```

### Manual Config

```json
{
  "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

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

Verify:

```bash
ainative-design-system-mcp --version
```