MCP.so
Sign In

Design System MCP Server

@pglevy

Repository

About Design System MCP Server

A proof-of-concept for publish design system guidance and code snippets as an MCP server for usage with LLMs

#design-system#mcp-server#llm-integration

Config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "design-system": {
      "command": "node",
      "args": [
        "/ABSOLUTE/PATH/TO/design-system-server/build/index.js"
      ]
    }
  }
}

Tools

No tools detected

We auto-extract tools from the README. The maintainer can list them under a ## Tools heading to populate this section.

Overview

What is Design System MCP Server?

Design System MCP Server is a Model Context Protocol (MCP) server that provides access to design system documentation through GitHub Gists. It allows LLMs like Claude to query and explore design system components, layouts, and patterns.

How to use Design System MCP Server?

Install dependencies with npm install, build with npm run build, then add the server to Claude Desktop’s configuration file (on macOS: ~/Library/Application Support/Claude/claude_desktop_config.json or Windows: %AppData%\Claude\claude_desktop_config.json) with the absolute path to the built index.js and restart Claude Desktop.

Key features of Design System MCP Server

  • Browse design system categories (components, layouts, patterns)
  • List components within a specific category
  • Get detailed component information including guidance and code examples
  • Search across all components by keyword

Use cases of Design System MCP Server

  • Ask “What design system categories are available?” to explore the system
  • Request “Show me all components in the ‘layouts’ category” to list parts
  • Get details about a component (e.g., “cards”) for guidance and code
  • Search the design system for terms like “navigation” to find relevant content

FAQ from Design System MCP Server

How do I configure it with Claude Desktop?

Edit the Claude Desktop configuration file (claude_desktop_config.json) and add a server entry pointing to the server’s built index.js with an absolute path. Restart Claude Desktop after making the change.

What tools does the server provide?

It provides four tools: list-categories, list-components, get-component-details, and search-design-system.

How do I troubleshoot issues?

Check Claude Desktop logs via tail -n 20 -f ~/Library/Logs/Claude/mcp*.log, verify the server builds and runs without errors, ensure the configuration path is absolute and correct, and restart Claude Desktop.

What are the dependencies and runtime requirements?

Node.js is required. Dependencies are installed with npm install, and the server is built with npm run build.

Where does the design system data live?

The design system documentation is accessed through GitHub Gists.

Frequently asked questions

How do I configure it with Claude Desktop?

Edit the Claude Desktop configuration file (`claude_desktop_config.json`) and add a server entry pointing to the server’s built `index.js` with an absolute path. Restart Claude Desktop after making the change.

What tools does the server provide?

It provides four tools: `list-categories`, `list-components`, `get-component-details`, and `search-design-system`.

How do I troubleshoot issues?

Check Claude Desktop logs via `tail -n 20 -f ~/Library/Logs/Claude/mcp*.log`, verify the server builds and runs without errors, ensure the configuration path is absolute and correct, and restart Claude Desktop.

What are the dependencies and runtime requirements?

Node.js is required. Dependencies are installed with `npm install`, and the server is built with `npm run build`.

Where does the design system data live?

The design system documentation is accessed through GitHub Gists.

Comments

Basic information

Category

Media & Design

Transports

stdio

Author

pglevy

More Media & Design MCP servers

Spotify MCP

varunneal

MCP to connect your LLM with Spotify.

606

Floors.live — Event Floor Plan & Seating Designer

Hakolsound

MCP server for Floors.live — design event floor plans, manage guest lists, and run intelligent seating assignments from Claude, ChatGPT, or Cursor. 32 tools.

diggercamp

Tommaso Savorana (ti es)

diggercamp finds independent music by how it sounds. Paste any Bandcamp, YouTube or SoundCloud link and get the closest sonic matches from 4M+ independent tracks — matched by rhythm, timbre, key and energy, not genre tag

YouTube Transcript MCP Server

jkawamoto

MCP server retrieving transcripts of YouTube videos

418

Uwear.ai

Uwear.ai

Run complete AI fashion photoshoots from ChatGPT, Claude, or Codex. Turn flat-lay, packshot, and mannequin product images into catalog-ready on-model photos and video with saved art direction, automatic QA, and catalog-s