Полная версия
Как создать сайт, используя одни нейросети
→ Нейросеть: синяя кнопка с белым текстом, скруглённые углы 5px, тень. Неплохо, но таких миллион.
Уровень 3 (инструкция).
Промт: «Сделай зелёную кнопку с белым текстом, без скруглений, размер 200×50 пикселей»
→ Нейросеть: именно то, что попросили. Но если вы не указали шрифт, она возьмёт стандартный.
Уровень 4 (конституция).
Промт: «Сделай кнопку. Параметры: фон #2D5A27, цвет текста #FFFFFF, ширина 200px, высота 50px, скругление 8px, шрифт Roboto 18px, жирный. При наведении фон меняется на #1E3B1A, курсор — pointer. Тень 0 2px 4px rgba (0,0,0,0.2). Отступы внутри: 0. Всё без JavaScript, только CSS».
→ Нейросеть: идеальная кнопка, которую можно сразу вставлять в любой проект.
Разница между уровнем 1 и 4 — 30 секунд на написание. Разница в результате — как между «лишь бы работало» и «профессионально».
Жёсткие и мягкие части промта
Хорошая конституция имеет два типа статей:
Жёсткие (обязательные к исполнению).
Их нельзя нарушать. Формулируйте их чётко, без вариантов.
Пример: «Цвет фона — #FFFFFF». «Кнопка должна быть 48 пикселей в высоту». «На телефоне карточки в один столбец».
Мягкие (пространство для творчества).
То, в чём вы доверяете нейросети. Это ваша «зона удивления».
Пример: «Сделай красивую тень для карточек», «Добавь приятную анимацию при наведении», «Используй современные тенденции в типографике».
Правило: 80% жёстких, 20% мягких. Если вы укажете всё жёстко — сайт будет точным, но бездушным. Если всё мягко — красивым, но непредсказуемым. Баланс даёт лучшее из двух миров.
Как проверить, хороший ли у вас промт-конституция
Задайте себе три вопроса перед отправкой:
Вопрос 1. Если бы этот промт прочитал робот, который не знает контекста моей жизни, он бы понял всё однозначно?
→ Если есть слово «красивый», «удобный», «нормальный», «хороший» — робот не поймёт. Замените на конкретику.
Вопрос 2. Я описал все блоки по порядку сверху вниз?
→ Если вы сказали «сделай форму и карту», робот может переставить их местами. Если сказали «сначала форма, потом карта» — не переставит.
Вопрос 3. Я явно указал, что нельзя делать?
→ Если вы не сказали «не используй JavaScript», нейросеть может его использовать. Если не сказали «не подключай внешние библиотеки», она может подключить jQuery или FontAwesome.
Если на все три вопроса «да» — отправляйте. Результат вас приятно удивит.
Главная идея пятой главы
Размытый промт — размытый результат.
Точный промт — точный результат.
Промт-конституция исключает двусмысленность.
А двусмысленность — главный враг нейросетей.
Нейросеть не обижается на жёсткие инструкции. Наоборот — она благодарна. Потому что чем меньше ей нужно додумывать, тем меньше шансов ошибиться.
Ваша задача как «пилота» — не просто хотеть сайт. Ваша задача — превратить своё хотение в набор фактов, цифр, цветов, последовательностей и ограничений.
И тогда нейросеть построит вам дворец. А не сарай.
ПРАКТИКУМ К ГЛАВЕ 5
Задание 1 (5 минут).
Возьмите любой старый плохой промт из вашей головы (или придумайте: «сделай сайт для моей кошки»). Перепишите его как конституцию по шаблону:
— Роль: «Ты — веб-дизайнер…»
— Формат: «Дай полный HTML-код…»
— Последовательность: «Блок 1 — …, блок 2 — …»
— Ограничения: «Не используй JavaScript…»
— Конкретные значения: «Цвет #…, размер…»
Задание 2 (3 минуты).
Отправьте в нейросеть оба варианта: сначала плохой («сделай сайт для кошки»), потом конституцию. Сравните результаты. Разница будет колоссальной.
Задание 3 (5 минут).
Найдите в своём плохом промте хотя бы три «слова-паразита», которые нейросеть может понять неправильно: «красиво», «удобно», «быстро», «современно», «надёжно», «просто». Замените каждое на конкретное описание.
Пример:
Вместо «быстро загружался» → «оптимизируй картинки и не используй тяжёлые библиотеки».
Вместо «удобное меню» → «меню должно быть всегда видно на десктопе, на телефоне сворачиваться в иконку-бургер».
Задание 4 (закрепить).
Распечатайте (или напишите от руки) чек-лист хорошего промта. Повесьте рядом с компьютером:
— Я указал роль для нейросети?
— Я описал формат результата?
— Я перечислил блоки по порядку?
— Я добавил ограничения («не делать»)?
— Я заменил все «красиво» на конкретные цвета/размеры?
— Я представил, что это читает робот без контекста моей жизни?
Представьте, что вы приходите к архитектору и говорите:
«Спроектируйте мне дом».
Архитектор спросит: «Для кого? Сколько комнат? В каком стиле? Из каких материалов? Какой бюджет? Где участок?»
Если вы ответите: «Да просто дом, нормальный такой», — архитектор вежливо улыбнётся и предложит вам типовой проект из каталога. Такой же, как у тысячи других клиентов.
То же самое с нейросетью. Когда вы пишете «сделай сайт для цветочного магазина» — вы получаете типовой цветочный магазин. Их нейросеть видела десятки тысяч. Он будет правильным, но безликим.
Когда вы пишете «сделай сайт для цветочного магазина „Лилия“ в Санкт-Петербурге, мы работаем с 2015 года, специализируемся на монобукетах из пионов, наша аудитория — девушки 25—40 лет, которые дарят цветы без повода, наш главный конкурент — „Мимоза“, у них агрессивный красный дизайн, мы хотим отличаться нежно-розовым и текстурой льна» — вы получаете уникальный сайт.
Разница между этими двумя промтами — контекст.
Глава 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. Отзывы клиентов.
