Урок 7: Создаём сайт через нейросеть — от идеи до публикации

Кейс этого урока

Я решил протестировать выход своего маркетингового агентства на американский рынок.

Гипотеза — продавать маркетинг русскоязычным владельцам медицинского бизнеса в США.

Можно было пойти классическим путём:

• написать ТЗ;
• заказать прототип;
• привлечь дизайнера;
• отдать сайт программисту;
• несколько недель согласовывать правки.

Но пока мы вообще не знаем, сработает ли гипотеза.

Поэтому для теста я решил собрать лендинг практически полностью через ИИ.

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

И этого уже достаточно, чтобы запустить первый тест.

Шаг 1. Сначала не сайт, а информация

Самая большая ошибка — открыть ChatGPT и написать:

Сделай мне красивый сайт маркетингового агентства.

Он сделает.

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

Нейросеть должна сначала понять:

• что мы продаём;
• кому;
• зачем этой аудитории наш продукт;
• какие у неё проблемы;
• чем мы отличаемся от конкурентов;
• что предлагают конкуренты;
• какое действие должен совершить человек на сайте.

В моём случае сначала был проведён полноценный бриф.

Я попросил Клод забрифовать меня как клиента, а на вопросы отвечал голосом — так гораздо быстрее.

После брифа нейросеть помогла сформировать задачи для исследований.

Мы отдельно исследовали:

• рынок и цены;
• язык и формулировки, которыми пользуется аудитория;
• потенциальных клиентов;
• конкурентов;
• русскоязычных владельцев клиник и медицинского бизнеса в США.

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

В результате к моменту создания сайта у нейросети уже есть нормальное ТЗ не только на дизайн, но и на смыслы сайта.

Шаг 2. Отдаём задачу ChatGPT/Claude

Для создания первой версии я использовал ChatGPT и Claude для сравнения.

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

Пример запроса:

Для сложной задачи имеет смысл включить высокий уровень рассуждений.

Делам все в строго в режиме ворк или если у вас Гпт режим сайтс.

В таком режиме нейросеть может не только написать тексты или код, но и работать с файлами и браузером — это понадобится нам дальше при публикации.

Шаг 3. Получаем первую версию — и не пытаемся сразу сделать идеально

Первую версию моего лендинга ChatGPT собрал примерно за 30 минут, а Клод примерно так же.

И она уже была вполне рабочей.

Структура нормальная. Цвета и акцентные шрифты подобраны неплохо. Кейсы перенесены. Формы есть.

Но сразу появились проблемы:

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

Не надо заново писать огромное ТЗ.

Делайте скриншоты проблемных мест и показывайте их нейросети.

Например:

Так работать намного проще, чем пытаться словами объяснить:

Шаг 4. Добавляем изображения и свои фотографии

Одна из проблем первой версии — сайт получился слишком текстовым.

Я попросил ChatGPT добавить изображения.

Часть визуалов он сгенерировал самостоятельно.

Также можно просто загрузить свою фотографию и написать, где её использовать.

Например:

Добавь эту фотографию в блок обо мне / агентстве.

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

В моём случае нейросеть сама подрезала фотографию под нужное соотношение сторон и встроила её в дизайн.

После второй итерации сайт уже выглядел заметно живее.

Шаг 5. Делаем ещё одну итерацию — и останавливаемся

После изменений снова смотрим сайт целиком.

В моём случае оставались мелочи:

• где-то увеличить текст;
• где-то поправить отступ;
• изменить расположение одного блока;
• проверить открытие кейсов;
• проверить мобильную версию.

Здесь важно вовремя остановиться.

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

Но у нас задача другая.

Мы тестируем маркетинговую гипотезу.

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

Если с лендинга начинают приходить заявки — уже имеет смысл вкладываться в его дальнейшее развитие.

Шаг 6. Подключаем форму заявки

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

В моей версии ChatGPT сам подключил отправку данных формы на e-mail.При первой отправке сервис попросил подтвердить адрес электронной почты.Нажимаем активацию и ещё раз отправляем тестовую заявку.Но тут есть важный момент.

В моём случае после переноса сайта на другой хостинг форма снова начала требовать подтверждение e-mail, а затем появилась довольно раздражающая CAPTCHA.

То есть технически форма существует — а пользователю оставить заявку неудобно.

Такое нельзя оставлять без проверки.

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

Шаг 7. Публикуем сайт на своём хостинге

Теперь самое интересное.

Раньше на этом этапе пришлось бы:

1. скачать файлы;
2. найти доступы к хостингу;
3. открыть панель;
4. создать папку;
5. загрузить файлы;
6. разобраться, куда положить index.html;
7. проверить адреса и пути.

В показанном в видео сценарии большую часть этого ChatGPT/Claude сделал самостоятельно.

Я написал примерно следующее:

Открываем адрес.

Сайт действительно работает.

В показанном сценарии всё это делалось через десктопное приложение ChatGPT/Claude с Work и встроенным браузером.

ChatGPT или Claude — что лучше для создания сайта?

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

Но процесс отличается.

ChatGPT

В моём тесте оказался удобнее именно для полного цикла:

Плюс изображения можно генерировать непосредственно внутри ChatGPT.

Claude

Тоже хорошо справился с сайтом и в некоторых местах предложил интересные дизайнерские решения.

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

Claude работал через браузерное расширение: анализировал страницу, нажимал элементы интерфейса, а загрузить подготовленные файлы на определённом этапе пришлось вручную.

С формой он предложил отдельную интеграцию через Cloudflare. Я её в тесте подключать не стал.

Поэтому универсального победителя здесь нет.

А ещё лучше — сделать две версии.

Если собираете лендинг для тестирования гипотезы, это вообще отличный вариант:

Что ИИ пока не отменяет

После такого эксперимента легко решить:

Не совсем.

ИИ очень хорошо подходит, когда нужно:

• быстро проверить новую аудиторию;
• сделать лендинг под рекламную кампанию;
• протестировать новый оффер;
• собрать MVP;
• запустить страницу мероприятия;
• сделать временный сайт;
• проверить новую услугу или продукт.

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

Потому что в тестовой версии ИИ вполне может:

• странно расставить блоки;
• сделать слишком мелкий текст;
• использовать тяжёлые изображения;
• забыть favicon;
• неправильно настроить форму;
• сделать неудобную мобильную версию;
• придумать не лучший пользовательский сценарий.

В моём тесте, например, одно из изображений оказалось слишком тяжёлым и заметно замедляло загрузку страницы.

То есть ИИ отлично делает первую рабочую версию.

А дальше всё зависит от задачи.