Skip to main content
Glama
erikadmoller

design-system-mcp

by erikadmoller
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

Design System MCP Server

An MCP (Model Context Protocol) server that exposes an airline-grade design system as a queryable knowledge base — enabling AI-assisted component discovery, use-case-driven scaffolding, and spec-driven prototype generation.

This project will encode deep domain knowledge — fare display, ancillary retailing, and booking flows — into an AI workflow that lets Claude reason about component selection the way an experienced engineer would.

What This Is

Most design system tooling answers the question "what does this component do?"

This MCP server answers "what component should I use for this problem?"

Claude Desktop (or Claude Code) can invoke these tools mid-conversation to make informed, design-system-aware decisions when scaffolding prototypes — without digging through Storybook or asking a teammate.

Related MCP server: Mesh Design System MCP Server

Architecture

Claude Desktop / Claude Code  ←— orchestration layer
        ↓
Design System MCP Server      ←— this repo (tool layer)
        ↓
components.json               ←— structured component knowledge base

The MCP server runs locally via stdio. Claude decides when to call a tool based on context — the developer never has to invoke tools manually.

Tools

get_component

Returns full component spec by exact name — variants, props, accessibility guidance, usage notes, and related components.

Input:  { name: "FareCard" }
Output: variants, props, a11y guidance, usage, related components

find_component_for_use_case

Semantic search — describe what you need in plain English and get the most relevant components ranked by relevance.

Input:  { description: "show ancillary upsell offers after fare selection" }
Output: AncillaryOfferCard, AncillaryOfferGroup, AncillaryCartSummary

list_components_by_category

Browse the component library by category. Returns name, category, and description for each match.

Input:  { category: "Booking forms" }
Output: PassengerForm, BookingFormStepper, PriceBreakdown

Component Coverage

The knowledge base covers three core categories of the airline passenger journey:

Fare display & selection

  • FareCard — single fare option with price, cabin class, and conditions

  • FareGrid — responsive fare family comparison grid

Ancillary offers

  • AncillaryOfferCard — individual ancillary product (bag, seat, upgrade, insurance)

  • AncillaryOfferGroup — grouped ancillary offers with expand/collapse

  • AncillaryCartSummary — persistent selected ancillaries and running total

Booking forms

  • PassengerForm — passenger details capture (adult, child, infant variants)

  • BookingFormStepper — multi-step booking flow navigation

  • PriceBreakdown — itemised fare, tax, fee, and ancillary cost summary

Setup

Prerequisites: Node.js v18+, Claude Desktop

git clone https://github.com/yourusername/design-system-mcp
cd design-system-mcp
npm install
npm run build

Add to your ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "design-system-mcp": {
      "command": "/path/to/node",
      "args": ["/path/to/design-system-mcp/build/index.js"]
    }
  }
}

Restart Claude Desktop. The server will appear under Settings → Developer.

Example Usage

In Claude Desktop or Claude Code:

"I need to build a fare selection screen for an NDC booking flow. What components should I use?"

Claude will call find_component_for_use_case, get back FareGrid and FareCard, then call get_component on each to retrieve their full specs — and use that context to scaffold a React prototype using the correct components, props, and accessibility patterns.

Roadmap

This server is Phase 2 of a larger pipeline:

  • Phase 3a — Spec-to-Figma generator: take a service blueprint and generate an editable Figma layout (spec-first path)

  • Phase 3b — Figma MCP tool: read a Figma frame and map its components to this design system (design-first path)

  • Phase 4 — Full pipeline: service blueprint → structured spec → Figma → MCP tools → React prototype, orchestrated by Claude Code

Background

This project grew out of 6 years building and governing Spark — Sabre's enterprise design system across airline and hospitality products. The goal is to encode that domain expertise into an AI workflow that lets prototypes scale in complexity without losing design system fidelity.

The broader thesis: AI-assisted engineering is about encoding deep domain knowledge into workflows that make the right decisions automatically.

Tech Stack

  • TypeScript

  • @modelcontextprotocol/sdk

  • zod

  • Node.js v20

Available Tools

3 tools
find_component_for_use_caseB

Finds the most relevant design system component based on a use case description

