This MCP server exposes an AI-powered knowledge base of design systems, standards, and best practices. It leverages a hybrid search architecture that combines semantic vector similarity with keyword matching to deliver accurate results across 188+ curated entries, including W3C standards, WCAG guidelines, ARIA practices, and major design systems. You can query the knowledge base through the available tools and connect any MCP client to the public endpoint for instant access. The public endpoint is designed for zero-setup use, while local development enables you to run the server on your machine for testing and customization.

To interact with the server, use the provided MCP tools such as search_design_knowledge to perform semantic queries across the entire library, and search_chunks to retrieve information within specific content chunks. For targeted access, you can browse by category or filter by tags to narrow results. The server supports standard JSON-RPC over HTTP/S, making it compatible with a wide range of MCP clients and integrations. If you’re using a local development setup, you can run the dev server and point your client to http://localhost:8787/mcp, then test with sample queries like searching for WCAG color contrast requirements or Design Tokens.

Prerequisites:

• Node.js and npm installed on your machine
• Git installed

Step-by-step:

1. Clone the repository git clone https://github.com/southleft/design-systems-mcp.git cd design-systems-mcp

2. Install dependencies npm install

3. Configure environment (local development) cp .dev.vars.example .dev.vars

   Edit .dev.vars and add your credentials (e.g., OPENAI_API_KEY, data source credentials)

4. Start the development server npm run dev

   Server will be available at http://localhost:8787

5. (Optional) Run a quick health check curl https://design-systems-mcp.southleft.com/health

   Or point a local client to http://localhost:8787/mcp

Tips and notes:

• If you’re using the public endpoint, you can skip local setup entirely and connect your MCP client to https://design-systems-mcp.southleft.com/mcp.
• The server uses a hybrid search approach; if you notice fewer results, try adjusting the query or using more specific category/tags filters.
• Ensure your OpenAI or embedding provider keys are correctly configured in environment variables (OPENAI_API_KEY or equivalent) for embeddings-based ranking.
• For local development, hot reload is enabled to speed up testing; use npm run dev and visit http://localhost:8787 to verify the endpoint responds.
• The design systems MCP supports standard MCP transports (HTTP/HTTPS) and JSON-RPC 2.0. Configure your client accordingly.