Design System MCP Server

@pglevy

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

More Media & Design MCP servers

SVGator

Drive your SVGator account from any AI assistant. Prompt an animation, get an editable project back, and export it as SVG, Lottie, GIF, MP4, and more, then open it in the editor to finish by hand.