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

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

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

Вы не обязаны находить ошибки в коде.

Вы обязаны задавать правильные вопросы.

Нейросеть найдёт ошибки сама, если вы дадите ей улики.

Консоль браузера — ваш лучший друг (клавиша F12).

Скриншот — тысяча слов описания.

Просьба «объясни» — магический ключ к диагностике.

Вы — следователь, нейросеть — свидетель.

Хороший следователь не знает ответа заранее.

Он знает, какие вопросы задать.

С этого момента вы перестаёте бояться багов. Баг — это не ваша проблема. Это задача для нейросети, которую вы ставите через правильный допрос.

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

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

Создайте простой HTML-файл с кнопкой, которая должна показывать «Привет», но намеренно сломайте его. Например, напишите alert («Привет») с опечаткой: alrt («Привет»). Откройте в браузере. Нажмите F12. Скопируйте красную ошибку. Отправьте нейросети: «Вот код. Вот ошибка. Объясни и исправь». Проверьте, исправила ли.

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

Возьмите любой работающий код из предыдущих глав. Намеренно добавьте визуальный баг: например, уберите отступ у карточек или сделайте кнопку шириной 1000px. Сделайте скриншот. Отправьте нейросети, которая умеет видеть картинки (GPT-4o): «Посмотри на скриншот. Вот код. Вот что не так: [опишите проблему]. Исправь».

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

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

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

Распечатайте чек-лист «Допрос нейросети»:

— ☐ Нажал F12, скопировал красные ошибки?

— ☐ Сделал скриншот визуального бага?

— ☐ Описал шаги воспроизведения проблемы?

— ☐ Отправил всё нейросети с просьбой «объясни, а потом исправь»?

— ☐ Получил объяснение, которое звучит логично?

— ☐ Попросил исправление с условием «ничего больше не меняй»?

— ☐ Проверил исправление. Работает?

Держите этот чек-лист под рукой при каждой отладке. Через 5—10 раз он станет вашей второй натурой.

РАЗДЕЛ 2. ПОДГОТОВКА: ОТ ИДЕИ ДО ТЕХНИЧЕСКОГО ЗАДАНИЯ ЗА 10 МИНУТ

ГЛАВА 11. Чек-лист «Что я хочу от сайта»

Представьте, что вы пришли к архитектору и сказали: «Постройте мне здание». Архитектор спросит: «Какое? Жилой дом, торговый центр, школа или ангар для самолётов?»

Вы ответите. Потому что вы знаете, для чего вам здание.

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

Нейросеть, конечно, что-то сделает. Но попадёт ли она в цель? Только случайно.

Эта глава — ваш предстартовый чек-лист. Вы не пишете ни одного промта, пока не ответите на четыре группы вопросов. Тип сайта. Цель сайта. Аудитория сайта. Действия на сайте.

Четыре группы. Десять минут. И результат — промт, который даёт 80% точности с первого раза.

Группа 1. Тип сайта (что это вообще такое)

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

Вот основные типы сайтов. Прочитайте список и выберите тот, который подходит вам.

Сайт-визитка. Это один-три экрана с основной информацией: кто вы, чем занимаетесь, как вас найти, как с вами связаться. Никаких каталогов, корзин, личных кабинетов. Всё просто. Пример: сайт частного психолога, адвоката, фотографа, небольшой кофейни.

Лендинг (посадочная страница). Это один длинный сайт, который продаёт одну конкретную услугу или товар. Весь сайт ведёт к одной цели: купить, записаться, скачать, оставить заявку. Пример: страница курса «Английский за 3 месяца», страница акции на массаж, страница нового айфона.

Каталог (интернет-магазин). Это сайт, где много товаров, их можно фильтровать, сортировать, добавлять в корзину и покупать. Самый сложный тип для новичка. Пример: магазин одежды, зоотоваров, электроники.

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

Портфолио. Это сайт, где главное — работы. Фотографии, проекты, кейсы. Всё крутится вокруг визуального контента. Пример: сайт дизайнера, архитектора, веб-студии, художника.

Сервис (веб-приложение). Это сайт-инструмент. Вы пришли не читать и не смотреть, а делать: конвертировать валюту, генерировать пароли, считать калории, рисовать логотипы. Пример: онлайн-калькулятор, конвертер, генератор.

Как выбрать? Если вы сомневаетесь между двумя типами, выберите более простой. Визитка проще лендинга. Лендинг проще каталога. Вы всегда можете усложнить сайт позже. Переделать сложный сайт в простой — это больно.

Фраза для промта: «Сделай одностраничный сайт-визитку» или «Сделай лендинг» или «Сделай каталог из трёх товаров».

Группа 2. Цель сайта (зачем он нужен бизнесу)

У вашего сайта должна быть одна главная цель. Одна. Если целей несколько, сайт не сделает ни одной хорошо.

