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

ГЛАВА 8. Разница между «сделай красиво» и конкретными инструкциями

Давайте проведём эксперимент.

Закройте глаза и представьте слово «красиво».

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

А теперь представьте, что мы с вами смотрели на одно и то же слово, а увидели разное. И оба правы.

В этом и проблема.

«Красиво» — это самое опасное слово в промт-инжиниринге. Оно ничего не значит. Точнее, оно значит всё, но для каждого — своё.

Нейросеть, получив слово «красиво», вынуждена угадывать. А угадывает она то, что статистически чаще всего встречалось в учебных данных. А там чаще всего — синие градиенты, огромные заголовки, картинки счастливых людей и кнопки с тенью.

Другими словами, нейросеть делает «усреднённо-красиво». То, что нравится большинству. То есть никому конкретно.

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

Почему «сделай красиво» — это провал

Давайте разберём этот промт под микроскопом.

Промт: «Сделай красивый сайт для стоматологии».

Что происходит в голове у нейросети:

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

Что вы получаете:

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

Что вы чувствуете:

«Вроде нормально, но не то. Не знаю, что именно не так, но что-то не то».

И вы правы. Не то. Потому что «красиво» для стоматолога из спального района и «красиво» для стоматолога-премиум в центре Москвы — это две большие разницы.

Нейросеть не знает, какой вы. Вы не сказали.

Анатомия абстракций (слов-паразитов в промтах)

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

Вы видите проблему? Каждое ваше «красиво» нейросеть переводит в конкретный визуальный штамп. И этот штамп может не совпадать с вашим вкусом.

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

Как переводить «красиво» на человеческий язык

Вместо абстракции вы даёте конкретику по пяти параметрам.

Параметр 1. Цвета.

