Как подключить freema/mcp-design-system-extractor к Cursor (RU-инструкция)
Extracts component information from Storybook design systems. Provides HTML, styles, props, dependencies, theme tokens and component metadata for AI-powered design system analysis Ниже — пошаговая инструкция по установке и проверке работоспособности.
Шаг 1. Что вам понадобится
- Cursor последней версии (скачать).
- Node.js 20+ и npm в PATH (большинство серверов запускается через
npx).
Шаг 2. Открыть конфиг Cursor
Откройте файл ~/.cursor/mcp.json (создайте, если его нет). Для проектной конфигурации можно положить .cursor/mcp.json в корень репозитория — он применится только в этом workspace.
Шаг 3. Добавить MCP-сервер в конфиг
Скопируйте JSON-блок ниже в файл конфига. Если у вас уже есть другие MCP-серверы, добавьте новый ключ внутрь существующего mcpServers.
⚠️ Имя пакета ниже — это slug сервера, а не подтверждённое npm-имя. Замените на точное значение из README репозитория.
{
"mcpServers": {
"design-system-extractor": {
"command": "npx",
"args": [
"-y",
"design-system-extractor"
]
}
}
}Шаг 4. Перезапустить Cursor
Полностью закройте и снова откройте редактор (Cmd/Ctrl+Q, не просто закрыть окно). Простой reload иногда не подхватывает изменения mcp.json.
Шаг 5. Проверить, что сервер подключился
Откройте чат и спросите агента: «какие MCP-инструменты тебе сейчас доступны?» В ответе должны появиться тулзы из freema/mcp-design-system-extractor: .
Если тулзов нет — проверьте логи Cursor (View → Output → MCP Logs). Самые частые ошибки: опечатка в имени пакета, забытая переменная окружения, версия Node.js ниже 20.
Что попробовать дальше
Готовые промпты для freema/mcp-design-system-extractor в Cursor:
Альтернативные клиенты
freema/mcp-design-system-extractor также работает с: .