Плохо: «Хочу, чтобы люди узнали о компании, и сразу купили, и подписались на рассылку, и позвонили, и пришли в офис». Хорошо: «Хочу, чтобы оставили заявку на консультацию».

Вот самые частые цели. Выберите одну.

Цель 1. Позвонили. Человек увидел телефон и нажал на него. Всё, что нужно. Обычно для срочных услуг: такси, сантехник, ремонт.

Цель 2. Оставили заявку (лид). Человек заполнил форму: имя и телефон. Вы ему перезваниваете. Для большинства бизнесов.

Цель 3. Купили (онлайн-оплата). Человек добавил товар в корзину, ввёл карту и заплатил. Для интернет-магазинов.

Цель 4. Записались (на услугу). Человек выбрал дату и время. Для салонов красоты, стоматологий, врачей.

Цель 5. Скачали (файл, приложение, гайд). Для сбора контактов через полезный контент.

Цель 6. Подписались (на рассылку, соцсети). Для блогеров, медиа, инфобизнеса.

Цель 7. Прочитали (и запомнили бренд). Для имиджевых сайтов, где продажа не в онлайне.

Фраза для промта: «Главная цель сайта — сбор заявок через форму обратной связи» или «Главная цель — показ портфолио, звонок не главное».

Группа 3. Аудитория (кто приходит на сайт)

Вы не можете сделать сайт «для всех». Сайт для всех — это сайт ни для кого. Пенсионеру нужно крупные кнопки и большой шрифт. Подростку — ярко и динамично. Бизнесмену — строго и без воды.

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

Ответьте на три вопроса.

Первый вопрос. Кто эти люди?

Пол (не всегда важен, но иногда очень). Возраст (число или диапазон). Род занятий (студенты, бизнесмены, мамы в декрете, пенсионеры, айтишники). Пример: «Женщины 30—45 лет, мамы детей до 7 лет, живут в городе-миллионнике, средний достаток».

Второй вопрос. С каким настроением и проблемой они приходят?

Что у них болит? Чего они боятся? Что хотят получить прямо сейчас? Пример: «У них болит спина после сидячей работы, они боятся, что массаж будет болезненным, хотят быстрого облегчения без страданий».

Третий вопрос. Что они думают о вас до визита на сайт?

Доверяют? Не доверяют? Никогда не слышали? Считают дорогими? Пример: «Слышали, что у нас дорого, но качественно. Нужно развеять страх цены и подтвердить качество».

Фраза для промта: «Наша аудитория — женщины 30—45 лет, мамы в декрете. Они ценят время, не любят долгие формы. Сайт должен быть светлым, уютным, с крупными кнопками и минимумом текста».

Группа 4. Действия (что должен сделать посетитель)

Главная цель — одна. Но на сайте есть второстепенные действия. Они помогают достичь главной цели или делают путь к ней короче.

Вот список возможных действий. Выберите 2—3 главных (помимо основной цели).

Действие 1. Нажать на телефон (позвонить).

Действие 2. Заполнить короткую форму (имя + телефон).

Действие 3. Заполнить длинную форму (много полей).

Действие 4. Нажать кнопку «Записаться онлайн».

Действие 5. Перейти в каталог товаров.

Действие 6. Добавить товар в корзину.

Действие 7. Оформить заказ.

Действие 8. Подписаться на рассылку.

Действие 9. Скачать файл (прайс, гайд).

Действие 10. Посмотреть портфолио (галерею).

Действие 11. Прочитать статью до конца.

Действие 12. Нажать на иконку соцсети (уйти в соцсеть).

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

Фраза для промта: «На сайте должны быть кнопка „Записаться“ после каждого блока преимуществ, телефон в шапке (при нажатии открывается набор номера), форма из двух полей в конце страницы. Также добавь галерею работ, но без кнопки действия, просто для доверия».

Собираем всё вместе: супер-чек-лист

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

Тип сайта (выберите один).

— Сайт-визитка

— Лендинг

— Каталог / интернет-магазин

— Блог

— Портфолио

— Сервис / веб-приложение

Главная цель (выберите одну).

— Позвонили

— Оставили заявку (лид)

— Купили (онлайн-оплата)

— Записались (на услугу)

— Скачали файл

— Подписались на рассылку

— Прочитали и запомнили бренд

Аудитория (ответьте на три вопроса).

— Кто эти люди? (пол, возраст, род занятий, достаток)

— С какой проблемой приходят? (что болит, чего боятся, что хотят)

— Что думают о нас до визита? (доверие, цены, репутация)

Действия (выберите 2—3 второстепенных).

— Позвонить

— Заполнить короткую форму

— Заполнить длинную форму

— Записаться онлайн

— Перейти в каталог

— Добавить в корзину

— Оформить заказ

— Подписаться на рассылку

