What is the Design Systems MCP server?
Design Systems MCP is a hosted knowledge server with 395 curated entries covering W3C standards, WCAG, major design systems and newer agent-interface protocols. Five tools let an AI coding agent search, browse by category or tag and fetch cited passages, with no local install needed.
It is a Model Context Protocol server that provides access to design systems knowledge. The README counts 395 curated entries: W3C standards, WCAG 2.2, ARIA practices, major design systems and the 2025 to 2026 agent-interface protocols.
The README's argument is that model training goes stale on fast-moving specs. This server serves dated, cited, extracted primary-source content, so an agent answers from sources instead of from memory.
What changes in your agent's output
- Answers about tokens, accessibility and component architecture come with source reliability labels such as primary, authoritative or community.
- Search uses vector and keyword matching, with a relevance floor so an uncovered topic returns nothing rather than adjacent filler.
- Major systems, such as Carbon, Polaris, Material 3 and shadcn/ui, are covered for guidance and token architecture, not only props.
- Content on agent-facing design layers such as AGENTS.md, SKILL.md and DESIGN.md is included.
How the setup works
- Point your client at the hosted endpoint. No installation is needed.
- Or run the server locally from the repository for development.
- Ask a design system question and let the agent call the search tools.
Who the Design Systems MCP server is for
Best for
- Design system teams that want agents to cite standards instead of guessing, alongside web design guidelines checks.
- Builders documenting tokens and component contracts, who may also use Story UI for stories.
- Anyone comparing design system practice across vendors before choosing an approach.
Not for
- Reading or editing a design file. The Figma MCP server and the Penpot MCP server do that.
- Offline use. The recommended path is the public hosted endpoint.
- Generating components. It returns knowledge, not code.
Use it with UiChemy
The server informs how an agent reasons about design systems. For WordPress output, UiChemy builds the pages: Figma to WordPress turns a design into editable blocks, and Composer edits them inside Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect Design Systems MCP Server: A Cited Knowledge Base for Agents to your AI client
claude mcp add --transport http design-systems https://design-systems-mcp.southleft.com/mcpClaude Code
Run the command above, or add the JSON entry to
.mcp.json. Then runclaude mcp listto verify the connection.Claude Desktop
In Settings, open Connectors, choose Add custom connector and enter the endpoint URL. The README notes custom connectors need a Pro, Team or Enterprise plan.
Cursor and others
Add the endpoint as a
urlentry in the client's MCP config. The README gives formats for Cursor, Cline, Continue and Zed, and you restart the editor afterward.Local development
Clone the repository, install its dependencies with npm, copy
.dev.vars.exampleto.dev.varsand runnpm run dev. The server then answers on port 8787.
Client configuration
{
"mcpServers": {
"design-systems": {
"type": "http",
"url": "https://design-systems-mcp.southleft.com/mcp"
}
}
}Endpoints and ports
https://design-systems-mcp.southleft.com/mcpHosted, no setuphttps://design-systems-mcp.southleft.com/Chat interface over the knowledge basehttp://localhost:8787Started with npm run devWhat you can do with it
- 395 curated entriesStandards, WCAG 2.2, ARIA practices, major design systems and agent-interface protocols.
- Relevance floorIDF-weighted scoring returns nothing for an uncovered topic rather than confident, adjacent content.
- Source reliability badgesEvery answer flags primary, authoritative, reference, example or community sources.
- Vector and keyword searchEmbeddings handle meaning, and a full-text path keeps working when embeddings are unavailable.
- Hosted and localA public endpoint needs no setup, and the repository can run locally for development.
- Retrieval eval harnessA script scores retrieval and substance across four difficulty tiers.
Tools it exposes
search_design_knowledge
Searches the curated knowledge base for design systems guidance.
search_chunks
Searches at the passage level for narrower matches.
browse_by_category
Lists entries within a category.
get_all_tags
Lists the tags used across the knowledge base.
browse_by_tag
Lists entries that carry a given tag.
Frequently asked questions
What is the Design Systems MCP server?
It is a hosted Model Context Protocol server that gives an AI coding agent access to 395 curated design systems entries. They cover W3C standards, WCAG 2.2, ARIA practices, major design systems and agent-interface protocols, each with a source reliability label.
How do I connect to it?
Point your client at the hosted endpoint listed in the connect section. In Claude Code run claude mcp add --transport http design-systems followed by that endpoint URL. Other clients take a url entry in their MCP config, and no local installation is needed.
Which tools does it have?
The README lists five: search_design_knowledge, search_chunks, browse_by_category, get_all_tags and browse_by_tag. The README's connector text also says four tools, so run your client's tool listing to confirm what your connection exposes.
Why use it if models already know design systems?
The README argues models are stale on fast-moving specs, such as newer agent-interface protocols, and cannot detect that. The server serves dated, cited extracts, so the agent answers from sources instead of from last year's field names.
Can I self-host it?
Yes. Clone the repository, install its dependencies, copy the example environment file and run the dev server. The README describes a Cloudflare Workers deployment with Supabase pgvector search, so production hosting needs those services.
Does it generate components or code?
No. It returns knowledge about design systems, standards and practice. For component code, pair it with a registry server such as the shadcn MCP server or a design server like Better Design.
What license does it use?
The README says MIT License, free for personal and commercial use, and says all original content stays the property of its authors. GitHub shows no detected license, so confirm the LICENSE file in the repository before you redistribute anything.