# Design System Analyzer

> Use this tool when you need to analyze and understand the structure of UI components and design tokens in a React-based library. It solves problems related to code generation and design recommendations by providing detailed information on component properties and design tokens. The tool takes in TypeScript component files and JSON token files as input and outputs extracted prop information and design token values.

Canonical page: https://skillsregistry.net/skills/design-system-analyzer  
JSON: https://api.skillsregistry.net/v1/skills/design-system-analyzer

## Description

A design system MCP server that provides tools for retrieving component properties and design tokens from a React-based UI library. The server uses ts-morph to analyze TypeScript component files and extract prop information, while also accessing JSON token files that define colors, typography, spacing, and border radius values. This implementation enables AI assistants to understand the structure of UI components and available design tokens, facilitating more accurate code generation and design recommendations when working with this component library.

## Trust

- **Trust score (0–1):** 0.98
- **Verification tier:** verified
- **Last scanned:** 2026-09-28

## Facts

- **Version:** 1.0.0
- **Skill type:** atomic
- **Execution layer:** mcp-remote
- **Runtime environment:** api
- **Category:** file-system
- **Updated:** 2026-09-28

## Source

- **Source listing:** [PulseMCP](https://www.pulsemcp.com/servers/design-system-analyzer)
- **Repository:** <https://github.com/yajihum/design-system-mcp>

## Use it

Resolve this record through the SkillsRegistry MCP server (no auth, read-only):

```
claude mcp add --transport http --scope user skillsregistry https://api.skillsregistry.net/mcp
```

```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "get_skill",
    "arguments": {
      "slug": "design-system-analyzer"
    }
  }
}
```

REST: `GET https://api.skillsregistry.net/v1/skills/design-system-analyzer` · pull for local use: `GET https://api.skillsregistry.net/v1/skills/design-system-analyzer/pull`

---
SkillsRegistry indexes agent skills from public registries and GitHub. Skills we have analysed are scanned with Circle-IR and scored on six dimensions; each listing states its scan coverage. More: https://skillsregistry.net/llms.txt