Skip to main content
Glama
deenesjakoruzh
blumaa

dsbridge

by blumaa
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

dsbridge

Un servidor MCP que responde a una pregunta sobre cualquier aplicación: ¿se mantiene el contrato entre el sistema de diseño que instaló y la aplicación? Cada valor que la aplicación escribe y cada componente que renderiza, ordenados por su origen — el sistema de diseño, un nombre que la aplicación se dio a sí misma, o nada en absoluto — y lo que la propia marca de la aplicación hace para contrastar.

Pregunta desde dentro de una aplicación consumidora, en lenguaje natural — "comprueba mi uso del sistema de diseño" — y recibe el informe en forma de tablas, en la terminal, con un archivo y una línea para cada fila.

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 o superior. Un solo comando, nada que clonar:

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

--scope user escribe ~/.claude.json, por lo que el servidor está disponible en todos los repositorios sin estar instalado en ninguno de ellos. Sin hooks, nada que se ejecute por sí solo, nada añadido a la aplicación consumidora. Reinicia la sesión y claude mcp list debería mostrarlo conectado.

La primera ejecución clona este repositorio y lo compila — el script prepare compila en la instalación, por eso dist/ no está confirmado. Las ejecuciones posteriores provienen de la caché de npx. Para obtener una nueva versión, límpiala: npx clear-npx-cache.

Cualquier cliente MCP funciona. El servidor habla stdio y el comando es npx -y github:blumaa/dsbridge.

Para trabajar en ello en lugar de solo usarlo:

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

Dos herramientas. Ambas aceptan un path opcional y usan por defecto el directorio de trabajo.

Tool

Returns

design_system_usage

El informe anterior: una tabla por pregunta, diez filas en cada lista

design_system_drift

El mismo informe con cien filas en cada lista en lugar de diez, y hasta quinientas a petición

Pide cualquiera de las dos con palabras. "¿Dónde se está desviando esta aplicación del sistema de diseño?" llega a la segunda.

No se escribe nada en ningún sitio. La aplicación se lee y se deja exactamente como se encontró, y el informe es toda la respuesta — no hay ningún archivo que abrir después.

Qué mide

Cada valor escrito y cada componente renderizado, ordenados por su origen: el sistema de diseño, algo que la aplicación se nombró a sí misma, o nada en absoluto.

  • Valores — cuántos vinieron a través de un token del sistema, a través de un token que la aplicación declaró, y a través de ninguno, con los escritos a mano desglosados por qué son valores. Una escala de color a la que nadie puede acceder es un trabajo diferente de una escala de espaciado que nadie usó.

  • Componentes — cuántos tipos renderiza la aplicación del sistema, cuántos son propios y cuántos vienen de otros lugares. De los propios de la aplicación: cuáles ya los ofrece el sistema con ese nombre y cuáles podrían pasar a él — un componente cuyo archivo no importa nada más que el sistema, React y una hoja de estilos no retiene nada de esta aplicación.

  • Tokens — declarados, leídos, re-apuntados por la marca de la aplicación, declarados por la aplicación junto a uno existente, o leídos y declarados por nadie, lo que es una referencia rota. Dos tokens cuentan como un solo valor solo cuando se leen para el mismo tipo de cosa: en una cuadrícula de ocho puntos, un espaciado y una altura pueden tener ambos 8px sin significar lo mismo.

  • Contraste — cada par de texto y fondo que la aplicación puede renderizar, resuelto bajo la propia marca de la aplicación en claro y oscuro, contra WCAG 1.4.3 y 1.4.11, y dividido por qué hoja de estilos escribió el par.

Nada se descarta por ser difícil. El texto sobre un degradado o una imagen se informa por separado, y un par que no se puede resolver se informa con el motivo. Los controles inactivos se muestran como exentos en lugar de contarse en contra de la aplicación, porque WCAG no les exige que pasen.

Sin configuración

No hay archivo de configuración ni nada que nombrar. El sistema de diseño se encuentra por forma: el paquete de tokens es la dependencia instalada que declara la mayoría de las propiedades personalizadas, y el paquete de componentes es el miembro de la familia que solo las gasta. Cualquier sistema de diseño, cualquier aplicación.

Desarrollo

pnpm verify   # build, typecheck, test

Las pruebas se ejecutan contra aplicaciones de ejemplo en src/__fixtures__, incluidos sus node_modules, que se confirman a propósito — cómo un paquete declara sus exportaciones es lo que se está probando.

Licencia

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