Skip to main content
Glama
Sign In
deenesjakoruzh
dsbridge

dsbridge

by blumaa
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

dsbridge

MCP-сервер, который отвечает на один вопрос о любом приложении: соблюдается ли контракт между установленной дизайн-системой и приложением. Каждое значение, которое записывает приложение, и каждый компонент, который оно рендерит, отсортированы по источнику: дизайн-система, имя, которое приложение дало себе, или ничего, — и что делает собственный бренд приложения для контраста.

Спрашивайте изнутри потребляющего приложения на простом языке — «проверь моё использование дизайн-системы» — и получайте отчёт в виде таблиц в терминале, с файлом и строкой для каждой строки.

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

Установка

Node 20 или новее. Одна команда, ничего клонировать не нужно:

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

--scope user записывает ~/.claude.json, поэтому сервер доступен в каждом репозитории без установки в каком-либо из них. Никаких хуков, ничего, что запускается само по себе, ничего не добавляется в потребляющее приложение. Перезапустите сеанс, и claude mcp list должен показать его подключённым.

Первый запуск клонирует этот репозиторий и компилирует его — скрипт prepare собирает при установке, поэтому dist/ не закоммичен. Последующие запуски берутся из кэша npx. Чтобы получить новую версию, очистите его: npx clear-npx-cache.

Работает любой MCP-клиент. Сервер говорит по stdio, и команда — npx -y github:blumaa/dsbridge.

Чтобы работать над ним, а не просто использовать:

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: Designesy

Использование

Два инструмента. Оба принимают необязательный path и по умолчанию используют рабочую директорию.

Tool

Returns

design_system_usage

Отчёт выше: таблица на каждый вопрос, по десять строк в каждом списке

design_system_drift

Тот же отчёт со ста строками в каждом списке вместо десяти и до пятисот по запросу

Попросите любой из них словами. «Где это приложение отклоняется от дизайн-системы?» обращается ко второму.

Ничего нигде не записывается. Приложение читается и остаётся точно таким, каким было найдено, а отчёт — это весь ответ: после него не нужно открывать никакой файл.

Что он измеряет

Каждое записанное значение и каждый отрендеренный компонент, отсортированные по источнику: дизайн-система, что-то, что приложение назвало само, или ничего.

  • Значения — сколько прошло через системный токен, через токен, объявленный приложением, и через ни один из них, причём написанные вручную разбиты по тому, значениями чего они являются. Цветовая шкала, до которой никто не может добраться, — это другая задача, чем шкала отступов, которую никто не использовал.

  • Компоненты — сколько видов приложение рендерит из системы, сколько своих собственных и сколько из других источников. Из собственных: какие система уже поставляет под этим именем, а какие могли бы перейти в неё — компонент, файл которого импортирует только систему, React и таблицу стилей, не хранит ничего от этого приложения.

  • Токены — объявленные, прочитанные, перенаправленные брендом приложения, объявленные приложением рядом с существующим, или не прочитанные и не объявленные никем, что является битой ссылкой. Два токена считаются одним значением только тогда, когда они читаются для одного и того же вида: на восьмиточечной сетке отступ и высота будут оба равны 8px, не означая одного и того же.

  • Контраст — каждая пара текста и фона, которую приложение может отрендерить, вычисленная под собственным брендом приложения в светлой и тёмной темах, по стандартам WCAG 1.4.3 и 1.4.11, и разделённая по тому, чья таблица стилей написала пару.

Ничего не отбрасывается из-за сложности. Текст поверх градиента или изображения сообщается отдельно, а пара, которую невозможно вычислить, сообщается с причиной. Неактивные элементы управления показываются как освобождённые, а не засчитываются против приложения, потому что WCAG не требует, чтобы они проходили.

Без конфигурации

Нет файла конфигурации и нечего называть. Дизайн-система находится по форме: пакет токенов — это установленная зависимость, которая объявляет больше всего пользовательских свойств, а пакет компонентов — это член семейства, который только их расходует. Любая дизайн-система, любое приложение.

Разработка

pnpm verify   # build, typecheck, test

Тесты запускаются на фикстурных приложениях в src/__fixtures__, включая их node_modules, которые намеренно закоммичены — то, как пакет объявляет свои экспорты, и есть предмет тестирования.

Лицензия

MIT

Tool Schema Changelog

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

Loading tool schema changelog…

    This server cannot be deployed

    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    Maintenance

    ActivityStale
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers

    • Designesy

      LE-VAI
      A
      license
      A
      quality
      B
      maintenance
      Enables AI agents to score live URLs against a deterministic design contract, validate DTCG tokens and Lottie animations, audit accessibility, and retrieve design-system contracts, catalogs, and review rubrics.
      17
      9 npm
      MIT

    • Design GL

      talkstream
      A
      license
      Not graded
      quality
      B
      maintenance
      Enables AI coding agents to audit rendered web pages for design and UI defects by measuring geometry, styles, contrast and motion in a local browser and judging them against evidence-tiered rules. Findings come back as short, fixable items expressed in the project's own design tokens, while only sanitized numeric measurements leave the machine.
      Apache 2.0

    • ds-mcp-server

      flowcz59
      A
      license
      A
      quality
      C
      maintenance
      Enables LLM agents to search, resolve and audit DTCG design tokens — finding the token behind an intent or a hard-coded color/size, checking naming grammar, auditing CSS for hard-coded or unknown tokens, arbitrating semver, and previewing token additions as JSON Patch diffs. Writes are gated behind explicit confirmation plus an opt-in flag, so every change arrives as a reviewable proposal rather than an edit.
      7
      MIT