Подключи MCP UI-библиотеки (shadcn/Mantine) — и агент собирает страницы из реальных компонентов.
Описание
К агенту подключается MCP конкретной UI-библиотеки (например, shadcn/Mantine). Это даёт агенту знание о компонентах библиотеки и резко повышает качество верстки.
Предусловия
- В проекте используется поддерживаемая UI-библиотека (shadcn, Mantine и т. п.)
- MCP библиотеки установлен и сконфигурирован (см. UC-007 · MCP для stateful задач)
Постусловия / гарантия успеха
- Агент собирает интерфейсы из реальных компонентов библиотеки, а не «выдуманного» HTML/CSS
- Снижается потребность в ручной правке стиля
Основной сценарий
- Разработчик подключает MCP UI-библиотеки
- Ставит задачу типа «собери лендинг по такому-то референсу с использованием библиотеки X»
- Агент достаёт описание нужных компонентов через 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-библиотека — оптимальная комбинация: визуал из референса, компоненты из вашей системы.