Skip to main content
Glama
Sign In
deenesjakoruzh
dsbridge

dsbridge

by blumaa
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

dsbridge

任意のアプリについて1つの質問に答える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 以降。1つのコマンドで、クローンは不要:

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

使用

2つのツールがあります。どちらもオプションの path を受け取り、デフォルトは作業ディレクトリです。

Tool

Returns

design_system_usage

上記のレポート: 質問ごとにテーブル、各リストに10行

design_system_drift

同じレポートで、各リストの行数が10ではなく100、リクエストにより最大500

どちらかを言葉で尋ねます。「このアプリはデザインシステムからどこで逸脱していますか?」 と尋ねると2番目のツールに到達します。

どこにも書き込まれません。アプリは読み取られ、見つかったままの状態で残され、レポートがすべての答えです — 後で開くファイルはありません。

測定内容

書き込まれたすべての値とレンダリングされたすべてのコンポーネントを、その由来(デザインシステム、アプリ自身が名付けたもの、または何もない)で分類します。

  • 値 — システムトークン、アプリが宣言したトークン、どちらでもないものを経由して来た数。手書きで書かれたものは、何の値であるかによって分類されます。誰も到達できないカラースケールは、誰も使わなかったスペーシングスケールとは異なる仕事です。

  • コンポーネント — アプリがシステムからレンダリングする種類の数、独自のものの数、および他の場所から来たものの数。アプリ独自のもののうち、システムが同じ名前で既に提供しているものと、システムに移行できるもの — ファイルがシステム、React、スタイルシートのみをインポートするコンポーネントは、このアプリの何も保持しません。

  • トークン — 宣言されたもの、読み取られたもの、アプリのブランドによって再指定されたもの、既存のものと並んでアプリが宣言したもの、または誰にも読み取られず宣言されなかったもの(壊れた参照)。2つのトークンが同じ種類のものに対して読み取られた場合のみ、1つの値として数えられます: 8ポイントグリッドでは、スペーシングと高さの両方が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