Skip to main content
Glama
deenesjakoruzh
blumaa

dsbridge

by blumaa
OverviewSchemaRelated ServersScoreDiscussions
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: GDS MCP

使用

两个工具。两者都接受可选的 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

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