Как делать дизайн и UI, если вы вообще в нем ничего не понимаете
Вчера написал пост про страдания из-за того, что приходится брать ответственность не только за код, но и за дизайн. И для меня это проблема. Потому что когда вайбкодишь решение, то на первое время можно откинуть экзистенциальные вещи типа чистоты кода, безопасности, багов и ориентироваться на результат - работает или нет.
Но когда дело касается визуала и удобства пользования, начинаются нюансы. Первое, что выдает тебе ИИ на запрос «создай сайт», - это сине-фиолетовый градиент, шрифт Inter и типичный скелет лендинга.
Кстати, в этом ИИ-слопе сайтов виноват популярный CSS-фреймворк Tailwind, они еще в 2019 году сделали индиго дефолтным цветом кнопок в своих компонентах, туториалы разошлись по всему гитхабу, и модели выучили эту медиану.
Создатель Tailwind Адам Уотан позже публично признал, что выбрал индиго не из дизайн-соображений, а как нейтральный плейсхолдер для демок. И этот оттенок лаванды уже прозвали "VibeCode Purple".
Ну а дальше начинается круговорот ИИ-слопа в природе веб-дизайна. Навайбкоженные сайты попадают в сеть, следующее поколение моделей учится уже на них, среднее самоусиливается. Плюс агент дополнительно сужает выбор до того, что проще сверстать.
И как же разорвать этот пурпурный круг, если нет дизайнерской насмотренности? Вот что я скормил своему агенту и себе:
— ui-skills.com - каталог скиллов по дизайн-инженерии для агентов. Внутри скиллы от shadcn, Anthropic, Эмиля Ковальски и других. Подключаешь через CLI или MCP, и агент начинает верстать по правилам, а не по своим генерическим привычкам
— ui.shadcn.com - стандарт индустрии, фундамент дизайн-систем половины современного веба. Код компонентов кладется прямо в твой проект, поэтому агенты редактируют их свободно и знают эту библиотеку лучше любой другой. Бесплатно
— coss.com/ui - свежая библиотека кучи компонентов поверх базового UI, заточена в том числе под ИИ-приложения. Опенсорс
— designsystemchecklist.com - чеклист. Список того, что должно быть закрыто в дизайн-системе, от цветов до документации. Скармливаешь агенту как рамку качества, по которой он проверяет твой фронтенд
— beautifului.dev - библиотека компонентов специально под ИИ-интерфейсы. Чаты, стриминг-лоадеры, блоки кода, карточки подтверждения действий агента, визуализация воркфлоу. Копируешь и вставляешь. Бесплатно
— beui.dev - анимированные компоненты для React и Next.js на Framer Motion и Tailwind. Модалки, кнопки, табы, тосты, доки. Ставится через shadcn CLI. База опенсорс, есть Pro за деньги
— rareui.com - небольшая коллекция прикольных анимированных React-компонентов. Папки, гравитация букв, жидкий шар. Каждый компонент один файл, ставится одной командой. Полностью бесплатно
— transitions.dev - каталог готовых переходов и микроанимаций. Открытие модалок, скелетоны, анимация цифр, ресайз карточек. Код копируешь или подключаешь агенту как отдельный skill. База бесплатная, остальное в Pro
— emilkowal.ski/ui/you-dont-need-animations - эссе Эмиля Ковальски (автор библиотек sonner и vaul) о том, когда анимации вредят. Например, что частые действия лучше не анимировать и все держать быстрее 300 мс. Скармливаешь агенту, чтобы он не превращал интерфейс в мультик
