MCP.so
ログイン

Design System MCP Server

@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.

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.

コメント

「メディアとデザイン」の他のコンテンツ

Figma MCP Server

thirdstrandstudio

Figma MCP Server with full API functionality

73

Spotify MCP

varunneal

MCP to connect your LLM with Spotify.

606

百度地图 MCP Server

baidu-maps

Baidu Map MCP Server

436

NS Travel Information MCP Server

r-huijts

A Model Context Protocol (MCP) server that provides access to NS (Dutch Railways) travel information through Claude AI. This server enables Claude to fetch real-time train travel information and disruptions using the official Dutch NS API.

56

Photoshop MCP Server

loonghao

A Model Context Protocol (MCP) server that interfaces with Adobe Photoshop's Python API. Enables LLMs to execute image editing operations, automate workflows, and manage Photoshop tasks through structured commands and context-aware interactions.

275