MCP-сервер

ИИ-агенты вписывают #3366ff и 12px прямо в компоненты: они не знают ваших дизайн-токенов. MCP-сервер dsgraph даёт им эти токены. Прежде чем вписать значение, агент спрашивает, какой токен его хранит, и подставляет токен. Ещё сервер умеет показать любой токен, вывести список токенов и сравнить две версии пакета перед обновлением.

Сервер работает на вашем компьютере рядом с агентом и только читает. Он понимает файлы DTCG (с темами), JSON токенов с value и type и CSS-переменные — из папки проекта, пакета npm или репозитория на GitHub.

Подключение

Выберите, где лежат токены и каким агентом вы пользуетесь, и вставьте то, что появится ниже, туда, куда указано.

Токены

Папка с файлами токенов: DTCG, резолвер, JSON токенов или CSS.

Агент

Выполните в папке проекта. Добавьте --scope project, чтобы поделиться настройкой с командой через .mcp.json в репозитории.

claude mcp add dsgraph -- npx -y @dsgraph/mcp ./tokens

После этого начните новый чат: у агента появятся шесть инструментов, их названия говорят сами за себя. Если токены лежат в нескольких местах, подключите сервер для каждого под своим именем, например dsgraph-brand и dsgraph-product.

О чём спросить агента

Называть инструменты не нужно. Просите так же, как попросили бы коллегу:

«Собери карточку настроек. Используй наши дизайн-токены, никаких цветов и отступов в коде».
«Какой токен у #3366ff? И что ближе всего к 14px?»
«Замени захардкоженные цвета в Button.tsx на токены».
«Как выглядит color.text.muted в тёмной теме и что его использует?»
«Обновляем @scope/tokens с 2.4 до 3.0. Что сломается в src?»
«Проверь по нашим токенам стили, которые ты только что написал».
«Проверь наши токены на битые ссылки».

Инструменты

Инструмент	На что отвечает
`find_token`	Какой токен хранит этот цвет, размер, длительность или толщину шрифта. Сначала точные совпадения (для цвета текста — токены текста, для фона — токены фона), а если их нет — ближайшие значения: цвета по тому, насколько отличаются на вид, размеры — в пикселях
`get_token`	Один токен: значение в каждой теме, у каких токенов он берёт значение и какие используют его
`search_tokens`	Токены по части имени или по типу, со значениями
`describe_tokens`	Обзор: сколько токенов каждого типа, какие темы, основные группы
`check_styles`	Код, который агент только что написал (CSS, SCSS, JSX/TSX с классами Tailwind или объектами стилей, Vue, Svelte), или файл вашего проекта: какая доля значений взята из токенов, цвета и размеры, вписанные вручную, с токеном, который нужен вместо них, и переменные, которые устарели или которых нет
`compare_versions`	Что изменилось между двумя версиями, что сломается и какая версия нужна релизу — тот же отчёт, что в Token Diff. Если указать папку с кодом, покажет и места в вашем коде, которые сломаются или будут выглядеть иначе
`check_tokens`	Битые ссылки, ссылки по кругу, старый синтаксис, совпадающие имена

Что важно знать

Нужен Node.js 20 или новее. npx скачает сервер при первом запуске.
Файлы остаются на вашем компьютере. Сервер читает их на месте. Пакеты npm и репозитории GitHub загружаются так же, как их загрузил бы браузер.
Правки подхватываются сразу: локальные файлы перечитываются при каждом обращении.
dsgraph.config.json в папке, из которой запущен агент, тоже учитывается — например, чтобы задать слои или явно указать переименования.
Для приватных репозиториев GitHub серверу нужна переменная окружения GITHUB_TOKEN; в настройках MCP у агента есть место для переменных окружения.

Исходный код и подробности: packages/dsgraph-mcp.