Не-шаблонный сайт на вайб-коде: 11 инструментов и как их реально ставить

Если вы кодите с Cursor, Antigravity, Codex или Claude — знаете эту боль. Сайт вроде рабочий, а выглядит как тысяча других: тот же дашборд, те же карточки, тот же градиент через весь экран. Нейросеть не виновата — она берёт самое усреднённое, если вы не дали ей другого материала.

Чинится это двумя вещами: скиллом с правилами дизайна и правильной UI-библиотекой под нужный стиль. Ниже — схема из трёх шагов и 11 инструментов. И сразу важное предупреждение, которое сэкономит вам полчаса возни.

Главный миф вайб-кодинга. «Дай агенту ссылку на GitHub — он сам поставит библиотеку» работает только для одного инструмента из списка (21st.dev). У остальных GitHub-ссылка — это референс, а не установщик. Кто-то ставится через npm install, кто-то через npx shadcn add, кто-то копируется с сайта. Поэтому у каждой библиотеки ниже — своя точная команда.

Сама по себе библиотека шаблонность не убивает. Скажешь ИИ «возьми shadcn» без правил — получишь тот же безликий интерфейс. Не-шаблонность даёт связка: скилл задаёт вкус, библиотека даёт материал, промпт связывает.

Шаг 1. Сначала ставим скилл, а не библиотеку

Это первое и самое важное. UI/UX Pro Max — не компоненты, а база знаний (AI-скилл) для вашего агента. Внутри — десятки готовых стилей, цветовых палитр и шрифтовых пар плюс UX-гайдлайны. С ним ИИ перестаёт гадать с цветами и собирает интерфейсы по законам продуктового дизайна, а перед выдачей сам проверяет результат на типовые анти-паттерны.

Логика простая: скилл задаёт вкус, библиотека даёт материал. Ставим его в проект первым.

Установка для Claude Code (как плагин):

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Для Cursor, Antigravity и других — скачайте zip из раздела Releases репозитория и распакуйте в корень проекта по инструкции из README.

GitHub (референс): github.com/nextlevelbuilder/ui-ux-pro-max-skill

Шаг 2. Выбираем библиотеку под стиль сайта

Не хватайте всё подряд. Сначала решите, как должен выглядеть сайт, потом берите библиотеку под этот стиль. Быстрая шпаргалка:

• Строгий SaaS, дашборд, CRM → Shadcn/ui, Radix Themes
• Дорогой стартап со стеклом и тенями → HeroUI
• Спокойный имиджевый минимализм → Park UI
• Лендинг с вау-эффектами и 3D → Aceternity UI, Magic UI
• Финтех, графики, аналитика → Tremor
• Красивые формы и поля ввода → Origin UI
• Быстрый MVP за вечер → DaisyUI

А теперь по каждой: что делает, какой стиль на выходе, точная команда установки и скрин примера.

База и строгость: SaaS, CRM, дашборды

1. Shadcn/ui — золотой стандарт. Не библиотека в привычном смысле, а компоненты, которые копируются прямо в ваш код — поэтому потом крутите их как угодно. Стиль: строго, чисто, много воздуха, ноль визуального мусора. Под SaaS и внутренние тулзы.

npx shadcn@latest init npx shadcn@latest add button card dialog

GitHub: github.com/shadcn-ui/ui · сайт ui.shadcn.com

2. HeroUI (ex-NextUI) — AI-native. Заточена под ИИ: есть собственный MCP-сервер и инструкции для агентов, актуальная версия v3 под React 19 и Tailwind v4. Дорогие тени, эффект стекла, плавность из коробки. Стиль: «современный продукт за деньги», тёмные глянцевые лендинги.

npm i @heroui/styles @heroui/react

Порядок пакетов важен: @heroui/styles импортируется в ваш главный CSS. Есть и свой CLI — heroui init создаёт готовый проект, heroui add button ставит компоненты по одному.

GitHub: github.com/heroui-inc/heroui · сайт heroui.com

🖼 ИЗОБРАЖЕНИЕ — IMG-2 Alt: «Главная HeroUI с компонентами со стеклом» Подпись: Глянец, стекло и мягкие тени — фирменный почерк HeroUI. Загрузить: heroui.com

3. Radix Themes — enterprise. Жёсткий корпоративный стандарт: выверенная сетка, идеальная типографика, ничего лишнего. Стиль: серьёзный B2B, финтех-кабинеты, админки, где важна не красота, а доверие.

npm install @radix-ui/themes

GitHub: github.com/radix-ui/themes · сайт radix-ui.com/themes

4. Park UI — минимализм. Скандинавский минимализм с полным контролем над кодом (на базе Ark UI + Panda CSS или Tailwind). Стиль: спокойный, выверенный, «икеевский» — много пространства, мягкие формы. Под имиджевые сайты и стартапы, которые не хотят кричать.

Ставится через их CLI; точную команду под ваш стек (Panda или Tailwind) берите на park-ui.com — она зависит от выбранной связки.

GitHub: github.com/cschroeter/park-ui · сайт park-ui.com

Вау-эффекты: лендинги, промо, стартапы

5. Aceternity UI — самая зрелищная. Неон, 3D-карточки за курсором, космические свечения, параллакс. Стиль: футуризм, AI-стартапы, web3 — вау с первого экрана. Легко переборщить, поэтому держим в узде скиллом из Шага 1.

Внимание со ссылкой: в старых подборках гуляет битый адрес manuarora700/aceternity-ui — его не существует. Это copy-paste библиотека: ставится не из репозитория, а через shadcn-реестр.

