Skip to main content
Glama
deenesjakoruzh
blumaa

dsbridge

by blumaa
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

dsbridge

모든 앱에 대해 한 가지 질문에 답하는 MCP 서버: 설치된 디자인 시스템과 앱 사이의 계약이 유지되고 있는가. 앱이 작성하는 모든 값과 렌더링하는 모든 컴포넌트는 출처 — 디자인 시스템, 앱이 스스로 붙인 이름, 또는 아무것도 아닌 것 — 와 앱 자체 브랜드가 대비에 미치는 영향에 따라 분류됩니다.

소비 앱 내부에서 평이한 언어로 질문하세요 — "check my design system usage" — 그러면 터미널에서 표 형태로 보고서를 받게 됩니다. 각 행마다 파일과 줄 번호가 함께 표시됩니다.

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를 받으며 기본값은 작업 디렉터리입니다.

Tool

Returns

design_system_usage

위 보고서: 질문당 표, 각 목록에 10행

design_system_drift

동일한 보고서이지만 각 목록에 10행 대신 100행, 요청 시 최대 500행

둘 중 하나를 말로 요청하세요. *"이 앱이 디자인 시스템에서 어디로 벗어나고 있나요?"*라고 하면 두 번째 도구가 호출됩니다.

아무 곳에도 기록되지 않습니다. 앱은 읽히고 발견된 그대로 남으며, 보고서가 전체 답변입니다 — 이후 열 파일이 없습니다.

측정 내용

작성된 모든 값과 렌더링된 모든 컴포넌트를 출처별로 분류합니다: 디자인 시스템, 앱이 스스로 이름을 붙인 것, 또는 아무것도 아닌 것.

  • 값 — 시스템 토큰을 통해, 앱이 선언한 토큰을 통해, 그리고 둘 다 아닌 경우를 통해 들어온 값의 수를, 손으로 작성한 값은 어떤 값인지에 따라 세분화하여 보여줍니다. 아무도 도달할 수 없는 색상 스케일은 아무도 사용하지 않은 간격 스케일과 다른 작업입니다.

  • 컴포넌트 — 앱이 시스템에서 렌더링하는 종류의 수, 자체 종류의 수, 그리고 다른 곳에서 가져온 종류의 수를 보여줍니다. 앱 자체의 것 중: 시스템이 이미 그 이름으로 제공하는 것과 시스템으로 옮길 수 있는 것 — 파일이 시스템, React 및 스타일시트만 가져오는 컴포넌트는 이 앱의 어떤 것도 보유하지 않습니다.

  • 토큰 — 선언된, 읽힌, 앱의 브랜드에 의해 다시 지정된, 기존 토큰과 함께 앱이 선언한, 또는 아무도 읽거나 선언하지 않은(깨진 참조) 토큰을 보여줍니다. 두 토큰이 같은 종류의 것에 대해 읽힐 때만 하나의 값으로 계산됩니다: 8포인트 그리드에서 간격과 높이는 둘 다 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