— Скачать файл

— Посмотреть портфолио

— Прочитать статью

— Перейти в соцсети

Пример заполненного чек-листа

Чтобы вы видели, как это работает в жизни, вот пример для реального бизнеса.

Тип сайта. Лендинг.

Главная цель. Оставить заявку на бесплатную диагностику автомобиля.

Аудитория. Мужчины 30—50 лет, владельцы автомобилей старше 7 лет. Живут в городе, ценят время, боятся, что их «разведут» на лишние ремонты. Думают, что официальные сервисы дорогие, а частные мастера — ненадёжные. Хотят честного диагноза без обязательств.

Действия. Основное — форма «Записаться на диагностику» (имя, телефон, марка авто). Второстепенные: позвонить сразу (для тех, кто не любит формы), посмотреть отзывы (для доверия), скачать прайс (чтобы убедиться в адекватных ценах).

Теперь вы берёте этот чек-лист и превращаете его в промт. Это будет самая простая часть. Вы просто переписываете ответы своими словами.

Как превратить чек-лист в промт (готовый шаблон)

Вот шаблон. Копируйте, вставляйте свои ответы из чек-листа.

«Сделай [тип сайта] для [название компании или описание дела].

Главная цель сайта — [главная цель].

Наша аудитория — [описание аудитории: кто, возраст, проблема, отношение к нам].

На сайте обязательно должны быть следующие действия: [список действий].

Учти, что [дополнительные важные нюансы из аудитории, например: «клиенты не любят долгие формы, поэтому форма должна быть из двух полей»].

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

Для нашего примера с автосервисом это будет выглядеть так:

«Сделай лендинг для автосервиса «Механик» (диагностика и ремонт иномарок).

Главная цель — сбор заявок на бесплатную диагностику. Форма: имя, телефон, марка авто.

Аудитория — мужчины 30—50 лет, владельцы старых иномарок. Боятся, что их обманут и навяжут лишние работы. Думают, что официальные дилеры дорого, а частники ненадёжно.

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

Учти, что форма должна быть короткой, без поля «комментарий». Добавь иконку доверия (гарантия возврата, если не помогли). Цвета: тёмно-синий и оранжевый (акцент). Сделай адаптив».

Видите? Вы не писали «сделай красиво». Вы просто перенесли ответы из чек-листа в предложения. Нейросеть получила всё, что нужно для точной работы.

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

Вы не можете получить точный сайт, если не знаете, чего хотите.

Чек-лист «Тип — Цель — Аудитория — Действия» заставляет вас сформулировать это за 10 минут.

Потратьте 10 минут до промта — сэкономите 2 часа на переделках.

Тип определяет форму.

Цель определяет главную кнопку.

Аудитория определяет тон и визуал.

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

Без чек-листа вы плывёте по течению. С чек-листом вы держите штурвал.

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

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

Прямо сейчас, не откладывая, заполните чек-лист для любого дела — реального или выдуманного. Хоть для магазина говорящих попугаев. Главное — пройти все четыре группы. Запишите ответы в блокнот или документ.

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

Возьмите свой первый промт из главы 1 или 2 (тот, где вы просили «сделай сайт для кофейни»). Сравните его с тем, что получится, если переписать его через чек-лист. Напишите новый промт по шаблону выше. Оцените разницу в точности.

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

Найдите в интернете два сайта из одной ниши (например, две кофейни или две стоматологии). Один вам нравится, другой — нет. Попробуйте определить для каждого: какой тип, какая цель, какая аудитория, какие действия. Поймите, почему один работает лучше другого именно с точки зрения этого чек-листа.

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

Распечатайте пустой чек-лист и повесьте рядом с компьютером. Перед каждым новым проектом вы физически берёте ручку и заполняете его на бумаге. Бумага и ручка работают лучше, чем «я это помню в голове».

Пустой чек-лист для печати:

ТИП САЙТА (выберите один):

□ Визитка □ Лендинг □ Каталог □ Блог □ Портфолио □ Сервис

ГЛАВНАЯ ЦЕЛЬ (одна):

АУДИТОРИЯ:

Кто: _________________________________ Проблема: _________________________________ Что думают о нас: _________________________________

ДЕЙСТВИЯ (2—3):

□ Позвонить □ Форма □ Запись □ Каталог □ Корзина

□ Подписка □ Скачать □ Портфолио □ Соцсети

ГЛАВА 12. Как использовать нейросеть для написания ТЗ для другой нейросети

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

Хорошая новость: нейросеть не устаёт, не торопится и всегда готова думать за вас.

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

Это называется «нейросеть пишет ТЗ для нейросети». Звучит как магия, но работает как конвейер.

Почему это работает вообще

Вот парадокс, который нужно понять раз и навсегда.

