MCP UI-библиотек: shadcn и Mantine в Claude Code

Подключи MCP UI-библиотеки (shadcn/Mantine) — и агент собирает страницы из реальных компонентов.

Описание

К агенту подключается MCP конкретной UI-библиотеки (например, shadcn/Mantine). Это даёт агенту знание о компонентах библиотеки и резко повышает качество верстки.

Предусловия

В проекте используется поддерживаемая UI-библиотека (shadcn, Mantine и т. п.)
MCP библиотеки установлен и сконфигурирован (см. UC-007 · MCP для stateful задач)

Постусловия / гарантия успеха

Агент собирает интерфейсы из реальных компонентов библиотеки, а не «выдуманного» HTML/CSS
Снижается потребность в ручной правке стиля

Основной сценарий

Разработчик подключает MCP UI-библиотеки
Ставит задачу типа «собери лендинг по такому-то референсу с использованием библиотеки X»
Агент достаёт описание нужных компонентов через MCP
Собирает страницу из реальных компонентов библиотеки
Разработчик уточняет визуальные детали

Раскрытый альбом с ровными рядами одинаковых готовых деталей; медоед вынимает одну — она крупнее остальных и выделена янтарным. Надпись в кадре: «Типовой узел». — MCP отдаёт агенту описания реальных компонентов — он берёт готовый, а не сочиняет свой

Расширения / альтернативные потоки

2a. Можно подавать референсные скриншоты для конкретики визуала

Исключения и риски

Бизнес-правила и ограничения

Привязка к конкретной UI-библиотеке проекта обязательна для серьёзной работы
«Сделай красиво» — это не задача; задача — «сделай в стилистике системы дизайна X»

Примечания

Дополняется типизацией компонентов (TypeScript-пропсы): агент видит ограничения и точнее собирает разметку.

Слева на стене приколот лист с макетом из плоских прямоугольников, справа стеллаж с одинаковыми деталями, между ними медоед: янтарная линия связывает элемент макета с деталью на полке. Надпись в кадре: «Референс и библиотека». — Скриншот задаёт визуал, библиотека — из чего его собирать; без второго получается красиво и не интегрируется

Частые вопросы

Какие UI-библиотеки имеют MCP?+

На начало 2026: shadcn/ui, Mantine, Chakra UI, частично Material UI. Список растёт. Если вашей библиотеки нет — можно написать свой MCP-сервер (формат документирован).

Это работает без MCP, только через AGENTS.md?+

Хуже, но работает. Можно в AGENTS.md перечислить компоненты и их пропсы — агент будет ориентироваться. Но MCP даёт всегда актуальное описание + примеры использования. Для serious UI-проекта — лучше MCP.

Универсальные «дизайн-генераторы» — это альтернатива?+

Нет. Cloud Design и подобные дают визуально красивый, но непригодный к интеграции результат. Привязка к стеку обязательна.

Можно ли подавать референсные скриншоты?+

Да. Скриншот + MCP UI-библиотека — оптимальная комбинация: визуал из референса, компоненты из вашей системы.

Внедрим то же самое в вашей команде

Каталог показывает, как работают агентные практики. Дальше — разбор ваших процессов, оценка эффекта и внедрение: обучение команды, проект под ключ или AI-native команда на аутсорс.

Как заставить агент верстать в стиле вашей дизайн-системы?