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 参数，默认使用工作目录。

工具

返回内容

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
    ResponsivenessOutdated data

    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