Advertise
MCP.so
Sign In

Design Systems MCP Server

@southleft

RepositoryHomepage

Basic information

Category

Media & Design

License

NOASSERTION

Transports

stdio

Author

southleft

Submitted by

TJ Pitre

About Design Systems MCP Server

I'm your specialized design systems assistant. Ask me about components, tokens, patterns, and best practices.

#design-systems#mcp#ai-assistant

Design Systems MCP Server config

Add this server to your MCP-compatible client using the configuration below.

{
  "mcpServers": {
    "design-systems": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://design-systems-mcp.southleft-llc.workers.dev/mcp"
      ]
    }
  }
}

Design Systems MCP Server tools

5

Search through design system knowledge base entries by query, category, or tags

Search through specific content chunks for detailed information

Browse all entries in a specific category

Get a list of all available tags in the knowledge base

List all entries carrying a specific tag (use get_all_tags to discover tags)

Overview

What is Design Systems MCP Server?

An AI-powered Model Context Protocol (MCP) server providing intelligent access to authoritative design systems knowledge. It is powered by Supabase vector search with 200+ curated entries including W3C standards, WCAG guidelines, and design system best practices. It is intended for developers, designers, and accessibility specialists who need quick, accurate answers about design systems.

How to use Design Systems MCP Server?

Connect any MCP-capable client (e.g., Claude Desktop, Cursor, Windsurf) to the public endpoint https://design-systems-mcp.southleft.com/mcp with zero setup. For local development, clone the repository, run npm install, configure environment variables, and start with npm run dev. The server exposes four MCP tools: search_design_knowledge, search_chunks, browse_by_category, and get_all_tags.

Key features of Design Systems MCP Server

  • Production vector search using Supabase pgvector and OpenAI embeddings.
  • 200+ curated entries from W3C, WCAG, ARIA, and 10+ major design systems.
  • Hybrid search combining vector similarity with keyword matching (0.15 threshold).
  • Edge-optimized deployment on Cloudflare Workers with global distribution.
  • Streaming responses via SSE for fast time‑to‑first token.
  • Source reliability badges marking each answer as Primary/Authoritative/Reference/Example/Community.

Use cases of Design Systems MCP Server

  • Quickly look up WCAG 2.2 color contrast requirements while designing.
  • Retrieve W3C Design Tokens specification for token naming.
  • Browse component patterns from Material Design 3 or IBM Carbon.
  • Verify ARIA Authoring Practices for accessible UI patterns.
  • Get best‑practice guidance from multiple design systems in one query.

Frequently asked questions

1

What clients does Design Systems MCP Server support?

It works with any MCP-capable client, including Claude Desktop, Claude Code (CLI), Cursor IDE, Cline (VSCode), Continue (VSCode), Zed Editor, and generic MCP clients.

2

How do I add my own content to the server?

You can ingest web content via `npm run ingest:url <URL>`, bulk ingest from CSV with `npm run ingest:csv <file>`, ingest PDFs with `npm run ingest:pdf <file>`, or crawl entire websites with `npm run crawl:website <URL>`. After ingestion, run `npm run ingest:vectors` to generate embeddings.

3

Is there a live demo or hosted web UI?

Yes. The live demo is at `https://design-systems-mcp.southleft.com/`. It includes an AI chat interface that streams responses via SSE and a landing page with MCP endpoint details.

4

What MCP tools are available?

Four tools: `search_design_knowledge` (semantic search across the knowledge base), `search_chunks` (find specific content in chunks), `browse_by_category` (browse content by categories like components, tokens, patterns), and `get_all_tags` (list all content tags for filtering).

5

Does the server require authentication or API keys?

The public MCP endpoint is available without authentication. Local development requires setting environment variables (e.g., Supabase and OpenAI keys) in a `.dev.vars` file.

Comments

More Media & Design MCP servers

P

Photo Mosaic & AI Collage Maker - Collager.ai

Collager.ai

Photo mosaic maker and AI photo collage maker: turn your own photos into a photo mosaic - one picture made of hundreds of your photos - or into a heart, number or word photo collage in seconds. No sign-in or API key need

Vid Kraken

Vid Kraken

YouTube download API and MCP server. Download YouTube videos as MP4 (360p–4K) or audio as MP3/AAC, cut clips by start and end time, and get video metadata. No yt-dlp, proxies or cookies to maintain; 99.99% of downloads s

InstantClips

InstantStudioAI

InstantClips turns an e-commerce product into short-form vertical video for TikTok, Instagram Reels and Stories. Import a product from its page URL or photos, generate on-brand video ads, and manage brands/products throu

GPT Image 2.5 MCP

you.bot

Generate and edit images with GPT Image 2.5 for $0.029 each. A free you.bot key (not an OpenAI key) comes with 50 credits — about 17 images — and needs no credit card.

MagicPixel.art

AI pixel art generator MCP for Claude, ChatGPT, and Cursor. Generate pixel art, remix your own assets, and sync them into Unity or Godot. Create pixel art, remix, edit, and iterate on pixel art game assets including char

Advertise