VibeUI
РусEng
Войти
Гайд для новичка · 5 минут

Как пользоваться VibeUI

От пустого компьютера до готовой секции на сайте. Своё описываем подробно, чужое — одной строкой и ссылкой на официальную инструкцию.

Вся цепочка за полминуты
1

Рабочее место

Windows или Mac, терминал не понадобится: два обычных установщика, расширение и одна фраза агенту — дальше он работает сам.

  1. Node.js

    nodejs.org

    Скачайте LTS-версию и установите как любую программу: «Далее → Далее → Готово». Это движок, на котором крутится сайт; открывать его не придётся.

  2. VS Code

    code.visualstudio.com

    Бесплатный редактор, в котором живёт агент. Скачайте и установите с настройками по умолчанию. Cursor — тот же VS Code с агентом уже внутри: если выбрали его, следующий шаг не нужен.

  3. Расширение Claude Code

    claude.com/claude-code

    В VS Code откройте «Расширения» (иконка из квадратов слева или Ctrl+Shift+X), найдите «Claude Code», нажмите Install. Появится иконка Claude в боковой панели — нажмите и войдите в аккаунт. Нужна подписка Claude Pro или Max.

  4. Проект

    Создайте пустую папку, например my-site, и откройте её: «Файл → Открыть папку». В панели Claude напишите одну фразу — агент сам создаст сайт, запустит его и даст ссылку вида localhost:3000.

    создай здесь новый сайт на Next.js с Tailwind и запусти его
2

Первый блок

Один блок от каталога до вашего localhost. Дальше всё повторяется.

  1. Выберите блок

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

  2. Скопируйте для ИИ

    Кнопка «Копировать для ИИ» кладёт в буфер личную ссылку на сутки. По ней агент получает превью, код и инструкцию: что сохранить, что можно менять. Нужен вход — он бесплатный.

  3. Вставьте агенту

    Напишите своими словами, куда поставить блок, и вставьте ссылку в это же предложение.

    1. Откройте папку проекта в VS Code и нажмите иконку Claude в боковой панели.
    2. Отправьте сообщение:
      добавь это на главную первым экраном: <ссылка>
    3. Агент откроет ссылку, поставит файлы и напишет, что изменил.

    Агент не открывает ссылки? На странице блока есть «Показать полную инструкцию» — вставьте её текст целиком.

  4. Сравните с превью

    Откройте localhost:3000. Блок должен совпасть с превью: те же анимации, отступы, поведение на телефоне.

    Если агент «пересобрал по мотивам» — нет анимации, другие отступы — ответьте: «не пересоздавай, поставь компонент из реестра точно как в инструкции по ссылке».

Попробуйте прямо здесь

Бесплатный блок hero-001. Скопируйте, вставьте агенту — и цепочка пройдена.

Открыть страницу блока
3

Целая страница

Когда один блок встал, остальное — вопрос количества.

  • Сценарии

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

    Смотреть сценарии

  • Своя палитра

    Каждый блок несёт цвета в собственных переменных `--vibeui-<имя>-*`. Попросите агента: «подставь наши цвета в переменные блока, остальное не трогай».

  • Что агент сохраняет, а что меняет

    В инструкции по ссылке это разделено: анимации, типографика, отступы и responsive — сохранить; тексты, картинки, бренд-цвета — под вас.

  • Лимиты

    Бесплатно — 20 копирований в месяц, этого хватает на несколько сайтов. PRO снимает лимит и открывает закрытые блоки.

    Тарифы

Первый блок уже стоит?

Дальше — каталог: полторы тысячи секций, компонентов и анимаций, каждая ставится той же фразой.

Открыть каталогСценарии