npx shadcn@latest add https://ui.aceternity.com/registry/[имя-компонента].json

У Aceternity 200+ компонентов, поэтому не тащите всё подряд — каждый копируется в ваш код. Точный слаг каждого компонента берите на его странице, либо пропишите реестр @aceternity в components.json и дайте агенту с подключённым shadcn-MCP задачу самому подобрать и поставить компоненты под секции вашего лендинга — он разрешит имена через реестр.

GitHub: github.com/manuarora700/ui.aceternity · сайт ui.aceternity.com

6. Magic UI — анимации. Родственник Aceternity, дружит с shadcn. Микро-анимации, переливающиеся градиенты, бегущие строки логотипов, анимированные счётчики. Стиль: живой современный лендинг, где всё мягко двигается.

npx shadcn@latest add "https://magicui.design/r/[имя-компонента]"

GitHub: github.com/magicuidesign/magicui · сайт magicui.design

🖼 ИЗОБРАЖЕНИЕ — IMG-6 Alt: «Анимированные блоки Magic UI» Подпись: Мягкое движение и градиенты — Magic UI. Загрузить: magicui.design

Специфичные задачи: данные, формы, скорость

7. Tremor — финтех. Топ для аналитики: красивые графики, KPI-карточки, скоринг в пару строк. Стиль: чистый дашборд с данными, как в Stripe или Linear. Не для лендингов — строго для кабинетов с цифрами.

# основной путь — copy-paste компонентов с tremor.so # либо классические графики пакетом: npm install @tremor/react

GitHub: github.com/tremorlabs/tremor · сайт tremor.so

8. Origin UI — формы. Узкая специализация: лучшие инпуты, формы регистрации, поля ввода (на базе shadcn). Берёте не вместо основной библиотеки, а в дополнение. Стиль: аккуратный, выверенный ввод данных.

Ставится copy-paste или через shadcn-реестр — команда у каждого компонента своя, берите на originui.com.

GitHub: github.com/origin-space/originui · сайт originui.com

9. DaisyUI — скорость. Плагин к Tailwind с готовыми классами и кучей тем. Стиль: зависит от выбранной темы, в среднем — быстрый аккуратный MVP. Когда важно «собрать рабочее сегодня».

npm install daisyui # затем подключить плагином в конфиге Tailwind

GitHub: github.com/saadeghi/daisyui · сайт daisyui.com

Секретное оружие

10. 21st.dev (Magic) — «v0 в вашей IDE». Единственный в списке, где модель «дай ссылку — он сам внедрит» работает по-настоящему: это MCP-сервер. Пишете в чате агента /ui … и описание — он генерирует компонент прямо в проект, в вашем стиле кода. Нужен бесплатный API-ключ.

# ключ берёте на 21st.dev/magic/console, затем: npx @21st-dev/cli@latest install cursor --api-key ВАШ_КЛЮЧ # клиенты: cursor | windsurf | cline | claude

GitHub: github.com/serafimcloud/21st · сайт 21st.dev

Шаг 3. Три способа установки — не перепутайте

Главная ошибка новичков (и причина, по которой агент выдаёт «Repository not found») — пытаться «установить» библиотеку по ссылке на репозиторий. Запомните три типа:

• npm-пакеты (HeroUI, Radix Themes, DaisyUI) — ставятся командой npm install …, ссылка на GitHub только как референс.
• copy-paste / shadcn-реестр (shadcn, Aceternity, Magic UI, Origin UI, Tremor) — ставятся через npx shadcn@latest add <url> или копированием с сайта.
• MCP / скилл (21st.dev, UI/UX Pro Max) — ставятся как сервер или плагин. Вот тут «дай ссылку/ключ» реально работает.

Дальше — рабочий порядок в Cursor, Antigravity или Claude:

1. Ставите скилл UI/UX Pro Max в проект (плагин или zip) — это фундамент.
2. Под выбранный стиль ставите библиотеку её родной командой из карточек выше, а не «ссылкой на репозиторий».
3. Если хотите готовый сложный блок «по запросу» — подключаете 21st.dev как MCP и пишете /ui ….
4. Описываете задачу промптом, который явно ссылается на скилл и библиотеку — иначе агент опять свалится в шаблон.

Рабочий каркас промпта — подставьте свой проект:

# вставлять в чат агента после установки скилла и библиотеки
Собери лендинг для [ваш продукт].
Строго следуй правилам дизайна из скилла UI/UX Pro Max:
палитра, шрифтовые пары и UX-гайдлайны — оттуда.
Компоненты бери из [Aceternity UI / shadcn / нужная библиотека].
Стиль: [футуризм с 3D / строгий SaaS / минимализм].
Не используй дефолтные градиенты и стоковые карточки —
сделай уникальную композицию под этот продукт.

Так агент опирается на загруженные правила и компоненты, а не на «среднюю температуру по интернету». Разница видна сразу.

Что в итоге

Шаблонность вайб-кода лечится не магией, а материалом. Дайте нейросети правила (скилл) и палитру под задачу (библиотека) — и она перестанет лепить сайты-близнецы. Только не путайте способ установки: GitHub-ссылка почти нигде не работает как установщик, у каждого инструмента своя команда.

Лично я держу скилл UI/UX Pro Max в каждом проекте, а библиотеку подключаю под клиента: финтех — Tremor, AI-стартап — Aceternity, строгий продукт — shadcn. Сохраните гайд и забросьте в свой проект.

Больше таких разборов — в моём Telegram-канале @neprostonewsai: тестирую инструменты, собираю подборки и показываю, что реально работает в вайб-кодинге.