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

Глава 6. Роль контекста: почему важно рассказать ИИ о своей кошачьей ферме, а не просить «просто сайт»

Что такое контекст для нейросети простыми словами

Контекст — это вся информация «за кадром», которая не видна на сайте, но определяет, каким он должен быть.

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

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

Она просто очень умный инструмент. А инструменту нужны вводные.

Почему «просто сайт» — это плохой промт

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

Ваш промт: «Сделай сайт для кофейни».

Что думает нейросеть: «Хорошо, кофейня. Я видел 50 тысяч сайтов кофеен. Сделаю стандарт: коричневый фон, фото чашки кофе, зерна зёрен, текст „Лучший кофе в городе“, меню из трёх позиций, карта проезда. Годится?»

Что вы получаете: Сайт, который выглядит как все кофейни мира. Он не плохой. Он просто никакой. Он не рассказывает, что ваша кофейня находится в библиотеке. Не говорит, что вы работаете только с фермерами из Руанды. Не упоминает, что у вас по средам скидка пенсионерам.

Нейросеть не знает этого, потому что вы не сказали.

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

История о кошачьей ферме (обещанная в заголовке)

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

Промт без контекста: «Сделай сайт для кошачьей фермы».

Что получите: Фото кошек, текст «Мы любим кошек», кнопка «Купить котёнка», контакты. Скучно.

Промт с контекстом: «Сделай сайт для питомника британских короткошёрстных кошек „Мур-Мур“. Наш питомник находится в деревне Гаврилово, Ярославская область. Мы работаем 7 лет, наши кошки — чемпионы выставок. Наша аудитория — семьи с детьми от 30 до 45 лет, которые хотят спокойного, ласкового питомца. Мы не продаём котят до 3 месяцев, отдаём только с документами и прививками. Наши цены — от 25 000 до 60 000 руб. Мы хотим на сайте: галерею котят с именами и характерами, страницу „Наши родители“ (кот и кошка с титулами), форму заявки на бронирование, блог с советами по уходу. Цвета сайта — нежно-голубой и белый, потому что это ассоциируется с чистотой и породой. Конкуренты делают сайты с золотом и виньетками, мы хотим минимализм и уют. Добавь отзывы реальных покупателей (пока заглушками) и блок „Почему мы, а не зоомагазин“».

Что получите: Сайт, который не спутаешь ни с каким другим. Который говорит с целевой аудиторией на её языке. Который вызывает доверие («Ага, они не просто продают, они любят кошек»). Который отвечает на возражения («почему дорого? потому что чемпионы и документы»).

В первом случае нейросеть сделала работу за 5 секунд. Во втором — за 10 секунд (ей всё равно, длинный промт или короткий). Но результат — небо и земля.

Контекст занял у вас лишние 2 минуты на написание. А сэкономил недели на переделках.

Какие виды контекста бывают

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

1. Контекст бизнеса (кто вы, чем занимаетесь, сколько лет).

Пример: «Мы — стоматология для взрослых, работаем с 2010 года, специализация — имплантация и протезирование. Детского приёма нет».

→ Без этого нейросеть может добавить игрушки в зоне ожидания и картинки с детьми.

2. Контекст аудитории (кто ваши клиенты).

Пример: «Наши клиенты — мужчины 35—50 лет, владельцы бизнеса, у них нет времени на долгие чтения, им нужна суть и кнопка „Записаться“».

→ Без этого нейросеть сделает длинные тексты и мелкие кнопки.

3. Контекст конкурентов (от чего вы отличаетесь).

Пример: «Конкуренты используют кислотные цвета и много анимации. Мы хотим спокойный, „дорогой“ минимализм, как у европейских клиник».

→ Без этого нейросеть может случайно скопировать стиль конкурентов.

4. Географический контекст (где вы находитесь, есть ли доставка).

Пример: «Мы работаем только в Москве и Московской области. Доставка курьером от 2 часов. Самовывоз из шоурума на Таганке».

→ Без этого нейросеть добавит карту с непонятным радиусом.

5. Контекст боли и возражений (почему клиенты не покупают, хотя должны).

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

→ Без этого нейросеть не догадается добавить блок с гарантиями и акциями.

6. Тон голоса (как вы разговариваете с клиентом).

Пример: «Мы общаемся дружелюбно, с юмором, но без панибратства. Обращение на „вы“. Никакого „привет, котик“».

→ Без этого нейросеть может написать «Привет, бро!» или, наоборот, сухо-официально.

Техника «Спроси у ИИ, что он хочет знать»

Самый простой способ собрать контекст — не мучиться самому, а попросить нейросеть помочь.

Вот рабочий промт:

