Использование нейросетей при разработке лендинга

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

Основные принципы работы с нейросетями

Основные нейронки, которые для этого нам подойдут, – это ChatGPT и Claude.ai. На последней остановлюсь подробнее, я с ней сработался лучше и она мне очень нравится. 

Мне нравится Claude.ai не просто так. У нее бесплатная версия, при создании запроса можно вводить до 100 000 символов, а это порядка 100 страниц. Также туда можно прикреплять документы в таких известных и широкоиспользуемых форматах, как .txt, .doc, .pdf, .html, .scv. ИИ отлично их понимает. А когда просишь эту нейросеть сгенерировать код, она обязательно расписывает структуру кода, где и что находится, какие параметры можно менять, а также полные комментарии, поэтому разберется даже человек, который не умеет писать код. 

Основной принцип, которого я придерживаюсь при работе с нейросетями: всегда иду от общего к частному. 

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

Разработка прототипов и текстового контента

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

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

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

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

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

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

Генерация кода для front-end и back-end

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

Можно спокойно дать нейронке задание на фронте – HTML, CSS, JS. Это то, что я по крайней мере прошу дописать. Нейросети отлично с этим справляются. 

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

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

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

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

Копируем то, что нам сгенерировала нейронка, и вставляем. И уже сразу, до публикации проекта, в конструкторе видно, как выполняется код. 

SEO-настройка сайтов

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

По SEO в принципе в том же чате, в котором вы ставили задачу на разработку сайта, можете потом попросить: «Напиши мне Title, Description, H1 и ключевые слова для каждой страницы». Нейронка все это сделает, распишет, можно попросить и сгенерировать семантику, составить семантическое ядро, написать статьи и тексты для карточек товара. 

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

Недавно презентовали новую версию – GPT4 Turbo. Там расширили максимальное количество символов для 1 промта, в 3 раза удешевили токены, теперь нейросеть легко понимает аудио информацию и считывает изображения. И в конце своего выступления по презентации новой версии Сэм Альтман, руководитель OpenAI, сказал: «То, что мы запускаем сегодня, будет выглядеть очень старомодно по сравнению с тем, что мы разрабатываем сейчас».

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

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