Иконки, готовые компоненты, анимации и брендовые логотипы, которые ставятся в проект одной командой — или тянутся прямо из ИИ-агента через MCP.
Интерфейс — первое, что видит пользователь, и первое, по чему он судит о продукте. Еще недавно «сделать красиво» означало неделю верстки или дизайнера в штате. Сегодня компонент, анимация или иконка подтягиваются в проект одной командой из открытого источника. А если подключить эти источники через MCP, ИИ-агент (например, Claude Code) берет готовый код сам — не выдумывает разметку и несуществующие пропсы, а тянет проверенный компонент из источника.
Ниже я постарался описать восемь сервисов, которые всегда держу под рукой: компоненты и дизайн-система, анимации, иконки и SVG логотипов брендов. По каждому описал — что это, когда брать и как поставить в проект. В конце — как связать все это с ИИ-агентом через команды CLI и MCP.
Почему это работает
Три способа поставки, от самого ручного к самому автоматическому:
- Копипаст. Заходишь на сайт, берешь готовый код элемента (CSS, Tailwind или React) и вставляешь. Быстро, но руками.
- CLI. Одна команда ставит компонент вместе с зависимостями прямо в проект, в твою структуру папок. Это модель shadcn и всех совместимых с ним реестров.
- MCP. Агент в редакторе (Claude Code, Cursor и т.п.) сам ищет компонент в реестре источника и ставит его по описанию на человеческом языке. Главное тут не скорость, а точность — агент читает реальный компонент из реестра, а не сочиняет по памяти. Это лекарство от «AI slop» правдоподобного кода.
Компоненты и дизайн-система
1. shadcn/ui – база
База, на которой держится все остальное. Набор аккуратно сделанных компонентов, которые ты не тянешь как зависимость, а копируешь в проект и владеешь кодом (Open Code). Ставится через CLI, работает на React, TypeScript и Tailwind, по умолчанию идет на Base UI (Radix — в один флаг). Им пользуются OpenAI, Adobe и другие.
Поставить компонент: npx shadcn@latest add button
Сайт: https://ui.shadcn.com
2. 21st.dev – компоненты
Тысячи компонентов и шаблонов от сообщества под девизом «crafted, not AI slop»: отобранный, живой UI. Есть нормальные фильтры по типам — герои, фичи, формы, дашборды. Ставится через свой CLI (21st add button), умеет генерировать варианты через 21st AI и публиковать твои компоненты. Поиск по каталогу бесплатный, установка и генерация — с бесплатным лимитом, дальше Pro. Вручную full-free.
Сайт: https://21st.dev
3. uiverse.io – UI-элементы
Самая большая открытая библиотека мелких UI-элементов: кнопки, лоадеры, карточки, тумблеры, glassmorphism. Больше 7 000 элементов, все под лицензией MIT — бесплатно для личного и коммерческого. Код копируется как HTML/CSS, Tailwind, React или прямо в Figma. Сюда идешь, когда нужен один эффектный элемент, а не система.
Сайт: https://uiverse.io
4. Magic UI — анимации
150+ бесплатных анимированных компонентов и эффектов на React, TypeScript, Tailwind и Motion. Позиционируется как компаньон shadcn/ui и ставится тем же способом. Отдельно есть Magic UI Pro — 50+ готовых блоков и шаблонов под лендинги.
Сайт: https://magicui.design
5. Animate UI — движение из коробки
Полностью анимированные компоненты на React, TypeScript, Tailwind и Motion, которые раздаются через тот же shadcn CLI. То есть это еще один реестр, из которого ты ставишь готовое движение одной командой и правишь под себя.
Сайт: https://animate-ui.com
6. ⭐️ React Bits — интерактив (мой фаворит)
Открытая коллекция качественных анимированных и интерактивных React-компонентов: анимации текста, фоны, эффекты под запоминающиеся интерфейсы. Хорошо закрывает задачу «оживить главный экран», когда нужен характер, а не просто аккуратность.
Сайт: https://reactbits.dev
7. Hugeicons — иконки интерфейса
Большой набор иконок в нескольких стилях сразу: Stroke, Solid, Bulk, Twotone, Duotone в округлом, стандартном и остром начертании. Одна только категория Business — 409 иконок, редактирование — под 600. Отдаются как SVG, React-компоненты и иконочный шрифт (CDN), есть плагин для Figma. Часть иконок бесплатна, полный набор — только в Pro.
Сайт: https://hugeicons.com
8. theSVG — брендовые логотипы
6 000+ логотипов брендов и сервисов в SVG — то, чего в иконочных наборах обычно нет. Подключается через npm, React, Vue, Svelte, CLI и CDN. Сюда идешь за чистым логотипом технологии или интеграции.
Сайт: https://thesvg.org
Как связать все с кодом и MCP
Костяк — реестр shadcn. Magic UI и Animate UI совместимы с его CLI, поэтому ставятся той же командой из своих реестров:
npx shadcn add @<реестр>/<компонент>
Дальше подключаешь MCP, и агент перестает угадывать. Для shadcn это одна команда в проекте:
npx shadcn@latest mcp init --client claude
После этого в Claude Code или Cursor можно просить на человеческом языке: «покажи все компоненты в реестре shadcn», «добавь форму логина», «собери карточку из shadcn». Агент читает актуальный компонент из реестра — с правильными пропсами, зависимостями и CSS-переменными, — а не сочиняет по памяти.
Реестров можно подключить несколько сразу, включая приватные и именованные (@namespace). Значит, собственную дизайн-систему можно оформить как реестр и тянуть ее тем же способом — удобно, когда компоненты нужны всей команде.
У иконок и логотипов свои MCP-серверы: Hugeicons отдает @hugeicons/mcp-server, у theSVG тоже есть MCP. То есть агент ищет и ставит иконку или логотип, не выходя из редактора. У 21st.dev — свой CLI и MCP с теми же операциями: поиск, установка, генерация, публикация. uiverse и React Bits остаются в режиме копипаста — берешь элемент руками или просишь агента забрать код со страницы.
Как я это собираю
Рабочий конвейер под стек React / Next.js:
- Фундамент — shadcn/ui: дизайн-система, токены, базовые компоненты.
- Крупные блоки и секции — 21st.dev и Magic UI Pro: герои, фичи, прайсинги.
- Движение — Magic UI, Animate UI и React Bits: анимации, фоны, микроэффекты на главном экране.
- Иконки интерфейса — Hugeicons, логотипы брендов — theSVG.
- Сверху — агент с подключенными MCP: он ищет и ставит нужное по описанию, а я собираю и правлю.
Важная оговорка: сервисы дают детали, а интерфейс собирается на вкус. «AI slop» лечится не количеством библиотек, а отбором — берешь то, что держит единый стиль, и выкидываешь лишнее. Инструменты просто убирают недели рутины и прокрастинации между идеей и рабочим экраном.
Ссылки
- shadcn/ui — https://ui.shadcn.com
- 21st.dev — https://21st.dev
- uiverse.io — https://uiverse.io
- Magic UI — https://magicui.design
- Animate UI — https://animate-ui.com
- React Bits — https://reactbits.dev
- Hugeicons — https://hugeicons.com
- theSVG — https://thesvg.org