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

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

2 часа
вам понадобится, чтобы собрать преленд с помощью ChatGpt

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

Взял первый попавшийся Kwr
Взял первый попавшийся Kwr

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

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

Подготовка к работе

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

  • ChatGPT — здесь мы будем генерировать код и текст для нашего прелендинга;
  • Sublime Text или Блокнот — чтобы собрать полученный код в сайт;
  • Изображения — можно взять промо у партнерки или сгенерировать в нейросетях, которые работают с картинками;
  • Домен и хостинг — чтобы залить сайт.

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

Создаем сайт с помощью ChatGpt

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

ChatGpt учился на англоязычном контенте и хорошо понимает английский язык. Да, вы можете задать промт на русском, но процесс будет выглядеть так: промт на русском → перевод на английский → поиск на английском → формирование результата → перевод на русский. Из-за этого результат может быть неудовлетворительный.

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

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

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

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

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

  • Заголовок — привлекаем внимание пользователя к проблеме;
  • Описание проблемы — «цепляем» пользователя за его боль;
  • Описание решения — рассказываем про наше средство;
  • Социальные доказательства — отзывы, лицензии, документы;
  • CTA — форма для контактов или переход на преленд, чтобы заказать.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если код получается слишком большой, то ChatGPT остановится на 2 000 символах. Можно написать «Продолжить», но есть шанс, что нейронка начнет код не с той части. Поэтому советую выборочно копировать блоки, которые поменяла нейронка и вставлять их в свой Sublime Text. Так вы не испортите рабочий код, если какая-то его часть при новой генерации потерялась.

Результат:

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

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

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

HTML и CSS теги, которые нужно знать, чтобы редактировать преленд

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

CSS

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

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

  • задаете название «семье» контейнеров;
  • задаете параметры этому контейнеру;
  • указываете, что какие-то части преленда относятся к этому контейнеру в HTML коде.

Например:

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

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

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

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

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

  • font-size — размер, указывается в px;
  • color — цвет, указывается в HEX (#003355) или по названию (black, green) ;
  • background-image — фоновое изображение;
  • background-color — цвет фона;
  • border — обводка;
  • margin-top (button, left, right) — отступы.

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

HTML

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

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

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

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

  • <p> — парный, обозначает параграф или абзац текста;
  • <br> — не парный, перенос на новую строку;
  • <i> — парный, курсивный текст;
  • <b> — парный, жирный текст;
  • <a href =”URL”> — ссылка на что-то;
  • <sup> — верхний индекс;
  • <sub> — нижний индекс;
  • — цвет.

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

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

Результат:

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

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

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

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

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

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

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

Через 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 канал от накрутчиков и скамеров.

2424
22 комментария

Комментарий недоступен

8
Ответить

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

3
Ответить

Комментарий недоступен

1
Ответить

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

4
Ответить

Это преленд, а не ленд. Он используется как прокла, чтобы сегментировать и догреть аудиторию, которая перешла с креатива. Я показал то, что можно собрать за 1,5-2 часа не имея каких-то особых навыков. Если потратить 3-4 часа, то результат будет намного лучше. И с каждым новым прелендом он будет лучше, т.к. будут подробнее промпты, можно будет редачить что-то руками.

Ответить

Ну как бы..все конечно хорошо, но я кушал. Не надо так делать, пожалуйста.

3
Ответить

:с Зато больше места останется для обеда)

3
Ответить