# @conciso/design-system-mcp [Health: Active]

**Category:** 💻 Developer Tools  
**Repository:** https://github.com/conciso/conciso-design-system  
**GitHub Stars:** 1  
**npm Downloads (last month):** 2484  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/conciso-design-system-mcp

## Description
MCP-Server für Consumer des Conciso Design System, beantwortet docs-list, docs-show und docs-show-story über stdio aus einem mitgelieferten Storybook-Snapshot, ohne Netzzugriff.

## Tools
Capabilities this server exposes over MCP:

- **docs-list** — List all available UI components and documentation entries from the Storybook, returning the IDs the other documentation tools take as input. Call this first for any UI task — before writing a new component, check what the design system already provides and build on it instead of hand-rolling a duplicate; before answering any question about props, API, or usage, discover the relevant IDs here rather than reading component source. Then fetch the entries with docs-show, referencing only IDs returned here — never guess IDs. When multiple Storybook sources are configured, entries from every source are included; scope follow-up calls to one source via their `storybookId` input. Pass `withStoryIds: true` when you need story IDs for other tools.
- **docs-show** — Get documentation for a UI component or docs entry.

Returns the first 3 stories (including story IDs) with code snippets showing how props are used, plus TypeScript prop definitions. Call this before using a component to avoid hallucinating prop names, types, or valid combinations, and to answer any question about a component's props, API, or usage — reading or grepping the component source is not a substitute. Stories reveal real prop usage patterns, interactions, and edge cases that type definitions alone don't show. If the example stories don't show the prop you need, use the docs-show-story tool to fetch the story documentation for the specific story variant you need — its story ID can be passed directly as `storyId`.

Example: id="button" returns Primary, Secondary, Large stories with code like <Button variant="primary" size="large"> showing actual prop combinations.
- **docs-show-story** — Get detailed documentation for a specific story variant of a UI component. Use this when you need to see more usage examples of a component, via the stories written for it. Identify the story by its story ID (preferred), or by componentId plus storyName.

## Claude Desktop Quick Installation
Install path inferred — verify against the README before running it. Uses `npx` (confidence: medium):

```json
"mcpServers": {
  "design-system-mcp": {
    "command": "npx",
    "args": ["-y","@conciso/design-system-mcp"]
  }
}
```

## Documentation

## What @conciso/design-system-mcp MCP server does

The @conciso/design-system-mcp MCP server makes the Conciso Design System documentation available to MCP-compatible AI assistants. Its source is a bundled snapshot of the project’s Storybook documentation rather than a remote website or an API that is queried at runtime.

The underlying design system documents design tokens, CSS components, light and dark mode behavior, usage conventions, and page patterns. The MCP package is intended for developers and designers who need an assistant to look up this material while working on Conciso interfaces.

## How it works

The server communicates over stdio, allowing an MCP client to start it as a local process and exchange tool requests through standard input and output. Documentation content comes from the Storybook snapshot included with the package. Because the snapshot is local, the server does not need network connectivity to answer requests.

The available documentation operations are:

- `docs-list` — returns the available documentation entries.
- `docs-show` — retrieves a documentation entry from the snapshot.
- `docs-show-story` — retrieves a Storybook story from the snapshot.

This makes the server suitable for documentation lookup, but it does not represent a live connection to the public Storybook site. Results reflect the snapshot packaged or generated for the server.

## Setup and configuration

The @conciso/design-system-mcp MCP server is located in the repository’s `packages/mcp/` package. Its documented transport is stdio. Configuration should therefore be handled by an MCP client that can launch a local stdio server; the repository’s MCP package documentation is the authoritative source for the exact launch details.

The repository build process generates the MCP snapshot alongside other project outputs. If the snapshot is rebuilt from updated Storybook content, the server can expose that generated documentation rather than the older copy.

## Tools and capabilities

Use `docs-list` when an agent needs to discover the documentation entries available in the local snapshot. Use `docs-show` to read a selected documentation item, and `docs-show-story` when the required material is a Storybook story or component example.

These tools are focused on retrieval. The server should therefore be evaluated as a read-only documentation interface for the Conciso Design System.

## Limitations and notes

The @conciso/design-system-mcp MCP server serves a bundled Storybook snapshot and does not access the network. Documentation can become stale when the design system changes unless the snapshot is regenerated and the server package is updated.

The server provides documentation access, not the design system itself. CSS assets, Angular components, tokens, fonts, icons, and brand assets remain separate parts of the repository or its packages. The repository describes the design system as framework-agnostic CSS with optional Vanilla JS, while Angular consumers use a separate package.

The project is listed in the Developer Tools category. Its MIT repository license applies to the project, with the source README noting separate notices for brand assets, fonts, and icons.

_Full upstream README: https://allmcps.com/mcp/conciso-design-system-mcp/readme_