StyleKit — MCP-сервер для Claude Code: функции и установка
StyleKit даёт ИИ-агенту доступ к стилям, дизайн-токенам, рецептам компонентов и проверке UI-кода. Подключите его, чтобы сверять сгенерированный интерфейс с правилами выбранного стиля.
claude mcp add --transport http stylekit-mcp https://www.stylekit.top/mcpЧто делает StyleKit
Сервер ищет стили и публичные ресурсы, возвращает профили стилей, токены и рецепты компонентов с JSX. Он также подбирает команду npx shadcn add для темы и проверяет код на нарушения правил стиля, объясняя проблему и предлагая исправление. Инструменты работают только на чтение.
Проверка разбирает JSX и HTML-атрибуты классов, вызовы cn() и clsx(), а также шаблонные строки; учитывает префиксы вроде dark: и hover:. Для проверки динамических выражений результат может быть неопределённым, а правила не оценивают визуальное качество и доступность. Сервер запускается через npx или по HTTP; для Claude Code команда ниже использует локальный запуск через npx.
Какие задачи решает
- найти стиль по ключевым словам или категории
- получить дизайн-токены для выбранного стиля
- взять JSX-рецепт кнопки, карточки или поля ввода
- проверить UI-код на нарушения правил стиля
- получить команду установки темы через shadcn
Примеры запросов агенту
- Найди стиль с эффектом матового стекла и покажи рецепт кнопки.
- Проверь этот JSX на нарушения правил выбранного стиля и предложи исправления.
- Подбери команду
npx shadcn addдля темы этого стиля.
Как установить StyleKit
1Командой платформы: удалённый сервер
claude mcp add --transport http stylekit-mcp https://www.stylekit.top/mcp2Командой платформы
claude mcp add mcp -- npx -y stylekit-mcp1Командой платформы: удалённый сервер
codex mcp add mcp --url https://www.stylekit.top/mcp2Командой платформы
codex mcp add mcp -- npx -y stylekit-mcpФайл настроек
{
"mcpServers": {
"mcp": {
"url": "https://www.stylekit.top/mcp"
}
}
}{
"mcpServers": {
"mcp": {
"command": "npx",
"args": [
"-y",
"stylekit-mcp"
]
}
}
}Файл настроек
{
"servers": {
"mcp": {
"type": "http",
"url": "https://www.stylekit.top/mcp"
}
}
}{
"servers": {
"mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"stylekit-mcp"
]
}
}
}1Командой платформы: удалённый сервер
gemini mcp add -t http mcp https://www.stylekit.top/mcp2Командой платформы
gemini mcp add mcp npx -y stylekit-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о StyleKit
Как установить StyleKit в Claude Code?
Выполните claude mcp add mcp -- npx -y stylekit-mcp. Claude Code запустит MCP-сервер через npx.
Что делает StyleKit?
Он помогает агенту искать стили, получать токены и рецепты компонентов, а также проверять UI-код на соответствие правилам стиля.
Что проверяет линтер StyleKit?
Он находит нарушения правил и возвращает пояснение с исправлением. Для динамических выражений результат может быть неопределённым; проверка не оценивает визуальное качество или доступность.
