pudge-ui — MCP-сервер для Claude Code: что делает и как установить
Передаёт агенту спецификации дизайн-системы pudge-ui с 93 скевоморфными компонентами в стиле 2000-х годов. Помогает собирать ретро-интерфейсы без ручного поиска документации.
claude mcp add pudge-ui -- npx -y @pudge-ui/mcp-serverЧто делает pudge-ui
Сервер открывает агенту доступ к библиотеке из 93 скевоморфных компонентов pudge-ui. Инструменты включают нечёткий поиск search_components и фильтрацию каталога по категориям через list_components. Базовые правила оформления агент запрашивает с помощью get_foundation. Для детального описания элементов он вызывает спецификации одиночных или связанных блоков через get_component и get_composition.
Все спецификации уже встроены в npm-пакет @pudge-ui/mcp-server. Сервер работает строго в режиме чтения: он не делает сетевых запросов и не пишет файлы на диск. Так как проект находится в стадии pre-1.0, для воспроизводимости окружения стоит зафиксировать точную версию пакета в конфигурации клиента.
Какие задачи решает
- найти спецификации регуляторов и кнопок в скевоморфном стиле 2000-х
- передать агенту базовые правила дизайн-системы pudge-ui
- выгрузить спецификацию готовой композиции вроде микшера
- подобрать аудиокомпоненты по ключевым словам через нечёткий поиск
Примеры запросов агенту
- Найди через
search_componentsвсе регуляторы громкости и покажи спецификацию дляrotary-encoder. - Запроси расширенные правила оформления через
get_foundationи спланируй блокaudio-mixer-strip. - Покажи список компонентов категории buttons из каталога pudge-ui.
Как установить pudge-ui
Командой платформы
claude mcp add pudge-ui -- npx -y @pudge-ui/mcp-serverКомандой платформы
codex mcp add mcp-server -- npx -y @pudge-ui/mcp-serverФайл настроек
{
"mcpServers": {
"mcp-server": {
"command": "npx",
"args": [
"-y",
"@pudge-ui/mcp-server"
]
}
}
}Файл настроек
{
"servers": {
"mcp-server": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@pudge-ui/mcp-server"
]
}
}
}Командой платформы
gemini mcp add mcp-server npx -y @pudge-ui/mcp-serverПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о pudge-ui
Как установить pudge-ui в Claude Code?
Выполните команду claude mcp add pudge-ui -- npx -y @pudge-ui/mcp-server.
Что делает MCP-сервер pudge-ui?
Он отдаёт агенту спецификации 93 компонентов и правила скевоморфного дизайна pudge-ui прямо во время диалога.
Делает ли сервер сетевые запросы при поиске компонентов?
Нет, все 93 спецификации упакованы прямо внутри пакета. Инструменты снабжены аннотацией readOnlyHint, сервер ничего не скачивает из сети и не сохраняет на диск.
