Делаю сайт за 5 минут через нейросеть «Поехали!»

Да, теперь пара кликов и нейросеть создаст из простой идеи целый сайт. Наша новая реальность. Искусственный интеллект становится личным помощником не только в продажах или контенте, но и в настоящем маркетинге. Сегодня говорим как раз про такой проект. Короче, теперь вы можете положиться на личного-отличного ИИ-разработчика Юру из сервиса «Поехали!».

Сразу к делу. В сервисе любой сайт из вашей задумки реализуется в четыре этапа. Описать идею, получить сайт, улучшить результат и опубликовать. Так должно быть в идеале. Проверим, как это работает на самом деле.

Естественно, на реально-выдуманном примере. Как мы любим.

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

Кстати, история изменений внутри проекта сохраняется. А ещё вроде как в разработке «бэкенд с базой данных». Новые возможности позволят хранить и обрабатывать данные о пользователях, подключать приём платежей и создавать полноценные веб-приложения. В общем, уже скоро будет полный фарш.

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

В бесплатном плане доступно 600 единиц энергии, это примерно 20 запросов. Объём промптов не уточняется. Энергия начисляется не сразу: 150 единиц при регистрации и по 150 единиц в течение 3 дней.

Покупка энергии происходит в профиле сервиса. Сумму можно внести любую, но лучше не менее 29 рублей, чтобы хватило хотя бы на один запрос. Система пополнения следующая: чем больше разово платишь за энергию, тем больше получаешь дополнительных единиц и, следовательно, промптов. Такая вот нехитрая математика.

Если вносишь сумму от 1 рубля до 999 рублей, то количество единиц энергии будет равно вложенным деньгам. От 1000 рублей до 2499 рублей прибавляется к покупке 15% бонуса, от 2500 рублей до 4999 рублей — дополнительных 20% бонуса, от 5000 рублей и выше — надбавка 25% бонусов.

Также имеется премиум-версия. Её стоимость — 749 рублей в месяц. За это пользователь получает хостинг сайта или веб-приложения, подключение домена, полный доступ к коду и удаление бейджа «Поехали!».

И это все формальности на сегодня. Идём тестить.

Что же, пора и опробовать. Первым делом заходим в сервис удобным способом: через Yandex, Google, GitHub или Telegram. Далее вводим свой заготовленный или экспромтный запрос. И глядим, что выйдет. Я же хочу попробовать создать сайт для музыкальной студии. Почему бы и нет.

Промпт я написал такой: «Музыкальная студия, предоставляющая услуги по обучению вокалу, игре на гитаре, фортепиано, скрипке, барабанной установке, укулеле. В развлекательных программах дополнительно имеются настольные игры по субботам и воскресениям с 18:00-20:00, пробные сольные мини-концерты по будням с 18:00-20:00 и караоке в последнее воскресенье каждого месяца. [Чисто из головы]

Стоимость обучения зависит от выбранного пакета: базового, стандартного и продвинутого. Укажи номера для связи, почту, социальные сети: Telegram и VK. Целевая аудитория — люди возраста 18-35+.

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

Так мы задаём общее настроение и, вообще, проверяем, что может ИИ.

После ввода промпта нас переносит на страницу, разделённую на две части: слева чат с Юрой, справа вид чернового проекта. Нейросеть предлагает определиться с наполнением сайта. Выбираю все предложенные разделы. Если что, Юра — местный чат-бот, который помогает докрутить сайт. Не бойтесь его, он реально могёт, правда, только если давать точные команды.

Спустя 3 минуты получаю вот такой одностраничный сайт.

Что мы тут видим? В верхнем меню отображены разделы: «Главная», «Обучение», «Инструменты», «Программы», «Преподаватели», «Прайс», «Расписание», «Галерея» и «Контакты». Каждый из них кликабелен.

Сайт построен блочно. В каждом тематическом фрагменте прописана определённая информация раздела. ИИ-разработчик дал студии название «Мелодия», написал призыв к обучению и добавил две кнопки: «Записаться на урок» и «Узнать больше».

В следующем разделе выделены направления: «Вокал», «Фортепиано», «Гитара». Непонятно, по какому принципу они распределены. Скорее всего, Юрке не хватило информации. Позже попробую распределить так: «Вокал», «Струнные», «Ударные и клавишные».

Инструментов, видимо, оказалось мало, поэтому Юра добавил в студию синтезатор, флейту и саксофон. Значки выделил не для каждого инструмента. Скрипке, саксофону и флейте достались ноты. Лишние элементы предстоит удалить, а недостающие — добавить.

Развлекательные программы переданы по запросу: настольные игры, мини-концерты и караоке. Значок настольных игр нейросеть поставила неподходящий — джойстик. Буду дорабатывать. В этом блоке изменю значок настольных игр и поменяю местами детали обозначения мини-концертов и караоке.

