Твои сайты — слоп копия, если ты не юзаешь эти инструменты

😛 Да, нейронка напишет тебе сайт хоть за 10 минут, но без нормального контекста она выдаст тёмный градиент, три стеклянные карточки, фиолетовую кнопку.
Давненько не делал подборки, поэтому ловите подборочку прикольных компонентов под дизайн, которые точно импрувнут уровень твоих работ.

Для начала нам понадобятся скиллы:

⭐️ Web Design Guidelines — скилл, который не даёт агенту колхозить UI

Проверяет интерфейс по сотне правил: доступность, мобильная версия, размеры кнопок, состояния загрузки, формы, анимации и другие мелочи, из-за которых сайт выглядит либо дорого, либо как шаблон.

🧐Полезно, если хочешь, чтобы агент не просто «сделал красиво», а собрал интерфейс, которым реально удобно пользоваться.

⭐️ React Best Practices — чтобы твой красивый сайт не лагал

Даёт агенту правила по Next.js и React: как не грузить на страницу пол-интернета, не плодить лишние перерисовки и не убивать скорость сайта ради анимации.

Полезно для лендингов, SaaS и любого фронта, который должен выглядеть дорого и при этом быстро открываться.

⭐️ shadcn/ui Skill — чтобы агент знал, из чего собирать интерфейс

Даёт доступ к компонентам, документации и готовым блокам shadcn/ui. Агент перестаёт выдумывать кривые кнопки и модалки с нуля, а берёт проверенную базу.

Где использовать: почти в любом React- и Next.js-проекте.

👍Обязательно подключаем MCP:

⭐️ Context7 MCP — чтобы агент не писал код по устаревшей памяти

Подтягивает актуальную документацию библиотек прямо в контекст. Особенно спасает, когда работаешь с новым Next.js, Tailwind, Supabase или любой быстро меняющейся либой.

⭐️ Playwright MCP — финальная проверка в браузере

Агент открывает готовый сайт, кликает по кнопкам, проходит формы и видит, где всё развалилось. То есть не просто написал код и сказал «готово».

Полезно для проверки адаптива, форм, авторизации и всего, что обычно ломается уже после деплоя.

🙂Ну и конечно без UI-kit не обойтись:

⭐️ Aceternity UI — для вау-эффекта на первом экране

Крутые hero-блоки, фоны, карточки и анимации. Хорошо работает, когда нужно продать продукт с первого скролла.

😐Главное правило: не пихать все сразу, а использовать под конкретные задачи.

Более детально мы разобрали дизайн в +VIBE (пока закрыто) комьюнити: какие инструменты помогают делать дизайн и где искать примеры, чтобы прокачать насмотренность.

Давайте 42 — ❤️ и выпускаю ещё одну часть подборки инструментов под определённые задачи..