Skip to main content
Glama
aestheticfunction

ds-mcp

by aestheticfunction
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

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

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.

This server cannot be installed

A
license - permissive license
-
quality - not tested
B
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/aestheticfunction/ds-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server