Добавьте вайб-блок на страницу из Библиотеки блоков. Он доступен в общем списке разделов или в разделе «Другое».

Введите запрос для генерации блока в поле чата. После этого нажмите «Отправить» или клавишу Enter.

Чтобы выбрать модель ИИ для генерации кода, нажмите на ее название в блоке.

Чтобы прикрепить изображение, файл или видео к запросу, нажмите значок скрепки. Файл можно использовать как содержимое блока или референс.

Нажмите на знак вопроса, чтобы посмотреть примеры промптов или создать свой запрос на их основе.

Выберите один из примеров промптов.

Промпт из примера можно просмотреть в виде демо на новой странице, например, обложка.

Чтобы скопировать пример и создать блок на странице, нажмите «Взять код».

Нажмите «Применить промпт», чтобы открыть редактор и изменить запрос.

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

В чате можно раскрыть ответ с кодом и скопировать его.

Чтобы посмотреть код полностью, нажмите «Код» в верхней панели. Откроется редактор, где можно внести изменения в сгенерированный код блока.

Чтобы получить лучший результат, можно повторно сгенерировать блок по тому же промпту, дополнить запрос или написать новый.

Например, можно просто указать, что заменить в блоке и ИИ отредактирует код.

По умолчанию в блоке отображается последняя версия. Чтобы посмотреть предыдущую версию, нажмите значок глаза. Чтобы применить ее, нажмите «Применить».

Так можно переключаться между версиями и выбрать подходящий вариант. Чтобы сохранить результат, просто закройте чат.

Чтобы снова отредактировать блок после закрытия чата, нажмите «Редактировать блок».

Чтобы отредактировать элемент в созданном блоке, нажмите на него. Откроется панель редактирования стиля и контента.

Чтобы быстро перейти к другому элементу, нажмите значок со слоями. Откроется панель слоев.

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

Быстро открыть панель слоев можно и из кода вайб-блока. Нажмите значок со слоями, затем выберите нужный слой — откроется панель редактирования стиля.

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

Нажмите значок кода, чтобы открыть редактирование элемента в коде.

Чтобы скопировать элемент, нажмите значок копирования. Чтобы удалить — значок корзины. Стрелки вверх и вниз позволяют перемещать элемент в панели слоев и менять его порядок.

Если нужно отредактировать элемент с помощью ИИ, нажмите «Редактировать с ИИ». Откроется панель для ввода запроса. В поле уже будет указан путь к элементу, который нужно изменить.

Содержимое поля «Контент» зависит от выбранного элемента.

Для текстового элемента в поле «Контент» можно изменить текст.

Для изображения можно заменить файл, удалить его, загрузить новый или выбрать подходящую картинку в Библиотеке изображений.

Для формы появится кнопка «Сервисы». С ее помощью можно подключить Tilda CRM или другие сервисы приема данных.

Для группы с элементами отобразится код. Его можно изменить в поле «Контент» или сразу перейти к редактированию в коде.

Чтобы настроить адаптивность группы или элемента, в поле «Брейкпоинты» выберите нужную иконку экрана.

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

Для группы или элемента можно настроить ширину и высоту, радиус скругления углов, прозрачность, а также минимальные и максимальные размеры.

При необходимости для элементов можно задать настройки флексов.

Для групп и элементов также можно настроить внешние и внутренние отступы и изменить цвет фона.

Чтобы добавить обводку группе или элементу, нажмите «Обводка». В панели стилей откроются доступные настройки.

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

По умолчанию Вайб-блок имеет лимиты на количество бесплатных запросов в зависимости от тарифа. Ниже таблица с количеством запросов, которые можно сделать в течение 12 часов и в месяц.

Если вы достигли лимита запросов в аккаунте, то их можно приобрести отдельно. Для этого перейдите на страницу Покупки AI-запросов или нажмите на кнопку «Купить запросы» во всплывающем меню в чате блока.

В этом же окне вы сможете посмотреть лимит запросов на текущий день и остаток лимитов по тарифу в целом.