mcp-design-system-extractor — MCP-сервер для Claude Code
Подключает агента к инстансу Storybook и забирает разметку, CSS-переменные и метаданные компонентов. Пригодится при вёрстке интерфейса по готовой дизайн-системе.
claude mcp add --env STORYBOOK_URL=<STORYBOOK_URL> --env NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> --env DEBUG=<DEBUG> --transport stdio mcp-design-system-extractor -- npx -y mcp-design-system-extractorЧто делает mcp-design-system-extractor
Сервер связывается со Storybook по адресу из переменной STORYBOOK_URL, где по умолчанию выставлен http://localhost:6006. Для рендеринга динамических элементов используется Puppeteer. Поэтому в системе обязателен рабочий браузер Chrome или Chromium.
Внутри заложено девять инструментов. Они умеют фильтровать компоненты по категориям или назначению, извлекать чистый HTML нужной истории без служебных стилей витрины и анализировать вложенные зависимости. По умолчанию выгрузка HTML запускается как фоновая задача в очереди, статус которой опрашивается через job_status.
Токены дизайна собираются напрямую из темы и связанных CSS-файлов. Без Chrome или Chromium в системе Puppeteer завершит выполнение с ошибкой.
Какие задачи решает
- Выгрузить чистый HTML конкретной истории компонента из Storybook
- Собрать дизайн-токены цветов, отступов и шрифтов из CSS
- Найти компоненты в каталоге по назначению или имени
- Проверить зависимости и вложенность компонентов перед сборкой экрана
Примеры запросов агенту
- Покажи список всех компонентов из Storybook в компактном виде
- Найди в витрине компоненты для ввода данных и покажи их варианты
- Забери HTML для компонента
button--primaryвместе со стилями
Как установить mcp-design-system-extractor
Командой платформы
claude mcp add --env STORYBOOK_URL=<STORYBOOK_URL> --env NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> --env DEBUG=<DEBUG> --transport stdio mcp-design-system-extractor -- npx -y mcp-design-system-extractorВместо <…> подставьте свои значения
Командой платформы
codex mcp add mcp-design-system-extractor --env STORYBOOK_URL=<STORYBOOK_URL> --env NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> --env DEBUG=<DEBUG> -- npx -y mcp-design-system-extractorВместо <…> подставьте свои значения
Файл настроек
{
"mcpServers": {
"mcp-design-system-extractor": {
"command": "npx",
"args": [
"-y",
"mcp-design-system-extractor"
],
"env": {
"STORYBOOK_URL": "<STORYBOOK_URL>",
"NODE_TLS_REJECT_UNAUTHORIZED": "<NODE_TLS_REJECT_UNAUTHORIZED>",
"DEBUG": "<DEBUG>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"servers": {
"mcp-design-system-extractor": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"mcp-design-system-extractor"
],
"env": {
"STORYBOOK_URL": "<STORYBOOK_URL>",
"NODE_TLS_REJECT_UNAUTHORIZED": "<NODE_TLS_REJECT_UNAUTHORIZED>",
"DEBUG": "<DEBUG>"
}
}
}
}Вместо <…> подставьте свои значения
Командой платформы
gemini mcp add -e STORYBOOK_URL=<STORYBOOK_URL> -e NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> -e DEBUG=<DEBUG> mcp-design-system-extractor npx -y mcp-design-system-extractorВместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о mcp-design-system-extractor
Как установить mcp-design-system-extractor в Claude Code?
Выполните команду регистрации: claude mcp add mcp-design-system-extractor -- npx -y mcp-design-system-extractor. Если Storybook запущен на нестандартном адресе или требует пропуска проверки SSL, передайте параметры: `claude mcp add --env STORYBOOK_URL=<STORYBOOK_URL> --env NODE_TLS_REJECT_UNAUTHORIZED=<NODE_TLS_REJECT_UNAUTHORIZED> --env DEBUG=<DEBUG> --transport stdio mcp-design-system-extractor -- npx -y mcp-design-system-extractor`.
Что делает mcp-design-system-extractor?
Он даёт модели прямой доступ к работающему Storybook. Ассистент считывает структуру компонентов, забирает готовый HTML с классами и проверяет дизайн-токены без ручного переключения в браузер.
Зачем серверу нужен локальный Chrome?
Инструмент запускает headless Chrome через Puppeteer, чтобы полностью отрендерить клиентский JavaScript внутри витрины. Без Chromium извлечь итоговое дерево элементов не удастся.
