Design System Model Context Protocol (DS-MCP)

A lightweight, open protocol to help AI coding tools understand and apply your design system.

What Is DS-MCP?

DS-MCP is a specification that allows your design system — including colors, typography, spacing, components, and usage rules — to be described in a machine-readable format that AI tools can consume.

With DS-MCP, tools like ChatGPT, Cursor, Copilot, or Claude can generate code that respects your design tokens and components out of the box.

🔍 Why It Matters

Modern design systems are rich with intent, but current AI tools operate in a vacuum. DS-MCP bridges that gap by:

• Exposing design tokens and component contracts to LLMs
• Helping AI tools generate code that aligns with your visual language
• Reducing the need for retrofitting or re-theming after generation

How It Works

1. Export your design system into a .dsmcp.json file.
2. Provide the file to an AI assistant via URL or local upload.
3. The AI assistant reads the file to learn about your tokens, components, and rules.
4. All code output respects your system.

Example

{
  "name": "MyApp Design System",
  "tokens": {
    "color": { "primary": "#1F8EF1" },
    "font": { "body": "Inter" },
    "spacing": { "sm": "8px" }
  },
  "components": {
    "Button": {
      "import": "@myapp/ui/Button",
      "usage": "<Button variant='primary'>Click</Button>"
    }
  }
}