Как сделать преленд под любую вертикаль с помощью ChatGPT

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

Арбитражники уже давно применяют нейросети в своей работе. Например, в рекламных сетях ИИ помогает с выбором целевой аудитории, текст пишет ChatGPT, а картинки генерируют AI для изображений. 

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

Что понадобится для работы 

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

• ChatGPT — с ним мы будем генерировать код и писать тексты для преленда;
• DeepL — нужно будет переводить запросы с русского на английский и наоборот, чтобы нейросеть выдавала нам качественный запрос. 
• Любой блокнот, в статье будем использовать Obsidian, чтобы почувствовать себя настоящими айтишниками;
• AI по изображениям. Можно использовать промо от партнерки, либо же создавать их в нейросетях. Сейчас много альтернатив платной Midjourney, мы будем работать с Blue Willow. 

На подготовку и создание уйдет в среднем 2-3 часа. И чтобы лить на преленд траф, нужно будет раскошелиться на домен и хостинг. Тут уже нейросети не помогут. 

Для регистрации в ChatGPT понадобится только почта. 

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

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

Работа с ChatGPT: промты, теги и код

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

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

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

Переходим в ChatGPT и вводим наш запрос. Как только нейросеть напишет ответ, идем обратно в переводчик и пытаемся разобраться, что нам насоветовал ChatGPT. 

Нейросеть предлагает нам рассмотреть несколько пунктов, которые помогут сделать «крепкий» преленд для работы с нутрой: 

• Заголовок, который будет привлекать внимание, и оффер с преимуществом;
• Основные характеристики продукта с особенностями и преимуществами;
• Отзывы и истории успеха, с фотографиями до/после;
• Рассказ о составе и активных ингредиентах, которые помогают худеть;
• Призыв к действию — CTA;
• Специальные предложения или акции, если есть;
• Раздел часто задаваемых вопросов;
• Контакты для связи.

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

Говорим нейросети «спасибо» за структуру и просим составить нам код для преленда по ней. 

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

Весь код мы копируем в блокнот или в Obsidian. Там мы сможем редактировать код, и проверить, рабочий он вообще или нет. 

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

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

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

Полезное про теги, которые понадобятся в верстке 

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

Если хочется что-то специфичное, то можно найти нужный запрос в справочнике CSS. Да, это не промт вводить в ChatGPT, но не так сложно, как кажется. 

Работа с ChatGPT: создаем тексты для страницы

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

Выбираем заголовки 

Опять идем в DeepL, чтобы попросить нейросеть написать продающий текст. 

Первые несколько вариантов нейросеть выдает так себе. В диалоге лучше попробовать еще немного «пообщаться» и направить ChatGPT в нужное русло. Так можно будет выбирать неизбитые варианты для работы. 

Мы выбрали вариант «Achieve Your Dream Body: Fuel Your Journey with Our Elite Supplements», и преобразовали его в «Achieve the body of your dreams with new elite supplements». Его можно будет сразу вставить в нужное место в коде. Ищем H1 и наслаждаемся результатом. 

Как сделать так, чтобы пользователи точно захотели купить это? Сделать нормальный преленд? Нет, написать продающий текст! Прописываем целевую аудиторию, чтобы нейросеть написала то, что нужно. 

Для красоты добавим немного «жирного» текста, чтобы выделить главное. 

Добавляем списки и интерактив 

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

Тут важно соблюдать форматирование списков: просто помести каждый элемент в теги <li></li>, а весь список оберни тегами <ul> </ul>. 

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

А вот так — на самом прелендинге. 

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

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

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

Пробуем добавить еще немного текста. И в конце — еще одна кнопка с призывом. 

Какой результат мы получаем 

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

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

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

Вывод 

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

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

GreyHunter

11 января 2024 года