ds-mcp

Stop asking AI agents to guess your design system. Give them a contract they can query.

The problem

AI coding agents generate UI by guessing: they invent component names, fabricate props, hardcode color values, and ignore the patterns your team has documented. Every generated file needs manual correction to match your design system.

The solution

ds-mcp is a read-only MCP server that loads a dspack file — a portable JSON description of your design system — and exposes its contents as tools that agents can query before generating code. The agent asks questions; ds-mcp answers with your team's actual tokens, components, props, patterns, and anti-patterns.

What this is

• A read-only MCP server. It retrieves design system information. It does not generate code, write files, or make network calls.
• The reference implementation of the dspack specification (supports v0.1 and v0.2).

What this is not

• A code generator. Code generation is the agent's job.
• A Figma sync tool. dspack files are authored and versioned by your team.
• A runtime dependency. ds-mcp runs alongside your MCP client during development, not in production.

How it works

1. Create a dspack file describing your design system's tokens, components, patterns, and anti-patterns. (Use the included shadcn/ui v0.2 example to try it now, or the v0.1 example for the minimal format.)
2. Start ds-mcp with the dspack file. It loads the file once and holds it in memory.
3. Connect your MCP client (Claude Desktop, Claude Code, Cursor, GitHub Copilot). The agent can now query your design system at coding time.

Quick start

# 1. Install
npm install -g @aestheticfunction/ds-mcp

# 2. Download the shadcn/ui v0.2 example dspack
curl -L https://raw.githubusercontent.com/aestheticfunction/ds-mcp/main/examples/shadcn-ui-v02.dspack.json \
  -o shadcn-ui.dspack.json

# 3. Run with the downloaded file
ds-mcp --dspack ./shadcn-ui.dspack.json

Configure your MCP client to connect to ds-mcp. See docs/README.md for client-specific configuration examples.

What agents can ask

| Agent question | Tool call | Returns | |---|---|---| | What components are available? | list-components | Components with names, descriptions, deprecation and lifecycle status | | Which components are stable? | list-components { status: "stable" } | Only components with stable lifecycle status | | How do I use the Button component? | get-component { id: "button" } | Props, usage guidance, tokens, accessibility, composition, constraints | | What's the right layout for a settings form? | get-pattern { id: "settings-form" } | Components to use, guidance on control selection and layout | | What color token should I use for text? | get-token { category: "color", name: "foreground" } | Token value, description, type, tier, status, aliasOf | | Which tokens relate to spacing? | search-tokens { query: "spacing" } | All tokens matching "spacing" across names, categories, descriptions, tier | | What should I avoid doing? | list-antipatterns | Anti-patterns with reasoning, severity, and preferred alternatives | | What are the must-not rules? | list-antipatterns { severity: "must-not" } | Only anti-patterns with must-not severity | | How do I import Button in React? | get-framework-mapping { framework: "react", componentId: "button" } | Import path, install command, sub-component exports, guidance | | What overrides does the dark theme apply? | get-theme { id: "dark" } | Theme description and token override map | | What breakpoints should I use? | get-layout | Breakpoints, grid config, container sizes, spacing scale |

Tools

ds-mcp exposes nine read-only tools:

| Tool | Input | Description | |------|-------|-------------| | get-token | { category, name } | Retrieve a single design token by category and name | | search-tokens | { query } | Search tokens by name, category, description, type, tier, status, or aliasOf | | get-component | { id } | Retrieve a full component definition including accessibility, composition, and constraints | | list-components | { status? } | List all components; optionally filter by lifecycle status | | get-pattern | { id } | Retrieve a documented usage pattern by ID | | list-antipatterns | { severity? } | List all anti-patterns; optionally filter by severity | | get-framework-mapping | { framework, componentId? } | Retrieve framework-specific information including sub-component export mappings | | get-theme | { id } | Retrieve a theme definition with token overrides | | get-layout | none | Retrieve layout primitives: breakpoints, grid, containers, spacing scale |

Requirements

• Node.js 20.0.0 or later
• A dspack v0.1 or v0.2 file (see the dspack spec)

Configuration

ds-mcp accepts the dspack file path via:

1. --dspack <path> CLI flag (first priority)
2. DSPACK_PATH environment variable (fallback)

Set DSMCP_DEBUG=true for verbose stderr logging.

Documentation

• Installation and MCP client setup
• Architecture
• Demo walkthrough: shadcn/ui settings form

Development

npm install
npm run build
npm test
bash scripts/smoke.sh

Security

ds-mcp is architecturally read-only. It does not write files, execute commands, or make network calls. Any behavior that violates these constraints is a defect. See SECURITY.md for reporting instructions.

License

Copyright 2026 Aesthetic Function, LLC.

Licensed under the Apache License, Version 2.0. See LICENSE for the full text.