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

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

→ Получаем: социальное доказательство.

Итерация 13. Слайдер с работами.

Промт: «Сделай простой слайдер из трёх фотографий под шапкой. Стрелки влево-вправо работают».

→ Получаем: портфолио на главной.

Итерация 14. Логотип вместо текста.

Промт: «Замени текстовый логотип „Кадр“ в шапке на картинку-заглушку 100×50px. Я потом вставлю свой логотип».

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

Итерация 15. Счётчик преимуществ.

Промт: «Добавь после слайдера блок с тремя цифрами: 5 лет работы, 200+ клиентов, 1000+ фотосессий».

→ Получаем: убедительные цифры.

Итерация 16. SEO-теги.

Промт: «Добавь мета-теги title, description, keywords. Title — „Фотостудия Кадр | Профессиональная фотосъёмка“».

→ Получаем: сайт готов к поисковым системам.

Итерация 17. Иконки социальных сетей.

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

→ Получаем: социальные сигналы.

Итерация 18. Политика конфиденциальности.

Промт: «Добавь в футер ссылку „Политика конфиденциальности“, которая открывает модальное окно с текстом-заглушкой».

→ Получаем: юридическая безопасность.

Итерация 19. Ускорение загрузки.

Промт: «Оптимизируй код: убери лишние пробелы, перенеси весь CSS в отдельный тег style, а JS — в конец body».

→ Получаем: быстрая загрузка.

Итерация 20. Финальный штрих.

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

→ Получаем: шедевр.

20 итераций. 20—30 минут времени. От серых квадратов до профессионального сайта, который можно показывать клиентам.

Вы можете повторить это с любым проектом.

Принцип «Сначала скелет, потом мясо, потом кожа»

Это ментальная модель, которая спасёт вас от бесконечных переделок.

Этап 1. Скелет (итерации 1—3).

Вы делаете только структуру: блоки, заголовки, базовые цвета. Никаких анимаций, сложных форм, слайдеров. Только каркас.

Этап 2. Мясо (итерации 4—12).

Вы добавляете контент: карточки, кнопки, формы, отзывы. Сайт уже выглядит как сайт, но без изысков.

Этап 3. Кожа (итерации 13—20).

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

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

Скелет → Мясо → Кожа. Запомните как таблицу умножения.

Как формулировать итеративные промты

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

Плохой итеративный промт (переделывает всё):

«Переделай сайт, сделай по-другому, мне не нравится»

Нейросеть не знает, что именно не нравится. Она переделает как попало.

Хороший итеративный промт (меняет одно):

«Оставь всю структуру, но измени цвет кнопок с синего на зелёный #2D5A27»

Нейросеть видит: «оставь всё, кроме…» и меняет только указанное.

Шаблон идеального итеративного промта:

«Оставь всё как есть, но [конкретное изменение]. Ничего больше не трогай».

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

Как понять, что пора остановиться

Итерации могут быть бесконечными. Вы всегда можете найти «ещё одну мелкую правку».

Вот три признака, что пора остановиться и опубликовать сайт:

Признак 1. Вы начинаете править то, что уже правили дважды.

Если вы в третий раз меняете отступ у кнопки с 16px на 18px и обратно — вы вошли в цикл. Остановитесь. Разница не стоит времени.

Признак 2. Вы показываете сайт другу, и он не замечает последних трёх правок.

Если друг говорит «вроде так же, как вчера» — ваши правки микроскопические. Вы публикуете для людей, а не для себя-перфекциониста.

Признак 3. Вы начинаете придумывать функции, без которых сайт прекрасно работал.

«А давай добавим выпадающий список с 50 странами для телефона?» Не надо. Оставьте на вторую версию.

Идеал — враг хорошего. Опубликуйте сайт сейчас, улучшите через неделю.

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

Шедевр рождается не из идеального первого промта.

Шедевр рождается из 20 маленьких улучшений.

Начните с убогого.

Сделайте шаг.

Оцените.

Исправьте.

Повторите.

Через 20 раз у вас будет то, от чего отвиснет челюсть.

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

Архитекторы делают наброски. Скульпторы начинают с глыбы. Писатели пишут черновики.

Вы начинаете с убогого макета. И это прекрасно.

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

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

Возьмите любой проект (например, сайт для вымышленного дела). Пройдите 5 итераций по схеме «Скелет → Мясо → Кожа»:

— Итерация 1: заголовок + три карточки-заглушки

— Итерация 2: шапка и футер

— Итерация 3: цвета и фон

— Итерация 4: кнопки и формы

— Итерация 5: адаптив и мелкие улучшения

Засеките время. Вы удивитесь, как много можно сделать за 10 минут.

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

Напишите нейросети: «Оставь весь код, но измени [одну конкретную вещь]». Например: «Оставь всё, но сделай все заголовки H1 размером 48 пикселей». Проверьте, изменилось ли только это (нейросети иногда «умничают» и меняют лишнее). Если изменила лишнее — добавьте в промт магические слова: «Ничего больше не трогай».

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

Найдите у себя признак перфекционизма. Ответьте честно: «Я могу опубликовать сайт, если он не идеален, но работает и выглядит достойно?» Если нет — пропишите себе разрешение: «Я опубликую сайт, когда он будет на 80% идеален. Остальные 20% доделаю на следующий неделе».

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

Создайте документ «Лог итераций». Записывайте каждую итерацию и что вы изменили. Например:

— Ит.1: Создал скелет

— Ит.2: Добавил шапку

— Ит.3: Сменил фон на чёрный

— Ит.4: Увеличил кнопки

— Ит.5: Добавил адаптив

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

ГЛАВА 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. Просто скажите «сделай грид из трёх колонок» — нейросетка сама переведёт в код.