Design System MCP Server

Name: Design System MCP Server
Author: pglevy

@pglevy

代码仓库

关于 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

基本信息

分类

媒体与设计

运行时

node

传输方式

stdio

发布者

pglevy

配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

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

工具

未检测到工具

工具是从 README 中自动提取的。维护者可以在 ## Tools 标题下列出工具,即可填充这部分内容。

概览

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.