Делаю лендинг нейросетями

Всем привет! Меня зовут Павел, я предприниматель. Занимаюсь предпринимательской деятельностью 10 лет. За моей спиной достаточно много попыток в бизнес с разной степенью успеха, как положительных, так и отрицательных, от торговых компаний до производства. На данный момент я являюсь кофаундером геймдев студии qbera. games, которая занимается разработкой гиперказуальных игр.

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

Я начал с лэндинга, так как я их никогда не делал, даже на Tilda. Стало интересно проверить, каковы вообще возможности у нейросетей в этом направлении на текущий момент. Чтобы не делать лэндинг просто так, ради ничего, решил приурочить его к какой-то «бизнес-идее», пусть она даже и будет провальной, но мне это было необходимо для создания вектора движения.

Начало

На выдумывание идеи много времени я тратить не стал, и просто спросил у ChatGPT:

Предложенный вариант показался мне нереализуемым ни в каком виде. Поэтому я запросил еще 5 вариантов и выбрал первый из нового списка, так как он подходил для тестирования быстрой идеи об оказании копирайтинговых услуг для студентов, но без сервисной составляющей: )

О генерации текстового контента для лэндинга: заголовки, описания, отзывы и т. д.

Определившись с идеей, мне стало нужно разобраться, как лэндинги вообще делаются. Я попросил совета у двух нейросетей: сначала в Notion, а затем у ChatGpt. Результаты ниже:

Версия от Gpt4 мне понравилась больше, и я решил остановиться на ней.

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

Таким способом я получил основной контент для будущего лэндинга и сохранял его в notion, чтобы визуализировать для себя, как примерно будет выглядеть лэндинг. Забегая вперед, я совершил ошибку на мой взгляд, за неимением достаточного опыта, и в такой псевдоверстке в заметках совершенно не учел картинки, их размеры, где они будут находиться, логику размещения текста в блоках и т. д. В общем, позже, я пожалел об этом, так что тщательное планирование полной структуры лэндинга — залог минимальных временных затрат в будущем: )

Немного о доработке и корректировать материалов

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

В ответ пошла фэйковая генерация:

Вношу корректировки, чтобы избежать откровенной глупости:

Далее я немного покрутил названия для компании. Расширение для Chrome AIRPM позволяло получать названия в разных эмоциональных стилях. В основном результат был плохим, но при сотнях генераций названий выбор все-таки был:

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

Как я использовал GPT-4 для генерации кода (HTML, CSS, JavaScript)

На самом деле, я использовал GPT 3,5, так как генерация в 4-ой версии у меня началась примерно с этого:

Ну то есть, «на, заполни сам»: ) Типа нейросетка оказалась не просто умнее, а слишком умной, чтобы вообще что-то делать:

Потому что, например, с тем же запросом в GPT 3.5 результат был совершенно другой, и далее по коду я работал только с этой версией AI:

Кроме того, к этому прилагался файл со стилями:

Также были файлы с JavaScript, когда я просил реализовать тот или иной функционал, например, для выпадающего меню:

На этом этапе стоит отметить, что единственное, с чем я знаком в разработке на текущий момент, это, поверхностно, язык C#. Я могу написать на нем простых телеграм-ботов, но не более того. Однако HTML, CSS и JavaScript я увидел впервые. Чтобы попытаться хоть как-то визуализировать то, что мне прислал AI, я создал новый проект ASP. NET Core в привычной для меня программе, в которой работаю с C# (Visual Studio). В нем я раскидал полученные куски кода по разным файлам, запустил проект и обнаружил, что визуально он выглядел относительно неплохо. Подробнее о визуальной части мы поговорим далее, а сейчас я добавлю пару слов по коду в отдельных блоках.

Размещая контент в блоки, я понимал, что не очень разбираюсь в том, как всё работает. Поэтому, используя сгенерированные тексты, я давал описание того, как примерно хотел бы разместить контент, добавлял куски кода из других блоков и просил AI переписать этот блок по-другому. Это выглядело так:

Далее шел какой-то код и какие-то стили со скриптами:

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

Процесс генерации изображений

Изначально у меня была информация от моего товарища, что ChatGpt4 умеет воспринимать картинки. Я немного погуглил и обнаружил, что многие об этом пишут, но в интерфейсе я не нашел кнопки отправки фотографий. Возможно, этот функционал будет реализован в дальнейшем. Однако не сейчас. А я начал работу с midjourney с запроса на создание дизайна лэндинга:

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

Скачать через их сайт почему-то не получилось. Файлы приходят битыми, по крайней мере на Mac OS. Поэтому пришлось мудрить, открывать отдельно через ссылку и оттуда выкачивать через «сохранить».

Ну и на этом этапе я выяснил, что в ChatGPT4 подгрузить дизайн не получается. Поэтому пришлось максимально подробно описывать визуальный стиль лэндинга самому чату и надеяться, что он сгенерирует стили хотя бы в подходящих цветах.

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

Не долго думая, я запросил у midjourney «корпоративную фотографию копирайтера для сайта». Вот что получилось:

Таким образом, у меня появился штат компании, и вместе с ChatGpt мы также получили полную информацию о квалификации и истории каждого члена команды🙂

После завершения работы с командой наступило время для создания иконок. Я запрашивал их генерацию в соответствии с логикой раздела или непосредственно под заголовки и названия из этого раздела:

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

Как я интегрировал сгенерированные изображения на лэндинг

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

Фотошопа у меня не оказалось, а в интернете сервисы, куда нужно сначала что-то загрузить, потом выгрузить, искать не хотелось. Да и время на постоянную загрузку-выгрузку тратить не хотелось. Поэтому на помощь мне пришли внутренние инструменты macOS с минимальным функционалом, но которых оказалось достаточно, чтобы криво вырезать изображения, добавить их в проект и изменить ссылки с неизвестных картинок на уже загруженные.

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

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

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

О бенефитах

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

Возникшие сложности

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

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

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

Подведение итогов

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

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

Мгновенное создание контента, графики, арта и т. д. позволяет ранее «неполноценным» предпринимателям без команды теперь самостоятельно и очень быстро итерировать множество гипотез. Это, в свою очередь, увеличит как качество конечного сервиса для клиентов, так и конкуренцию в каждой нише.

Так же, как мне кажется, через какое-то время интернет если и «сломается”, то не из-за того, что информация будет искаться другими способами (например, нейросетями), а из-за колоссального числа фейковых сайтов, созданных людьми, которые, в отличие от меня, видят HTML не впервые. И целью таких "разработчиков» уже будет либо перепродажа клиента, либо мошенничество, либо еще что-то, и таким образом у среднего пользователя начнет формироваться зрительная слепота к новым для них интернет-сайтам, как к какой-то навязчивой рекламе в Яндексе. По крайней мере, так мне кажется, а что будет — увидем.

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

Что я планирую сделать дальше

1) Разместить этот лэндинг в интернете и провести полностью созданную рекламную кампанию по привлечению клиентов с использованием ИИ. Результаты выложу на канале с примерно такой же статьей-инструкцией.

2) Сделать телеграм-бота на C#, используя СhatGpt, который будет заносить, например, мои расходы в базу данных в Notion.

3) Интегрировать нейросеть Stable Diffusion с помощью ChatGpt в Notion. Насколько я понимаю, ее нужно будет предварительно развернуть на отдельном сервере, а затем настроить команды, с помощью которых я буду взаимодействовать с ней после интеграции в Notion.

4) А дальше посмотрим) Возможно, уже появится среди идей что-то практичное для организации нормального бизнеса: )

Завёл также канал в телеграм,

Планирую публиковать там всякое, продолжение и т. д.: )