Как собрать преленд с помощью нейросети без дизайнера, копирайтера и верстальщика

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

Если зайти на Kwork, биржу фриланса или обратиться к дизайнерам, то стоимость преленда может расстроить. Например, на Kwork самый обычный преленд без отзывов и с текстом на 2 000 символов стоит 6 000 рублей:

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

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

Нам понадобится:

Аккаунт для ChatGPT можно создать самостоятельно или купить на plati. ru за $1-3.

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

Сначала определяемся со структурой прелендинга. С этим тоже поможет нейросеть. Я использовал запрос:

ChatGpt выдал мне результат:

Нейронка предлагает прелендинг из пяти блоков:

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

Получаем результат:

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

Если интересно, то стартовый код от ChatGPT выглядит так:

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

Так выглядит наш пустой код от нейронки:

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

ChatGPT переписывает код, добавляет CSS стили, а после кода дает разъяснения: куда писать текст, а куда добавлять картинку:

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

Если картинка слишком большая, уменьшите ее в фоторедакторе или через Canva. Добавим в прелендинг немного цвета — попросим сделать фон у блока с H2 серым, добавить кнопку «Найти лечение» и еще одну картинку.

Результат:

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

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

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

CSS работает примерно так:

Например:

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

Например, в этой части кода видно, что ко всему блоку применяются стили из блока «container1».

Основные значения CSS:

Свойств огромное количество — если вам нужны какие-то конкретные, можно спросить у chatGPT или посмотреть в справочнике.

С HTML все еще проще. Для HTML-кода вы указываете правила конкретной части текста, которая находится внутри этого кода. Например:

<ul> означает, что в этом блоке начинается список, а <li> — что в этом блоке элемент этого списка. Все, что находится между парными тегами — относится к этим тегам. Все, что за ними — не относится.

Основные теги, которые вам понадобятся для оформления текста:

Например, если посреди текста, вам нужно что-то выделить жирным, то вы просто ищете этот текст в коде и обрамляете его в <b></b>:

Результат:

HTML-код также можно спросить у ChatGPT, например:

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

Через 30 секунд получаем результаты:

Если нас что-то устраивает, то копируем и вставляем в HTML код, в блок

<h1>.

Код:

Результат:

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

Текст от ИИ:

Результат:

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

Чтобы найти, какой CSS блок относится к этому тексту, мы ищем в коде наш заголовок и обращаем внимание на <div class=””>:

Затем ищем это название в самом верху, где у нас CSS стили:

И меняем параметры с помощью ChatGPT или справочника стилей.

Текст вновь генерировал с ChatGPT. Мой запрос:

Результат:

Результат на сайте:

Обратите внимание на списки — каждый пункт должен списка должен находиться между <li></li>, а весь список между <ul> </ul>:

У нас есть место под две картинки, поэтому ищем «до/после»:

Следующая идет кнопка — просим ChatGPT придумать нам CTA:

Копируем понравившийся результат и добавляем ссылку на ленд для покупки:

Переходим к новому блоку. Я решил добавить немного интерактивного элемента — проверку на наличие грибка. Мой запрос для ChatGPT:

HTML-код:

Обратите внимание, я сказал ИИ, что мне нужно, чтобы сайт обрабатывал результат. Если выбрано больше двух чекбоксов, то при нажатии кнопки должно появляться сообщение, что у человека есть грибок. Поэтому ChatGPT написал код на JS:

Просим у ChatGPT симптомы грибка, чтобы заполнить чекбоксы. У нас 8 чекбоксов, поэтому нужно 8 симптомов:

Добавляем полученные симптомы в HTML-код:

Получаем результат на сайте:

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

Получаем код:

Вставляем его в наш редактор:

Результат:

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

Сделаем два варианта:

Для этого копируем JS код из редактора, вставляем в ChatGPT и просим исправить его.

Результат:

Следующий блок — описание средства. Нам нужен продающий текст продукта. Пишем промт для ChatGPT:

Получаем текст, если устраивает, то переносим в HTML-код:

Результат:

Переходим к отзывам. Просим ChatGPT сгенерировать историю для нашего преленда:

Текст от ChatGPT:

Вставляем полученный текст в HTML-код:

Ищем фотографию «До/после» и добавляем ее. В итоге получаем такой результат:

Осталась последняя кнопка с CTA. Она очень невзрачная и там нехватает стоимости. Поэтому попросим нейросеть написать код для этой кнопки:

Результат:

За час у нас получился простой прелендинг:

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

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

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