У преподавателей ИИ решил указать фамилию, имя, специализацию и опыт работы. Обязательно добавлю им портреты, чтоб очеловечить.

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

В разделе «Расписание» временные промежутки придётся исправить. Для ясности следует перенести в конец развлекательные программы и основные часы работы. Немного занудства, но что поделаешь.

Мы тут обсуждаем подробности моего черновика, но по сути — я просто в шоках от того, как быстро теперь можно сделать лендинг. Вот так, по щелчку. И он даже будет более менее адекватно выглядеть, сразу будет наполнен, с картинками и прочим. Чудо-чудное. Что дальше?

В «Галерее» появились сгенерированные картинки: музыкальные инструменты и преподаватель с детьми. Люди изображены неплохо. У них нет шести пальцев или искажённых лиц. Единственное, что бросается в глаза — пучок преподавателя. Больно он неестественный.

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

Последний раздел — «Контакты». Здесь Юра не сделал никаких ошибок, достаточно стандартные плашки: номер, почта, адрес, социальные сети и часы работы.

В целом, за три минуты у нас получился реальный приемлемый базовый продукт, с которым можно работать. Останется проверить / добавить своих данных, пошаманить по стилю под себя и вообще. И будет вполне окей. Всё это при том, что промпт не включал подробные описания для каждого раздела. А если чуть подготовиться, можно делать по-настоящему крутые вещи.

Черновик готов, но как вносить изменения? Рассказываю. Есть четыре способа: в редакторе, чате, с помощью кода или через GitHub. Первый вариант позволяет выбрать конкретный элемент и работать с ним. Например, если нужно написать или исправить текст.

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

Для загрузки своего изображения необходимо перенести его в чат и описать конкретные действия: добавить в раздел N или в профиль сотрудницы Елены — в этом роде. Если же необходимо заменить или исправить определённый элемент, местный Юрка в этом тоже поможет. Выбираешь деталь и описываешь свои пожелания.

Конечно, не всегда всё получается с первого раза. Например, ИИ не смог создать иконку «скрипки». Вместо инструмента он поставил восклицательный знак. Иногда Юра заменяет такие детали тематическими элементами — в данном случае нотами. В принципе нестрашно.

Отредактировать уже сгенерированную картинку не получилось — просто создается похожая новая. Но если добавить в запрос больше деталей, то всё получится.

Все изменения фиксируются в истории. Плюс есть возможность оценить вид сайта с десктопа или смартфона.

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

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

На сайте 21st.dev множество блоков на выбор: кнопки, меню, фото, фон, отзывы. Мне понравилась анимация «Background Paths» от Kokonut UI. Скопированный промпт отправляю ассистенту Юре с задачей сохранения изначального фона, названий и кнопок.

Также сменю шрифт названия студии. На сайте Google Fonts выбираю Libre Baskerville и копирую ссылку для нейросети. Смотрим на обновленную страницу.

Сайт сразу преобразился, и главная страница заиграла. Но захотелось также преобразить все кнопки на сайте. Допустим с помощью компоненп Shiny Button от Magic UI. По той же схеме. Сначала копирую промпт с 21st.dev, потом присылаю в чат нейросети с задачей. Прошу применить эффект ко всем кнопкам на сайте. Обновляю — и вуаля.

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

Последнее, что хотелось бы изменить — раздел «Галерея». Выбираю компонент «Gallery» от Ali Imam и пускаю в работу. Обновляем страницу и видим применённый эффект с новыми тематическими изображениями.

Осталось по мелочи. Правлю кегль и цвет надписей через чат. Ещё раз проверяю фото. Если картинки оказались наложены друг на друга — их можно перетаскивать. Как тут, внизу.

На всё про всё у меня ушло 600 единиц энергии. Но да, за всякие доработки (анимации, дополнительные компоненты) возможно, потребуется что-то доплатить, учтите это заранее.

Публикация делается максимально быстро. Клик на кнопку «Опубликовать» — и сайт уже в открытом доступе. Плашка «Поехали!» остаётся. Скачать билд или код в бесплатной версии не получится. При желании можно подключить GitHub.

Сайт готов. На его создание было потрачено около 35 минут. Общее впечатление, конечно, положительное. Что понравилось:

Что было бы хорошо улучшить:

Перейдём к выводам...

Делать сайт самому, в агентстве или с помощью ИИ — тут каждый решает сам. Можно немножко помучить ИИ и быстро получить результат. Можно потратить огромный бюджет на прототипы от рекламных студий. Можно и самому изучить конструкторы, что, конечно, займёт у вас кучу времени.

Но факт остаётся фактом: нейросети уже не те, что раньше. И задачи доселе невыполнимые стали вполне реализуемыми. Такие дела.

Главное, по-прежнему, использовать технологии с умом, контролировать результат, не спешить внедрять их везде и всюду, думать своей головой. И всё у вас будет хорошо...