Skip to main content
Glama
deenesjakoruzh
blumaa

dsbridge

by blumaa
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

dsbridge

Ein MCP-Server, der eine Frage zu jeder App beantwortet: Hält der Vertrag zwischen dem von ihr installierten Designsystem und der App? Jeder Wert, den die App schreibt, und jede Komponente, die sie rendert, sortiert danach, woher sie stammt – vom Designsystem, von einem Namen, den die App sich selbst gegeben hat, oder von nichts – und was die eigene Marke der App zum Kontrast beiträgt.

Fragen Sie aus einer verbrauchenden App heraus in einfacher Sprache – „prüfe meine Designsystem-Nutzung“ – und erhalten Sie den Bericht als Tabellen im Terminal, mit einer Datei und einer Zeile für jede Zeile.

web · 2026-08-26

@acme/tokens · @acme/react — 67% of written values came through the system

values written                        count  share
------------------------------------  -----  -----
through a design system token           234    67%
through a token the app named itself    112    32%
through no token at all                   2     1%

Values with no token behind them (2)
kind  written  a token already holds
----  -------  ---------------------
size        2                      —

components rendered                          kinds  places
-------------------------------------------  -----  ------
from the design system                          63     511
the app's own                                  144     649
  of those, could move into the system          14       —
  of those, a name the system already ships      0       —
from another package                             9     132
shipped by the system, never rendered            9       —

The app's own components (144)
component    rendered  in files  note
-----------  --------  --------  --------------------------
AuthorLine          9         4  could move into the system
TagList             6         4  could move into the system
Section             4         4  could move into the system
MemberList         16         3  could move into the system
CountBadge          8         3  could move into the system
FilterChips         8         3  could move into the system
ActionBar           3         3  could move into the system
RailCard            4         3  could move into the system
SplitPane           5         2  could move into the system
Byline              3         2  could move into the system
… and 134 more

Never rendered (9)
Container, DateTimePicker, Popover, ProgressBar, Spinner, Tab, TabList, TabPanel, Tabs

tokens                                  count
--------------------------------------  -----
declared by the design system             268
read by the app                            67
re-pointed by the app's brand              60
declared by the app itself                 47
of those, read anywhere                    46
read by the app and declared by nobody      0