Вместо «сделай красиво» → «Цвета: тёмно-синий (#1A2A4F) для фона, белый для текста, акцент — медный (#B87333) для кнопок».

Параметр 2. Формы.

Вместо «сделай современно» → «Скругления у карточек 16px, у кнопок — 8px. Все углы прямые у шапки и футера».

Параметр 3. Пространство (воздух).

Вместо «сделай просторно» → «Отступы между блоками по 80px, внутренние отступы в карточках — 24px».

Параметр 4. Типографика (шрифты).

Вместо «сделай читаемо» → «Заголовки — Playfair Display 48px, текст — Open Sans 18px с межстрочным интервалом 1.5».

Параметр 5. Настроение (чем заменить «уютно/дорого/строго»).

Вместо «сделай уютно» → «Используй тёплые пастельные тона (#FDF3E7), фото с мягким освещением, без резких теней, шрифты с засечками».

Вместо «сделай дорого» → «Много пустого пространства (отступы 100px), тёмный фон, золотые акценты, минималистичные иконки в одну линию».

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

Теперь нейросеть не гадает. Вы дали ей карту, а не компас.

Разбор реальной ошибки 99% людей

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

Новичок: «Сделай красивый лендинг для курса английского языка».

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

Новичок: «Не то. Сделай посовременнее».

Нейросеть: (делает тёмный фон, неоново-розовые акценты, огромный заголовок «ENGLISH IS POWER»).

Новичок: «Фу, теперь слишком агрессивно. Верни как было, но сделай красиво».

Нейросеть: (возвращает синий сайт, но меняет шрифт и тень у кнопки).

Новичок: «Ладно, оставь».

Результат: новичок получил первый же вариант, просто потратил 10 минут на бессмысленный диалог. Потому что он не знал, как объяснить, что именно ему не нравится.

А могло быть так:

Профи: «Сделай лендинг для курса английского для IT-специалистов. Аудитория — мужчины 25—35 лет. Цвета: тёмно-серый фон (#2C2C2C), акцент — зелёный (#00A86B), как терминал. Шрифты — моноширинные для заголовков (как код), обычные для текста. Без фото людей, только иконки и схемы. Кнопки квадратные, без скруглений. Добавь блок „Технический английский за 3 месяца“ с таймером обратного отсчёта».

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

Профи не сказал ни слова «красиво». Он сказал конкретные цвета, шрифты, формы, ограничения. И получил сайт, который красив в контексте своей аудитории.

Упражнение «Переводчик с человеческого на промтовый»

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

Пример 1.

«Сделайте сайт женственным».

→ «Используй пастельные тона: розовый (#F9E5E5) и мятный (#E0F2E5). Шрифты с засечками (Cormorant Garamond). Скругления 20px. Добавь плавные линии, без острых углов. Иконки — цветы или линии».

Пример 2.

«Сделайте сайт мужественным».

→ «Только тёмные цвета: чёрный, тёмно-серый, тёмно-синий. Прямые углы, никаких скруглений. Шрифты рубленые без засечек (Montserrat, Oswald). Фото — индустрия, техника, крупные планы текстур. Без пастельных тонов и цветочков».

Пример 3.

«Сделайте сайт детским».

→ «Яркие основные цвета: жёлтый #FFD166, синий #118AB2, красный #EF476F. Скругления 24px (всё мягкое). Шрифт весёлый, круглый (Comic Neue — можно, это как раз тот случай). Много иллюстраций, а не фото. Анимация — подпрыгивающие кнопки».

Пример 4.

«Сделайте сайт технологичным».

→ «Тёмный фон (#0A0F1A). Сетка, линии, неон. Шрифт моноширинный или геометрический (Space Grotesk). Акценты — синий и фиолетовый. Анимация появления с размытием. Минималистичные иконки в стиле „линии“. Без фото людей в офисах».

Чувствуете разницу? В первом случае вы надеетесь, что нейросеть догадается. Во втором — вы ей говорите прямо. Догадки нейросети стоят вам времени. Прямые инструкции — секунды на написание.

Самый мощный приём «Опиши как слепому»

Вот ментальный трюк, который мгновенно улучшит ваши промты.

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

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

Если вы говорите «сделай красивую тень» — слепой не поймёт. Если вы говорите «тень 4 пикселя по вертикали, 2 по горизонтали, размытие 8 пикселей, цвет чёрный с прозрачностью 25%» — слепой поймёт.

Примеры перевода:

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

Тест «Найди абстракцию в своём промте»

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

— Красиво, симпатично, приятно

— Современно, модно, стильно

— Уютно, душевно, тепло

— Дорого, богато, премиум

— Просто, легко, минималистично

— Эффективно, конверсионно, продающе

— Надёжно, солидно, серьёзно

Если нашли хотя бы одно — остановитесь. Замените его на конкретные параметры (цвета, размеры, шрифты, формы, настроение через описания).

Чем больше конкретики, тем точнее результат.

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

«Красиво» — это не инструкция. Это молитва.

Молитвы нейросеть не выполняет.

Она выполняет приказы.

Приказ — это цвета, размеры, шрифты, отступы, формы.

Хотите красивый сайт?

Не просите красоту.

Опишите её по косточкам.

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

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

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

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

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

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

Переведите три абстракции в конкретику (прямо сейчас, не отправляя нейросети):

— «Сделай кнопку заметной» →?

— «Сделай текст воздушным» →?

— «Сделай сайт весёлым» →?

Напишите свои варианты. Сравните с эталоном в конце главы.

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

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

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

Распечатайте список «Стоп-слов» и повесьте над монитором:

— КРАСИВО

— СОВРЕМЕННО

— УЮТНО

— ДОРОГО

— ПРОСТО

— ЭФФЕКТИВНО

— НАДЁЖНО

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

Эталон к заданию 2 (не подглядывайте, пока не сделаете сами):

— «Сделай кнопку заметной» → «Сделай кнопку высотой 56px, шириной 240px, фон — оранжевый #FF6B35, белый текст, жирный шрифт 18px, тень 0px 4px 12px rgba (0,0,0,0.15)».

— «Сделай текст воздушным» → «Поставь межстрочный интервал 1.8, отступы между абзацами 32px, цвет текста светло-серый #666666 на белом фоне, шрифт с лёгким начертанием (weight: 300)».

— «Сделай сайт весёлым» → «Жёлтый (#FFD166) и ярко-розовый (#EF476F) акценты, скругления 24px, шрифт Comic Neue, анимация подпрыгивания при наведении на кнопки, иконки-смайлы, плавные линии вместо прямых углов».

ГЛАВА 9. Минимальный словарь для общения с ИИ

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

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

И вы думаете: «Вот сейчас нейросетка решит, что я чайник, и начнёт отвечать хуже».

Неправда. Нейросеть не оценивает ваш словарный запас. Но есть два важных «но».

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

Второе: вы перестаёте бояться. А страх, как мы знаем из второй главы, — главный враг.

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

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

Термин 1. Макет

Перевод на человеческий. Это рисунок сайта до того, как он ожил. Как чертёж дома до того, как залили фундамент. Макет показывает, где будет шапка, где меню, где картинки, где кнопки. Но кнопки пока не нажимаются, картинки не двигаются.

Пример из жизни. Вы рисуете на салфетке план кухни: «Здесь холодильник, здесь плита, здесь мойка». Это макет. Потом приходят строители и воплощают.

Как использовать в промте. «Сначала дай мне текстовое описание макета из пяти блоков, а потом пиши код». Или: «Нарисуй макет сайта словами: блок 1 — шапка, блок 2 — большой заголовок, блок 3 — три карточки, блок 4 — форма, блок 5 — футер».

Чего бояться не надо. Макет — это просто план. Если вы можете объяснить, что идёт сверху вниз, вы уже создали макет.

Термин 2. Адаптив

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

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

Как использовать в промте. Всегда, всегда добавляйте в конец промта: «Сделай адаптив для экранов меньше 768 пикселей (телефоны) и меньше 1024 пикселей (планшеты)». Без этой фразы нейросеть часто делает только компьютерную версию.

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

Термин 3. Грид

Перевод на человеческий. Это способ раскладывать блоки по сетке. Представьте шахматную доску. Вы говорите: «Хочу, чтобы на этой доске блоки стояли ровно в три колонки и две строки». Грид — это та самая невидимая доска, которая держит блоки ровно, без смещений.

Пример из жизни. Вы раскладываете фотографии в альбоме. Если клеите на глаз — криво. Если расчертили страницу на квадраты и вклеиваете в каждый — ровно. Грид — это расчерченная страница.

Как использовать в промте. «Размести карточки товаров в грид из трёх колонок на компьютере, двух на планшете, одной на телефоне». Или: «Сделай грид 2×2 для преимуществ компании».

Чего бояться не надо. Вы не обязаны знать свойства grid-template-columns. Просто скажите «сделай грид из трёх колонок» — нейросетка сама переведёт в код.