Design Systems MCP
Remote MCP server of design systems knowledge: 395 sources on WCAG, tokens, components and agent interface protocols.
- 225 ★ on the repository
- Last commit
Minimal access
Why this level
- Queries go to an external server, so confidential project details should not be included.
- The server only returns reference material and runs no commands on your machine.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/design-systems-mcpDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- Queries go to an external server, so confidential project details should not be included.
- The server only returns reference material and runs no commands on your machine.
This is third-party code. Review the repository files before installing.
What it does
Design Systems MCP is a base of vetted design systems material that an agent reaches at one address. It holds 395 entries: W3C and WCAG 2.2 standards, ARIA Authoring Practices, the DTCG design tokens specification, breakdowns of Carbon, Polaris, Material 3, Fluent, Atlassian and other systems, plus fresh material on A2UI, MCP Apps and AG-UI. The agent searches by meaning and by keyword, receives excerpts with a date and a source reliability label (primary, authoritative, reference, example, community) and browses the base by category and tag. If a topic has no coverage, the server returns nothing instead of similar but irrelevant material. Connecting needs only the address `https://design-systems-mcp.southleft.com/mcp`, with nothing to install.
Who it is for. Designers and front-end developers who build or repair a design system and work with Claude Code, Cursor or Claude Desktop.
Good fit when
- Color and spacing tokens are described in the DTCG format and the agent checks the structure against the specification.
- A component must meet WCAG 2.2 and exact success criteria with a source are needed.
- A team compares how Carbon, Polaris and Material 3 structure their token architecture.
- An interface is handed to an agent and you want to learn how A2UI and MCP Apps describe components.
Not a fit when
- You need to work with a Figma file directly: the server holds knowledge and does not open mockups.
- The question concerns a company's internal design system that is not among the 395 sources.
- The network blocks external addresses, while the server runs only at a remote URL.
Example request
Find how WCAG 2.2 describes the minimum target size and show the source and date of the material.MCP
- Transport
- http
- Authentication
- not required
Limitations
The server is hosted on Cloudflare Workers by its authors (Southleft), and availability depends on their hosting. The public address needs no key, but queries go to an external service, so confidential details are better left out. The base held 395 entries at the time of the README and grows at the authors' discretion. A local run needs your own Supabase credentials and embeddings setup per the repository instructions, with no ready image.
How to disable. Remove the connection with `claude mcp remove design-systems` or delete the entry from `.mcp.json`. In Claude Desktop the custom connector is deleted in settings.
FAQ
How do I connect the server to Claude Code?
Run `claude mcp add --transport http design-systems https://design-systems-mcp.southleft.com/mcp`, then check `claude mcp list`.
How do I add it to Claude Desktop?
Open Settings, then Connectors, click Add custom connector and paste the server address. Custom connectors are available on paid plans.
Which tools does the server offer?
`search_design_knowledge`, `search_chunks`, `browse_by_category`, `get_all_tags` and `browse_by_tag`.
What happens if a topic has no material?
The server returns an empty result. A relevance floor removes close but wrong answers.
Is a key or sign-up needed?
No, the public address is open and asks for no key.
Discussion
No questions or reviews yet.
Related
MCP serversA reference MCP gives an agent sourced website requirements and helps prepare a checklist before a site release
Medical MCP
medical-mcp
MCP server for medical sources: FDA and EMA drug data, WHO statistics, PubMed and clinical trials without API keys.
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
Design System Extractor MCP
mcp-design-system-extractor
An MCP server pulling component information and design tokens from Storybook and analyzing CSS. One-command connection with claude mcp add
Ref's MCP server: documentation search for APIs and libraries that hands the agent only the relevant parts of pages
Docs MCP Server
Grounded Docs MCP Server
A local MCP server that indexes docs from websites, GitHub, npm, PyPI and files and gives the agent version-aware search
README in short
The project is built on Cloudflare Workers and Supabase with vector search and a full-text fallback. The repository includes a retrieval evaluation harness that scores the source found and the substance of the answer across four difficulty tiers.