Генерация кода на сайте с встроенной нейросетью — зачем это нужно? С помощью этой функции вы можете создавать веб-дизайн и веб-анимацию всего за несколько секунд. Вам нужно просто ввести запрос нейросети так, как если бы вы заказывали эту услугу у дизайнера или программиста.
На видео показываем, как сайт c встроенной нейросетью стилизовал и анимировал изображения на сайте кондитерского интернет-магазина (посмотрите, это впечатляет!). И так можно стилизовать и анимировать абсолютно любой элемент сайта (без знания кода вообще!).
Посмотрите видео ниже про эту ИИ-функцию (длится всего 36 секунд):
Шаги из видео для создания веб-дизайна и анимации с помощью генерации кода:
- Перейдите в расширенные настройки веб-элемента, который хотите изменить
- Откройте раздел “Пользовательский CSS” и нажмите кнопку “AI” в поле ввода кода
- Введите запрос нейросети с описанием того, как вы бы хотели изменить стиль выбранного элемента (пишите так, как если бы заказывали эту услугу у дизайнера или программиста)
- Нажмите “Создать код” и оцените полученный результат
- Готово! Если вам понравился результат от нейросети, то нажмите “Используйте этот код”
В нашем примере мы использовали следующий запрос нейросети:
1. Сделай изображение круглым и добавь тень.
2. Добавь поверх круглого изображения полупрозрачный градиент от ярко-розового к голубому сверху-вниз.
3. Увеличь масштаб изображения и градиента внутри рамки, используя плавный переход при наведении курсора.
Сгенерированный код для создания дизайна и анимации, как на видео:
.selector img {
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.selector::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(
to bottom,
rgba(255, 0, 255, 0.5),
rgba(0, 255, 255, 0.5)
);
border-radius: 50%;
z-index: 1;
}
.selector: hover img,
.selector:hover:: before
transform: scale(1.1);
transition: transform 0.3s ease;
}Генерация кода на сайте с встроенной нейросетью может ускорить вашу работу над сайтом. Если вам понравился пример на видео, то ставьте лайк и подписывайтесь на наш Youtube-канал, где мы делимся примерами использования нейросети на сайте и не только.
О других функциях платформы можно узнать на этом сайте в разделе платформа (в меню сверху), или здесь