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
评论