Нейросеть отлично умеет составлять планы, структуры и инструкции. Она может написать ТЗ на десять страниц. Но когда вы просите её сразу сделать сайт по этому ТЗ, она часто торопится, пропускает детали, «склеивает» шаги.

Если же вы сначала попросите её написать ТЗ (без кода), а потом скормите это ТЗ ей же (или другой нейросети) как промт — качество взлетает.

Почему? Потому что в первом случае нейросеть работает в режиме «генератор идей». Она не ограничена форматом кода, она может думать широко. Во втором случае она работает в режиме «исполнитель по инструкции». Инструкция чёткая — исполнение точное.

Разделение труда между «мозгом» и «руками» внутри одной нейросети даёт результат лучше, чем попытка сделать всё за один промт.

Схема работы: три шага к идеальному промту

Вот простая схема, которую вы будете использовать всегда.

Шаг 1. Грязный поток сознания.

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

Шаг 2. Нейросеть пишет ТЗ.

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

Шаг 3. Нейросеть (та же или другая) делает сайт по ТЗ.

Вы берёте готовое ТЗ, открываете новый чат (или очищаете историю текущего) и отправляете его как промт. С добавлением волшебной фразы: «Теперь сделай полный HTML/CSS/JS код по этому ТЗ».

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

Шаг 1. Поток сознания (как не бояться писать)

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

Вот пример того, как может выглядеть поток сознания. Пишите так, как думаете. Без редактирования.

«Привет. Я хочу сайт для своей кошачьей фермы. Она называется „Мур-Мур“. У нас британские короткошёрстные. Мы находимся в деревне Гаврилово, но возим по Москве и области. На сайте должны быть котята с фотками, цены, и чтобы можно было оставить заявку на бронирование. Ещё хочу рассказать про родителей котят — кота и кошку, у них есть титулы с выставок. Не хочу, чтобы сайт был слишком сладким и розовым. Пусть будет благородно, как британская порода — сдержанно, но дорого. Синий, серый, белый. Ещё конкуренты мои делают какую-то вакханалию с золотом и бантиками, я не хочу так. Хочу, чтобы было понятно, что мы ответственные заводчики, а не перекупы. И отзывы нужны, пока заглушками, потом добавлю. И телефон в шапке. И чтобы на телефоне нормально открывалось. Вроде всё. Ой, и ещё блог хочу, но не сейчас, позже. Пока без блога. И форму только имя и телефон, без лишних полей. Всё».

Этот текст — идеальный поток сознания. В нём есть эмоции («вакханалия с золотом»), повторы, незаконченные мысли, уточнения задним числом. И это прекрасно. Нейросеть любит такой текст, потому что в нём много сигнала.

Шаг 2. Нейросеть пишет ТЗ (точный промт)

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

Вот он:

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

1. Общая информация (тип сайта, главная цель, аудитория).

2. Структура страниц (что за чем идёт, блоки сверху вниз).

3. Визуальные требования (цвета, шрифты, стиль, что можно и что нельзя).

4. Функциональные требования (кнопки, формы, интерактив).

5. Адаптив и технические требования.

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

7. Что НЕ нужно делать (ограничения).

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

Нейросеть либо сразу выдаст ТЗ, либо задаст 3—5 уточняющих вопросов. Ответьте на них (ещё минута). И получите идеальное ТЗ.

Вот как будет выглядеть результат для нашей кошачьей фермы (сокращённо):

ТЕХНИЧЕСКОЕ ЗАДАНИЕ НА САЙТ «МУР-МУР»

1. Общая информация

Тип сайта: одностраничный сайт-визитка с элементами каталога.

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

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

2. Структура страницы (сверху вниз)

Блок 1. Шапка: логотип (текст «Мур-Мур»), меню (О нас, Котята, Отзывы, Контакты), телефон [phone].

Блок 2. Геройский блок: заголовок «Британские короткошёрстные из питомника „Мур-Мур“», подзаголовок «Родословная, документы, любовь с первого дня», кнопка «Выбрать котёнка» (якорь к блоку котят).

Блок 3. Блок «О питомнике»: текст про 7 лет работы, про ответственное разведение, про отличие от перекупов. Фото интерьера.

Блок 4. Блок «Наши родители»: две карточки — кот и кошка. Фото, кличка, титулы, характер.

Блок 5. Блок «Котята»: три карточки (имя, фото-заглушка, пол, цена от 25 000 до 60 000 руб, кнопка «Забронировать» открывает форму).

Блок 6. Блок «Почему мы»: три карточки с иконками (документы, прививки, адаптация).

Блок 7. Блок «Отзывы»: три отзыва с фото-заглушкой, текстом-заглушкой и оценкой 5 звёзд.

Блок 8. Форма бронирования: поля Имя, Телефон, выбрать котёнка (выпадающий список из имён из блока 5), кнопка «Отправить заявку».