«Ты — маркетинговый аналитик. Я хочу создать сайт для [описание вашего дела в двух предложениях]. Какие 10 вопросов ты задашь мне, чтобы понять контекст и сделать сайт идеальным? Не делай сайт пока, просто задай вопросы».

Нейросеть задаст вам вопросы. Вы честно ответите (за 5—10 минут). Потом скопируете свои ответы и добавите их в следующий промт — тот самый, на создание сайта.

Это как иметь помощника, который знает, что нужно спросить, но не знает ваших ответов. Вы даёте ответы — нейросеть превращает их в сайт.

Сколько контекста достаточно, а сколько — перебор

Вы можете подумать: «Значит, мне нужно написать роман про свой бизнес?»

Нет. Вот примерное правило:

Минимум (но уже хорошо):

5—7 предложений. Кто вы, что продаёте, кому, чем отличаетесь, главный цвет, главное действие (кнопка).

Оптимум (отлично):

2—3 абзаца. Всё из минимума плюс: география, боли клиентов, тон голоса, 2—3 конкурента, что на них не нравится.

Перебор (не нужно):

История основания компании с 1995 года с именами всех сотрудников и их любимыми цветами. Нейросеть утонет в деталях и начнёт игнорировать часть информации.

Правило «золотой середины»: контекста должно быть ровно столько, чтобы посторонний человек понял суть вашего бизнеса за 30 секунд чтения.

Если ваша подруга, прочитав контекст, скажет «а, ну теперь понятно, что за сайт тебе нужен» — вы написали ровно.

Ошибка, которую совершают все (и как её избежать)

Самая частая ошибка новичков: контекст в голове, а не в промте.

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

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

Очевидное для вас — неочевидное для нейросети.

Примеры «очевидного», которое нужно обязательно написать:

— «Наша кофейня находится внутри книжного магазина» (нейросеть не знает).

— «У нас нет стульев, только пуфы» (нейросеть не знает).

— «Наше меню написано мелом на доске» (нейросеть не знает).

— «Клиенты жалуются на громкую музыку, хотя у нас её нет — это соседи» (нейросеть точно не знает, но это не для сайта).

Проверьте себя: перед отправкой промта прочитайте его и спросите: «Если бы я ничего не знал об этом бизнесе, я бы понял, что здесь важно?» Если нет — добавляйте контекст.

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

Контекст — это топливо для нейросети.

Без контекста она выдаёт шаблон.

С контекстом — создаёт шедевр.

Вы знаете свой бизнес.

ИИ знает код.

Вместе вы непобедимы.

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

Каждая деталь, которую вы добавите в промт — про конкурентов, про аудиторию, про страхи, про географию, — превращается в пиксели на экране. Пиксели, которые говорят «этот сайт сделан для меня».

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

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

Напишите промт-запрос к нейросети: «Задай мне 10 вопросов, чтобы понять контекст моего будущего сайта для [вставьте вашу идею]». Ответьте на эти вопросы. Теперь у вас есть готовый контекст.

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

Сделайте два промта для одного и того же дела:

— Промт А (без контекста): «Сделай сайт для [ваше дело]».

— Промт Б (с контекстом): Возьмите ответы на 10 вопросов из задания 1, добавьте 2—3 предложения про конкурентов и аудиторию.

Отправьте оба промта в нейросеть (лучше в разные чаты, чтобы не путались). Сравните результаты. Разница вас шокирует.

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

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

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

Создайте документ «Мой контекст для нейросети» и сохраните его. Каждый раз перед созданием сайта копируйте оттуда нужные пункты:

— Моя сфера и специализация

— Моя аудитория (пол, возраст, интересы)

— Мои конкуренты (чем они плохи, чем я лучше)

— Моя география

— Боли и страхи моих клиентов

— Мой тон общения (дружелюбный, строгий, дерзкий)

— Мои любимые цвета и стиль

Этот документ — ваша «приправа», которая превращает типовой сайт в уникальный.

ГЛАВА 7. Итеративный подход: от убогого макета к шедевру за 20 промтов

У вас есть идеальный образ сайта в голове. Вы его видите: цвета, шрифты, расположение блоков, анимации при наведении.

И вы думаете: «Вот сейчас я напишу идеальный промт, и нейросеть выдаст мне этот образ в виде кода с первой попытки».

Поздравляю. Вы только что поставили себе ловушку.

Так не работает. Никогда. Даже у профессионалов с тысячами часов практики.

Почему? Потому что нейросеть не читает мысли. Потому что вы не можете предусмотреть всё в одном промте. Потому что код — это сложная материя, и даже идеальный промт даёт результат «хорошо, но не то».

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

Это называется итеративный подход.

Что такое итерация простыми словами

Итерация — это один цикл «попросил → получил → оценил → поправил».

