Design System Extractor MCP
mcp-design-system-extractor
Сервер MCP достает из Storybook сведения о компонентах и дизайн-токены, анализирует CSS. Подключение одной командой claude mcp add
- 70 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Читает данные вашего Storybook
- Не генерирует истории
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/mcp-design-system-extractorОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Читает данные вашего Storybook
- Не генерирует истории
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Design System Extractor MCP дает агенту сведения о компонентах и дизайн-токены из Storybook, включая анализ CSS. Подключение к Claude Code: `claude mcp add design-system npx mcp-design-system-extractor@latest`, глобальная установка `npm install -g mcp-design-system-extractor`. Версия 1.2.0 от 27.07.2026, лицензия MIT.
Для кого. Для разработчиков, которые ведут дизайн-систему в Storybook и хотят, чтобы агент знал ее компоненты и токены.
Подходит, если
- Агент должен знать компоненты вашей дизайн-системы
- Нужно достать токены из Storybook
- Нужен анализ CSS компонентов
Не подходит, если
- Нет Storybook в проекте
- Нужна генерация историй: сервер читает, а не создает
Пример запроса к агенту
Достань из нашего Storybook список компонентов с вариантами и токены цвета, затем подбери для формы входа готовыеMCP
- Транспорт
- stdio
- Авторизация
- не нужна
Ограничения
Сервер читает данные вашего Storybook, поэтому доступ минимальный: проверьте адрес, к которому он подключается. Он извлекает информацию, но не генерирует истории.
Как отключить. Удалите скилл из каталога агента или плагин через менеджер плагинов.
Частые вопросы
Что делает сервер?
Достает из Storybook сведения о компонентах и дизайн-токены и анализирует CSS.
Как подключить?
claude mcp add design-system npx mcp-design-system-extractor@latest.
Создает ли он истории?
Нет, он только читает данные Storybook.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыStorybook MCP
storybook-mcp
Сервер MCP документации и компонентов Storybook для агента. Запуск через npx, Chromium ставится при первом запуске в фоне
designlang
designlang (design-extract)
CLI и MCP-сервер, который читает готовый сайт и достает из него дизайн-систему: токены DTCG, конфиг Tailwind, переменные Figma и брендбук
Скилл и CLI, которые снимают с публичного сайта цвета, шрифты, отступы, скругления и тени и сохраняют их как токены JSON и CSS
Inspo
inspo
Сервер MCP со справочником реальных рабочих сайтов, по которым агент изучает дизайн до написания интерфейса. Брать приемы, не копировать страницы
Story UI
story-ui
Генерация историй Storybook с ИИ для любого фреймворка и дизайн-системы, есть сервер MCP. Нужен ключ Anthropic, OpenAI или Gemini, код уходит поставщику
MCP-сервер и плагин для сборки интерфейса с агентом: курируемые дизайн-системы, промпты для UI и варианты верстки
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| Design System Extractor MCP (эта запись) | нет | не нужна | 70 | |
| Story UI | нет | 234 | генерация историй Storybook с ИИ, нужен ключ поставщика | |
| Storybook MCP | нет | не нужна | 46 | документация и компоненты Storybook для агента |
Коротко о README
README описывает сервер MCP, который извлекает из Storybook компоненты и токены. Лицензия MIT.