Tokens the app named itself (47)
where                               token          value                  read  the system holds this value too
----------------------------------  -------------  ---------------------  ----  -------------------------------
…/web/src/app/frames.module.css:13  --logo-height  var(--acme-logo-md)       1
…/web/src/app/frames.module.css:28  --logo-height  var(--acme-logo-lg)       1
…/Logo/Logo.module.css:27           --logo-height  var(--acme-logo-sm)       1
…/Logo/Logo.module.css:41           --logo-height  var(--acme-icon-slot…     1
…/src/tokens/brand.css:17           --brand-red    #990100                   1
…/src/tokens/brand.css:18           --brand-rose   #ecdbdb                   1
…/src/tokens/brand.css:19           --brand-paper  #fdfaf1                   2
…/src/tokens/brand.css:20           --brand-white  #ffffff                   1  --acme-color-on-accent
… and 39 more

WCAG 1.4.3 contrast                               pairs  in the system  in the app
------------------------------------------------  -----  -------------  ----------
pass                                                107             97          10
fail                                                  3              3           0
exempt: an inactive control is not asked to pass      7              7           0
not measurable                                       17             17           0
text over media, where no ratio exists                5              —           —

Contrast failures (3)
where                        selector                  text on surface                   light   dark  needs  fails
---------------------------  ------------------------  --------------------------------  -----  -----  -----  -----
…/react/dist/index.css:2559  .acme-ImageCarousel__co…  --acme-text-on-media on --acme-…   2.60  19.88    4.5  light
…/react/dist/index.css:2782  .acme-VideoPlayer__start  --acme-text-on-media on --acme-…   2.60  19.88    4.5  light
…/react/dist/index.css:530   .acme-Chip__variant-soft  --acme-text-accent on --acme-ac…   6.67   4.39    4.5  dark

Install

Node 20 oder neuer. Ein Befehl, nichts zu klonen:

claude mcp add --scope user dsbridge -- npx -y github:blumaa/dsbridge

--scope user schreibt ~/.claude.json, sodass der Server in jedem Repository verfügbar ist, ohne in einem davon installiert zu sein. Keine Hooks, nichts, das von selbst läuft, nichts, das der verbrauchenden App hinzugefügt wird. Starten Sie die Sitzung neu und claude mcp list sollte sie als verbunden anzeigen.

Der erste Lauf klont dieses Repository und kompiliert es – das prepare-Skript baut bei der Installation, weshalb dist/ nicht eingecheckt ist. Spätere Läufe kommen aus dem npx-Cache. Um eine neue Version zu erhalten, leeren Sie ihn: npx clear-npx-cache.

Jeder MCP-Client funktioniert. Der Server spricht stdio und der Befehl lautet npx -y github:blumaa/dsbridge.

Um daran zu arbeiten statt es nur zu verwenden:

git clone git@github.com:blumaa/dsbridge.git
cd dsbridge && pnpm install
claude mcp add --scope user dsbridge -- node "$PWD/dist/server.js"

Related MCP server: GDS MCP

Use

Zwei Werkzeuge. Beide akzeptieren einen optionalen path und verwenden standardmäßig das Arbeitsverzeichnis.

Tool

Returns

design_system_usage

Der obige Bericht: eine Tabelle pro Frage, zehn Zeilen in jeder Liste

design_system_drift

Derselbe Bericht mit hundert Zeilen in jeder Liste statt zehn, und auf Anfrage bis zu fünfhundert

Fragen Sie in Worten nach einem von beiden. „Wo weicht diese App vom Designsystem ab?“ erreicht das zweite.

Es wird nichts geschrieben. Die App wird gelesen und genau so belassen, wie sie vorgefunden wurde, und der Bericht ist die vollständige Antwort – es gibt keine Datei, die danach geöffnet werden muss.

What it measures

Jeder geschriebene Wert und jede gerenderte Komponente, sortiert danach, woher sie stammt: vom Designsystem, von etwas, das die App selbst benannt hat, oder von nichts.

  • Werte – wie viele über ein System-Token, über ein von der App deklariertes Token und über keines von beiden kamen, wobei die von Hand geschriebenen danach aufgeschlüsselt werden, wovon sie Werte sind. Eine Farbskala, die niemand erreichen kann, ist eine andere Aufgabe als eine Abstandsskala, die niemand verwendet hat.

  • Komponenten – wie viele Arten die App aus dem System rendert, wie viele eigene sind und wie viele von anderswo stammen. Von den eigenen: welche das System bereits unter diesem Namen mitliefert und welche in es übergehen könnten – eine Komponente, deren Datei nichts außer dem System, React und einem Stylesheet importiert, hält nichts von dieser App fest.

  • Tokens – deklariert, gelesen, von der Marke der App neu ausgerichtet, von der App neben einem bestehenden deklariert oder von niemandem gelesen und deklariert, was eine defekte Referenz ist. Zwei Tokens zählen nur dann als ein Wert, wenn sie für dieselbe Art von Sache gelesen werden: Auf einem Acht-Punkte-Raster enthalten ein Abstand und eine Höhe beide 8px, ohne dass sie dasselbe bedeuten.

  • Kontrast – jedes Text- und Hintergrundpaar, das die App rendern kann, aufgelöst unter der eigenen Marke der App in hell und dunkel, gegen WCAG 1.4.3 und 1.4.11, und aufgeteilt danach, wessen Stylesheet das Paar geschrieben hat.

Nichts wird verworfen, weil es schwierig ist. Text über einem Verlauf oder einem Bild wird separat gemeldet, und ein Paar, das nicht aufgelöst werden kann, wird mit dem Grund gemeldet. Inaktive Steuerelemente werden als ausgenommen angezeigt, statt gegen die App zu zählen, weil WCAG nicht verlangt, dass sie bestehen.

No configuration

Es gibt keine Konfigurationsdatei und nichts zu benennen. Das Designsystem wird anhand seiner Form gefunden: Das Tokens-Paket ist die installierte Abhängigkeit, die die meisten Custom Properties deklariert, und das Komponentenpaket ist das Familienmitglied, das sie nur ausgibt. Jedes Designsystem, jede App.

Development

pnpm verify   # build, typecheck, test

Tests laufen gegen Fixture-Apps unter src/__fixtures__, einschließlich ihrer node_modules, die absichtlich eingecheckt sind – wie ein Paket seine Exporte angibt, ist das, was getestet wird.

License

MIT

This server cannot be installed

RayrunBuild, deploy, and operate MCP servers without becoming an infrastructure team.ray.runAd

Maintenance

ActivityMaintained
ResponsivenessSyncing

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

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

Related MCP Connectors

Related MCP Servers

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/blumaa/dsbridge'

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