designer-skill-mcp — MCP-сервер для Claude Code: установка и суть
MCP-сервер помогает ИИ-агенту проектировать интерфейсы: подбирает гайдлайны по описанию задачи и прогоняет код через статический фильтр. Ключ API не требуется.
claude mcp add designer-skill-mcp -- npx -y @pymodel/designer-skill-mcpЧто делает designer-skill-mcp
Сервер добавляет в агент 15 инструментов для фронтенда и UX. Сначала инструмент get_preflight_brief собирает контекст задачи, а dispatch_intent переводит абстрактные фразы вроде «сделай поярче» в чёткие дизайнерские действия. Внутри заложено 50 справочных руководств. Они делятся на 24 базовых гайда по типографике и доступности плюс 26 готовых сценариев по формам или локализации.
Для финальной проверки кода вызывается инструмент review_and_gate с 44 правилами. Он отлавливает визуальный мусор и структурные ошибки. При этом успешный статический аудит не отменяет ручную проверку отрисованного экрана в браузере.
Инструмент работает локально через stdio. Для запуска требуется Node.js версии 22 или новее. Никаких сторонних аккаунтов или платных ключей подключать не нужно.
Какие задачи решает
- разобрать размытые пожелания к макету и перевести их в правила вёрстки
- проверить компонент по 44 статическим правилам перед коммитом
- подобрать практические рекомендации по типографике и доступности интерфейса
- найти ошибки в разметке форм и адаптивных экранов
Примеры запросов агенту
- Оцени оформление нашей формы авторизации через
designer-skill-mcpи вызовиreview_and_gate - Пользователь просит сделать карточку товара строже: разбери намерение через
dispatch_intentи покажи нужные референсы - Собери контекст для редизайна таблицы данных с помощью
get_preflight_brief
Как установить designer-skill-mcp
Командой платформы
claude mcp add designer-skill-mcp -- npx -y @pymodel/designer-skill-mcpКомандой платформы
codex mcp add designer-skill-mcp -- npx -y @pymodel/designer-skill-mcpФайл настроек
{
"mcpServers": {
"designer-skill-mcp": {
"command": "npx",
"args": [
"-y",
"@pymodel/designer-skill-mcp"
]
}
}
}Файл настроек
{
"servers": {
"designer-skill-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@pymodel/designer-skill-mcp"
]
}
}
}Командой платформы
gemini mcp add designer-skill-mcp npx -y @pymodel/designer-skill-mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о designer-skill-mcp
Как установить designer-skill-mcp в Claude Code?
Выполните команду claude mcp add designer-skill-mcp -- npx -y @pymodel/designer-skill-mcp.
Что делает designer-skill-mcp?
Он предоставляет 15 MCP-инструментов, которые переводят абстрактные пожелания в дизайнерские правила, выдают встроенные UX-руководства и фильтруют код через 44 статических теста.
Нужен ли API-ключ для запуска сервера?
Нет, сервер запускается локально без ключей API, но требует среду Node.js версии не ниже 22.