ParametersJSON Schema
NameRequiredDescriptionDefault
descriptionYesA description of what you need e.g. 'show a list of fare options for comparison'

TDQS

B3.4/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It merely restates the purpose without explaining how relevance is determined, what the result looks like, or what happens when no match is found. This is a significant gap for a tool that performs semantic matching.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, concise sentence that immediately states the verb ('finds') and resource ('component'), with no filler or redundant information. It is well-structured and easy to parse.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given that there are no annotations, no output schema, and only one parameter, the description is too sparse to fully inform an agent. It does not describe the shape of the returned component, how confidence or relevance is presented, or edge cases like no matches. This makes it inadequate for fully autonomous tool selection and invocation.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema provides 100% coverage for the single parameter, including a clear description and example. The tool description adds no extra parameter-level detail, so the baseline of 3 is appropriate because the structured schema already does the heavy lifting.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's function: finding the most relevant design system component based on a use case description. This distinguishes it from siblings like get_component (which likely retrieves a specific component) and list_components_by_category (which lists by category).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage when you have a textual use case and need a component recommendation, but it does not explicitly contrast with sibling tools or provide exclusions. It lacks guidance on when to prefer this over get_component or list_components_by_category, so usage is only implicitly determined.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_componentB

Returns design system component info by exact name

ParametersJSON Schema
NameRequiredDescriptionDefault
nameYesThe component name e.g. 'FareCard' or 'PassengerForm'

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries full behavioral disclosure burden. It only says 'returns info' and does not disclose what happens for unknown names, the format of the returned info, or any other behavioral traits. This is a significant gap.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that front-loads the core purpose. No wasted words or redundant information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple tool with one param and no output schema, the description is thin. It does not clarify what 'component info' includes or how exact matching works. Given no output schema, the description should provide more context about the return value.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the parameter is fully documented in the schema. The description's 'by exact name' adds no new meaning beyond the schema's parameter description, making baseline 3 appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool returns design system component info, with the qualifier 'by exact name' indicating an exact lookup. This distinguishes it from siblings like find_component_for_use_case and list_components_by_category, though it does not explicitly mention them.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage when the exact component name is known, but provides no explicit guidance on when NOT to use it or what to use instead. Sibling names hint at alternatives, but the description itself doesn't state them.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_components_by_categoryB

Lists all available components optionally filtered by category

ParametersJSON Schema
NameRequiredDescriptionDefault
categoryNoCategory to filter by e.g. 'Fare display & selection'

TDQS

B3.4/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It states 'Lists all available components' which implies a read-only operation, but does not explicitly confirm non-destructiveness, nor does it mention pagination, ordering, or return format. This is minimal behavioral disclosure.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, front-loaded sentence with no filler. It earns a high score for brevity.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's simplicity (one optional parameter, no nested objects, no output schema), the description plus schema is sufficient for basic selection and invocation. However, the lack of any behavioral details (pagination, return shape) keeps it from being excellent, so a 4 is appropriate.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema already documents the single optional 'category' parameter with 100% coverage. The description merely restates the filter concept without adding syntax, defaults, or format details, matching the baseline for high schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('Lists') and resource ('all available components') with an optional filter by category. It distinguishes from sibling tools by covering the list-all scenario, though it doesn't explicitly name alternatives.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description indicates the tool can be used to list all components or filter by category, but provides no explicit guidance on when to choose this tool over get_component or find_component_for_use_case. The usage is implied rather than stated.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 3 tool updatesv1.0.0
    • First observedfind_component_for_use_case
    • First observedget_component
    • First observedlist_components_by_category
Deploy Server
One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

TDQS

A3.7/5.0

Scored across 3 tools

Disambiguation5/5

Each tool has a clearly distinct purpose: retrieving by exact name, finding by use case description, and listing by category. There is no overlap or ambiguity between them.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern (get, find, list) with descriptive objects, and all use snake_case. The naming is predictable and uniform.

Tool Count5/5

Three tools is well-scoped for a read-only design system lookup server. Each tool covers a distinct query need without unnecessary bloat.

Completeness4/5

The tool set covers the main discovery operations: exact lookup, use-case-based search, and listing by category. Minor gaps like direct search by keyword or component versioning could exist, but the core surface is complete for typical usage.

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers