Как создать сайт, используя одни нейросети

ГЛАВА 13. Промт «Ты — технический аналитик. Разработай структуру сайта под мой бизнес»

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

Шаг называется «проектирование структуры».

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

Вы нанимаете архитектора. Он говорит: «Я посмотрю на ваш участок, на ваши привычки и спроектирую оптимальную планировку».

То же самое со структурой сайта. Вы знаете, какие блоки должны быть. Но вы не знаете, в каком порядке их расположить, чтобы посетитель не ушёл, а совершил нужное действие. Чтобы сначала возникло доверие, потом желание, потом действие.

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

Почему структура важнее дизайна

Ошибка новичка: сначала выбрать цвета и шрифты, потом думать, что куда поставить.

Правило профессионала: сначала структура, потом визуал. Потому что правильная структура продаёт. Красивый визуал без структуры — это красивая, но пустая коробка.

Что такое правильная структура? Это порядок блоков, который ведёт посетителя по пути: «Узнал → Заинтересовался → Захотел → Поверил → Действие».

Неправильная структура: «Вот телефон. Вот карта. Вот котята. Вот отзывы. Вот форма». Посетитель запутался и ушёл.

Правильная структура (для кошачьей фермы): «Вот кто мы (блок о питомнике, доверие). Вот наши родители (экспертность). Вот котята (желание). Вот почему мы (преимущества). Вот отзывы (социальное доказательство). Вот форма (действие)».

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

Роль «Технический аналитик» — что это значит

Когда вы пишете «Ты — технический аналитик», вы включаете у нейросети особый режим. Она перестаёт быть просто генератором текста. Она становится:

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

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

Инженером. Она продумывает, какие технические элементы нужны (формы, слайдеры, фильтры) и как они сочетаются.

Маркетологом. Она понимает, что кнопка «Записаться» должна быть не только в конце, но и после каждого блока преимуществ.

Без роли «технический аналитик» нейросеть выдаст структуру «как получится». С ролью — структуру, которая прошла через фильтры профессионала.

Готовый промт «Ты — технический аналитик»

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

*«Ты — технический аналитик с 10-летним опытом проектирования сайтов. Твоя специализация — структура, которая ведёт пользователя к целевому действию.*

Вот информация о моём бизнесе:

— Что я продаю или предлагаю: [описание в двух-трёх предложениях]

— Кто моя целевая аудитория: [кто они, их проблемы, их страхи]

— Главная цель сайта: [одно действие: заявка, звонок, покупка, запись]

— Что должно быть на сайте обязательно: [перечислите 3—5 блоков или элементов, которые вы точно хотите]

Твоя задача — разработать оптимальную структуру одностраничного сайта (лендинга или визитки). Структура должна быть в виде списка блоков сверху вниз. Для каждого блока укажи:

— Название блока.

— Его цель (что должен понять или почувствовать пользователь после этого блока).

— Какие элементы внутри (заголовки, текст, кнопки, картинки, формы).

— К чему этот блок ведёт (какое следующее действие или блок).

В конце добавь рекомендации: каких блоков не хватает, а какие лишние. Объясни логику своей структуры — почему блоки идут именно в таком порядке, а не в другом.

Не пиши код. Только аналитику и структуру».

Этот промт заставляет нейросеть не просто перечислить блоки, а объяснить логику. А когда нейросеть объясняет логику, она сама проверяет себя на ошибки.

Пример работы промта (кошачья ферма «Мур-Мур»)

Давайте отправим наш промт с заполненными данными и посмотрим, что вернёт нейросеть-аналитик.

Входные данные (то, что вы написали в квадратных скобках):

Что я продаю: британских короткошёрстных котят из питомника. Отдаём только с документами, прививками, после 3 месяцев. Цена от 25 000 до 60 000 руб.

Аудитория: семьи с детьми 30—45 лет, ищут породистого друга, боятся перекупов и болезней, хотят спокойного и ласкового питомца.

Главная цель: заявка на бронирование котёнка.

Что должно быть обязательно: котята с фото и ценами, родители с титулами, отзывы, форма бронирования.

Ответ нейросети (сокращённо):

СТРУКТУРА САЙТА (СВЕРХУ ВНИЗ)

Блок 1. Шапка

Цель: дать возможность сразу позвонить или перейти к котяткам.

Элементы: логотип (текст), меню (якоря к блокам), телефон.

Ведёт к: звонку или блоку котят.

Блок 2. Геройский блок

Цель: за секунду объяснить, кто вы и почему стоит остаться.

Элементы: заголовок «Британцы с родословной и любовью», подзаголовок про 7 лет опыта, крупная кнопка «Смотреть котят» (якорь к блоку котят).

Ведёт к: блоку котят.

Блок 3. Блок «Почему питомник, а не перекуп»

Цель: снять главное возражение — страх обмана.

Элементы: три карточки с иконками и текстом: «Документы и родословная», «Прививки по возрасту», «Котята с 3 месяцев — социализированы».

Ведёт к: усилению доверия, переходу к родителям.

Блок 4. Блок «Наши родители — чемпионы»

Цель: показать экспертность и породность.

Элементы: две карточки (кот и кошка): фото, кличка, титулы, характер.

Ведёт к: блоку котят (вы увидели родителей — теперь хотите детей).

Блок 5. Блок «Наши котята»

Цель: вызвать эмоции «хочу» и дать информацию для выбора.

Элементы: три карточки (фото-заглушка, кличка, пол, цена, кнопка «Забронировать»).

Ведёт к: форме бронирования (по нажатию на кнопку — плавный скролл к форме, с предзаполненным полем выбора котёнка).

Блок 6. Блок «Отзывы»

Цель: социальное доказательство — другие уже счастливы.

Элементы: три отзыва (фото семьи, текст «спасибо», звёзды).

Ведёт к: усилению доверия, переходу к форме.

Блок 7. Форма бронирования

Цель: целевое действие.

Элементы: поля Имя, Телефон, выпадающий список с кличками котят, кнопка «Отправить заявку».

Ведёт к: всплывающему сообщению об успехе.

Блок 8. Карта и контакты

Цель: для тех, кто хочет приехать лично.

Элементы: Яндекс. Карта (заглушка), адрес, режим работы.

Ведёт к: футеру.

Блок 9. Футер

Цель: повторный контакт и юридическая информация.

Элементы: телефон, ссылки на соцсети, политика конфиденциальности.

Рекомендации аналитика

Чего не хватает: блока «Часто задаваемые вопросы» — он снижает количество звонков с одними и теми же вопросами. Рекомендую добавить после отзывов, перед формой. Лишних блоков нет. Логика структуры: Доверие (питомник, родители) → Желание (котята) → Подтверждение (отзывы) → Действие (форма). Это стандартная воронка для эмоциональных покупок.

Видите, как глубоко нейросеть проанализировала? Она не просто перечислила блоки. Она объяснила, зачем каждый блок, куда он ведёт, какова психологическая механика. И даже добавила рекомендацию про блок FAQ, о котором вы не думали.

Это уровень Junior-аналитика за 50 000 руб. Бесплатно. За 2 минуты.

Как использовать эту структуру дальше

Вы получили структуру. Что с ней делать?

Вариант 1. Отправить нейросети на создание сайта.

Берёте структуру (блоки, их описание, рекомендации) и добавляете в ваш промт на создание сайта. Или вставляете в ТЗ из главы 12. Нейросеть уже знает порядок, психологию и элементы.

Вариант 2. Уточнить и доработать.

Вы не согласны с каким-то блоком или порядком. Пишете: «Сделай блок FAQ перед формой, как ты рекомендовал. И поменяй местами блок родителей и блок „Почему питомник“ — родители вызывают больше доверия, чем иконки». Нейросеть скорректирует структуру.

Вариант 3. Использовать как чек-лист для готового сайта.

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

Когда структура не нужна (а когда очень нужна)

Структура от аналитика нужна не всегда. Вот таблица-подсказка (текстом, без таблицы):

Когда структура очень нужна.

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

Когда структура нужна, но можно проще.

Вы делаете сайт-визитку для себя или маленькой компании. У вас 3—4 блока, всё очевидно. Вы можете сами перечислить порядок в промте за 30 секунд.

Когда структура не нужна.

Вы делаете простой инструмент (конвертер, генератор паролей). Там один блок с формой и результатом. Или делаете блог — там главное не порядок, а удобство чтения.

Правило большого пальца: если на сайте больше 5 блоков, закажите структуру у аналитика. Если меньше — можете придумать сами.

Усложнённая версия: аналитик с цифрами

Если вы хотите не просто структуру, а структуру, основанную на данных, добавьте в промт:

«Учитывай, что 70% моих клиентов приходят с мобильных устройств. 80% решений принимают женщины. Среднее время на сайте — 1 минута 20 секунд. Адаптируй структуру под эти цифры».

Нейросеть подстроится: сделает блоки короче (чтобы успели прочитать за 1:20), вынесет важное в начало (для мобильных), добавит визуала и эмоций (для женской аудитории).

Вы можете не знать таких цифр. Но если знаете хотя бы приблизительно — поделитесь с аналитиком.

Главная идея тринадцатой главы

Вы можете знать, какие блоки нужны.

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

Роль «технический аналитик» включает у нейросети режим архитектора и психолога.

Сначала структура — потом визуал.

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

Вы перестаёте гадать, что за чем идёт. Вы поручаете эту задачу нейросети, у которой в «голове» миллионы проанализированных сайтов и воронок. Она знает, что работает. Вы просто берёте готовый рецепт.

ПРАКТИКУМ К ГЛАВЕ 13

Задание 1 (7 минут).

Откройте нейросеть. Скопируйте промт «Ты — технический аналитик» из этой главы. Заполните квадратные скобки для любого вымышленного или реального дела. Отправьте. Получите структуру из 7—10 блоков с объяснениями.

Задание 2 (5 минут).

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

Задание 3 (5 минут).

Не согласитесь с каким-то блоком. Напишите нейросети: «Хорошая структура, но поменяй местами блоки X и Y, потому что моя аудитория сначала хочет увидеть цены, а потом отзывы». Нейросеть скорректирует. Посмотрите, как изменилась логика.

Задание 4 (закрепить).

Создайте документ «Мои структуры». Сохраните туда 3—4 структуры от аналитика для разных типов бизнеса (услуги, товары, инфопродукты, недвижимость). Когда вам понадобится сайт для нового дела, вы откроете документ и возьмёте структуру из похожей ниши как основу.

Задание 5 (для продвинутых).

Отправьте аналитику дополнительный вопрос: «А теперь представь, что у нас очень низкий бюджет на рекламу, и 90% трафика — органический из поиска. Как изменится структура?» Нейросеть перепроектирует структуру под SEO: добавит текстовые блоки, ключевые слова, внутренние ссылки.

ГЛАВА 14. Собираем референсы: просим ИИ описать стиль 3 лучших сайтов в нише

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

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

Проблема в том, что вы не дизайнер. Вы смотрите на красивый сайт и чувствуете: «Мне нравится. Хочу так же». Но не можете объяснить словами, что именно вам нравится. «Ну, красиво. Ну, современно. Ну, стильно».

Нейросеть может за вас провести этот анализ. Вы даёте ей ссылки на три сайта (или описываете их), а она возвращает вам разбор стиля: цвета, шрифты, композицию, отступы, настроение. Этот разбор вы превращаете в инструкцию для создания своего сайта.

Это называется «сбор референсов через ИИ». И это легально, этично и очень эффективно.

Почему референсы нужны даже гениям

Самые талантливые дизайнеры начинают не с чистого листа. Они начинают с «досок вдохновения» — коллекций чужих работ, которые им нравятся. Потом они анализируют, почему эти работы хороши. Потом синтезируют своё.

Если вы пропускаете этап референсов, вы рискуете:

Риск 1. Изобрести велосипед.

Вы придумываете структуру или цветовое решение, которое уже сто раз сделано до вас, но сделано хуже.

Риск 2. Сделать не соответствующее нише.

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

Риск 3. Потратить часы на то, что можно сделать за минуты.

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

Референсы — это не жульничество. Это исследование рынка.

Что нейросеть может увидеть в чужом сайте (а вы — нет)

Вы смотрите на сайт и видите: «Красиво. Синий фон. Крупные буквы».

Нейросеть (особенно если вы даёте ей описание или скриншот) видит гораздо больше.

Она видит цветовую схему: не просто «синий», а конкретный оттенок, контрастность, сочетаемость.

Она видит типографику: не просто «крупный шрифт», а размеры заголовков и текста, интерлиньяж, гарнитуру.

Она видит композицию: сетку, отступы, выравнивание, соотношение пустого и заполненного пространства.

Она видит настроение: строгое, игривое, дорогое, технологичное — через сочетание всех визуальных элементов.

Она видит паттерны: где находится логотип, как устроено меню, куда ведёт взгляд, где главная кнопка.