Вы начинаете с чего угодно. С убогого макета, с одного блока, с базовой структуры. Потом смотрите, что получилось. Потом говорите нейросети, что именно исправить. Получаете новую версию. И так 5, 10, 20 раз.

Каждая итерация — это микрошаг вперёд.

В конце концов убогий макет превращается в шедевр. Не потому что нейросетка вдруг поумнела. А потому что вы 20 раз уточняли, чего именно хотите.

Вот как это выглядит в реальности.

Итерация 1.

Вы: «Сделай сайт для кофейни».

Нейросеть: (выдаёт стандартную кофейню).

Вы: «Фу, убого».

Итерация 2.

Вы: «Сделай шапку с логотипом слева и меню справа».

Нейросеть: (исправляет шапку).

Вы: «Уже лучше, но кнопки слишком мелкие».

Итерация 3.

Вы: «Увеличь кнопки до 48 пикселей и добавь им зелёный фон».

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

Вы: «Отлично, теперь убери эту уродливую тень».

Итерация 4.

Вы: «Убери тень у кнопок, вместо этого добавь лёгкое скругление 8px».

Нейросеть: (убирает тень, добавляет скругление).

Вы: «Вау, теперь кнопки выглядят дорого».

И так далее. Никто не просит шедевр в первой итерации. Все просят «сделай базово», а потом доводят до ума.

Почему новички ненавидят итерации (и как полюбить)

Большинство новичков делают одну и ту же ошибку.

Они пишут гигантский промт на 2000 символов. Со сложными условиями, вложенными блоками, специфическими анимациями. Отправляют. Получают результат. Результат не идеален. Они расстраиваются. Думают: «Нейросеть тупая». Бросают.

А нужно было сделать просто: начать с малого и уточнять.

Почему мы боимся итераций?

Страх 1. «Это долго».

Кажется, что 20 промтов — это 20 минут ожидания. На самом деле каждая итерация занимает 10—30 секунд на написание и 5—10 секунд на получение ответа. 20 итераций = 10—15 минут. Создать сайт с нуля за 15 минут — это долго?

Страх 2. «Я должен был предвидеть всё с первого раза».

Это перфекционизм. Он убивает. Никто не предвидит всё. Даже профессиональные промт-инженеры с опытом начинают с простого и наращивают сложность.

Страх 3. «Нейросеть обидится, если я буду придираться».

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

Итерации — это не признак неудачи. Это признак профессионализма.

Как выглядят 20 итераций на примере

Давайте пройдём весь путь от нуля до шедевра. Реальный пример. Сайт для фотостудии «Кадр».

Итерация 1. Скелет.

Промт: «Сделай простейший HTML-файл с заголовком „Фотостудия Кадр“ и тремя карточками услуг: „Портрет“, „Предметка“, „Репортаж“».

→ Получаем: три серых карточки в ряд. Убого. Но скелет есть.

Итерация 2. Добавляем структуру.

Промт: «Добавь шапку с логотипом (текстом „Кадр“) и меню: Услуги, Портфолио, Контакты. Внизу — футер с телефоном и копирайтом».

→ Получаем: появились шапка и футер. Уже похоже на сайт.

Итерация 3. Меняем цвета.

Промт: «Сделай фон страницы чёрным, текст белым, акцентный цвет — золотой #FFD700».

→ Получаем: чёрный фон, белый текст, золотые детали. Стильно.

Итерация 4. Улучшаем карточки.

Промт: «Сделай карточки услуг с тенью, скруглением 12px, отступом внутри 20px. При наведении пусть карточка слегка поднимается вверх».

→ Получаем: карточки стали выглядеть как карточки, а не как серые квадраты.

Итерация 5. Добавляем картинки-заглушки.

Промт: «Добавь в каждую карточку картинку-заглушку 300×200px с серым фоном и текстом „Фото“. Потом я заменю на свои».

→ Получаем: место под фото есть, структура готова.

Итерация 6. Адаптив для телефона.

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

→ Получаем: на телефоне всё красиво.

Итерация 7. Кнопка действия.

Промт: «Добавь под каждой карточкой кнопку „Записаться“ с золотым фоном, чёрным текстом, без скругления».

→ Получаем: кнопки, которые хочется нажать.

Итерация 8. Форма связи.

Промт: «Добавь после карточек форму обратной связи: поля Имя, Телефон, кнопка „Отправить заявку“».

→ Получаем: форма для клиентов.

Итерация 9. Сообщение об успехе.

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

→ Получаем: интерактив.

Итерация 10. Шрифты.

Промт: «Подключи шрифты Google Fonts: заголовки — Montserrat, текст — Open Sans».

→ Получаем: профессиональная типографика.

Итерация 11. Анимация появления.

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

→ Получаем: wow-эффект.

Итерация 12. Отзывы клиентов.