Бесплатный фрагмент - Как создать сайт, используя одни нейросети

РАЗДЕЛ 1. ФИЛОСОФИЯ НУЛЕВОГО КОДА

ГЛАВА 1. Почему «написать сайт» и «создать сайт» — разные вещи (и нейросеть сделает второе)

Вы сейчас держите в руках (или читаете на экране) книгу, которая ломает главный миф современного интернета.

Миф звучит так:

«Чтобы сделать сайт, нужно уметь программировать. Или нанять программиста. Или хотя бы разобраться в конструкторах типа Tilda или WordPress».

Неправда.

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

Чему вас НЕ учили в школе

Давайте сразу договоримся о терминах. Это важно, потому что 90% людей проигрывают битву с сайтами ещё до первого клика.

«Написать сайт» — это когда вы садитесь и пишете код вручную. Строчка за строчкой. HTML, CSS, JavaScript. Вы помните, что такое display: flex и почему margin: 0 auto иногда не работает. Вы гуглите «как сделать слайдер» и копируете чужой код, потом три часа отлаживаете.

Это путь самурая. Уважаемо. Долго. Скучно.

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

ИИ делает второе. Он создаёт, а не «помогает написать».

Разрушаем главный страх новичка

Прямо сейчас, читая эту главу, вы можете подумать:

«Но я же ничего не смыслю в коде. Я даже слово „див“ произношу с ошибкой. Как я проконтролирую нейросеть?»

Отличный вопрос. И ответ вас удивит.

Когда вы просите нейросеть сделать сайт для кофейни, она не ждёт, что вы укажете:

— display: grid с тремя колонками

— justify-content: space-between

— border-radius: 16px с вендорными префиксами

Нет.

Вы говорите:

«Сделай сайт для кофейни „Уголь“. У нас есть шапка с логотипом, меню из трёх позиций (эспрессо, капучино, раф), кнопка „Забронировать столик“ и карта проезда. Сделай красиво, современно, адаптивно под телефон. Цвета — тёмно-серый и терракотовый».

И нейросеть сама решает:

— Где использовать flex, а где grid.

— Какой размер шрифта сделать на мобилке.

— Как отцентрировать кнопку.

— Как добавить плавную анимацию при наведении.

Вы не пишете код. Вы описываете результат.

Простая аналогия

Вы когда-нибудь заказывали дизайн-проект квартиры?

Вы не говорите дизайнеру:

«Начертите мне план в AutoCAD, используя слой 3, полилинию с толщиной 0.5 мм и штриховку ANSI31»

Вы говорите:

«Я хочу, чтобы спальня была в светлых тонах, кровать стояла у окна, а розетка — с обеих сторон».

Дизайнер переводит ваши «хотелки» в чертежи.

Нейросеть — тот же дизайнер, только для кода. Вы описываете что, она делает как.

Подвох, о котором молчат

Но есть один нюанс. И если его не понять — вы всё равно провалитесь.

Нейросеть не читает мысли.

Если вы скажете «сделай сайт красиво» — она сделает стандартно. Синий градиент, белый фон, картинка счастливых людей. Скучно.

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

Магия начинается там, где вы учитесь разговаривать с нейросетью. Говорить на её языке, но оставаться человеком.

Что вы уже умеете, даже не зная этого

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

Вы умеете:

— Объяснять, как должна выглядеть страница («шапка сверху, три карточки товаров, кнопка внизу»)

— Замечать, что что-то не так («эта кнопка слишком маленькая»)

— Показывать пальцем («вот здесь, после меню, должен быть отзыв»)

Этого достаточно.

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

Главная идея первой главы (вынесите её в закладки)

«Написать сайт» — это про код.

«Создать сайт» — это про результат.

Нейросеть берёт на себя код.

Вы берёте на себя результат.

В этой книге вы ни разу не откроете учебник по JavaScript. Вы откроете чат с нейросетью.

И через 80 глав вы сможете сделать сайт, который:

— Работает на телефоне, планшете и компьютере

— Принимает заявки в месенджер

— Выглядит как работа профессионала за 2000 долларов

Но при этом вы не напишете ни одной строчки кода вручную.

Честно.

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

Не читайте дальше, пока не сделаете это. Займёт 3 минуты.

Задание 1. Откройте ChatGPT, Claude или любую другую нейросеть (даже бесплатную версию).

Задание 2. Скопируйте и отправьте этот промт (можно заменить «кофейню» на что угодно):

*«Ты — веб-дизайнер. Опиши структуру простого сайта-визитки для кофейни „Уют“. Укажи 5 основных блоков (например: шапка, меню, о нас, контакты). Не пиши код, просто опиши словами, что где находится». *

Задание 3. Посмотрите на ответ. Нейросеть поняла задачу? Она написала по-русски? Она предложила логичную структуру?

Если да — вы только что создали первый прототип сайта через ИИ. Без единой строчки кода.

ГЛАВА 2. Главный страх новичка: «Я ничего не понимаю в программировании» — и как ИИ его убивает

Давайте признаемся честно.

Вы открыли эту книгу не потому, что хотели изучить тег <div> или понять разницу между let и const. Вы открыли её, потому что у вас есть идея, бизнес, хобби или просто желание — но не программист.

И где-то глубоко внутри сидит этот липкий, противный голос:

«А что, если нейросеть выдаст код, а я не смогу его даже прочитать? Что, если он не заработает? Что, если все вокруг поймут, что я сам ничего не умею?»

Я не буду вас утешать. Я скажу правду.

Вы действительно ничего не понимаете в программировании

И это ваше главное преимущество.

Парадокс, правда? Объясняю.

Человек, который немного знает HTML, но не разобрался до конца, будет мучиться. Он увидит код, сгенерированный ИИ, и начнёт:

— Править его вручную («тут я знаю, лучше сделать по-другому»)

— Бояться сломать то, что работает

— Тратить часы на то, чтобы «подкрутить отступы»

Абсолютный новичок делает проще:

— Скопировал код.

— Вставил.

— Проверил.

— Не работает? Скопировал ошибку → отправил ИИ → получил исправленный код.

— Всё.

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

Эксперимент, который сломает ваш мозг (в хорошем смысле)

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

Представьте, что я даю вам задание:

«Напишите письмо на английском языке генеральному директору Toyota с предложением купить ваш стартап по производству бумажных самолётиков».

Вы не знаете английский? Не беда. Вы откроете переводчик. Или ChatGPT. Или попросите друга.

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

То же самое с программированием.

Код — это просто язык. Искусственный. Строгий. Но язык.

Вы не обязаны на нём говорить. Вы обязаны получать результат.

Что на самом деле нужно знать новичку (спойлер: почти ничего)

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

— Копировать (Ctrl+C)

— Вставлять (Ctrl+V)

— Читать (чтобы увидеть, где ИИ написал «вставьте сюда ваш API-ключ»)

— Отправлять ошибку в чат (просто скопировали красный текст → отправили)

Всё.

Вы не должны знать:

— Что такое DOM-дерево

— Почему undefined — это не то же самое, что null

— Как работает всплытие событий

— Зачем нужен z-index

— Что такое «промис» (это вообще не ругательство)

Вам не нужно. ИИ знает.

Разрушаем самый главный миф

«Если я не понимаю код, я не смогу его отладить»

Отладка — это когда вы ищете ошибку.

Как вы ищете ошибку сейчас, ничего не понимая в коде?

Очень просто.

Шаг 1. Вы видите, что кнопка не работает.

Шаг 2. Вы нажимаете F12 (да, прямо в браузере), видите красную строчку.

Шаг 3. Вы копируете эту красную строчку.

Шаг 4. Вы пишете ИИ: «У меня такая ошибка: [вставить красную строчку]. Исправь код»

Шаг 5. ИИ даёт новый код.

Шаг 6. Вы вставляете. Всё работает.

Вы не поняли, в чём была ошибка. Вы не исправляли её вручную. Вы просто передоверили это ИИ.

И это нормально.

Вы же не чините двигатель своей машины, когда загорается «Check Engine». Вы едете к механику. ИИ — ваш механик, который всегда открыт и ничего не просит за диагностику.

Что происходит в голове у ИИ (упрощённо)

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

Она действует как переводчик с человеческого на машинный.

Вы: «Сделай три карточки товаров в ряд»

ИИ (внутренний монолог): «Ага, пользователь хочет контейнер с display: grid, три колонки, внутри каждой — картинка, заголовок, цена и кнопка. Добавлю gap: 20px для отступов. На мобилке сделаю одну колонку через медиа-запрос».

Вы не сказали про grid. Вы не сказали про медиа-запросы. ИИ сам додумал это на основе миллионов примеров, на которых его обучили.

Вы просто описали что, а он сделал как.

Тест на профпригодность (пройдут все)

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

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

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

Третий вопрос. Вы готовы копировать и вставлять текст из чата в файл?

Если хотя бы на один вопрос вы ответили «да» — вы уже можете создавать сайты через ИИ.

Если вы ответили «нет» на все три — вы либо робот, либо притворяетесь.

Секрет, который не пишут в других книгах

Вот правда, которую скрывают гуру программирования:

Программисты тоже ничего не понимают в огромных кусках кода, который они копируют из интернета.

Разница лишь в том, что они лучше притворяются.

Когда разработчик берёт готовую библиотеку или сниппет со Stack Overflow, он часто не вникает в детали. Он проверяет, работает ли это, и идёт дальше.

То же самое делаете вы. Просто ваш «Stack Overflow» — это нейросеть, которая пишет код лично под вас, а не generic-ответ на чужую проблему.

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

Давайте посмотрим на разницу между «до» и «после».

Было (когда вы боялись):

«Я не могу сделать сайт».

«Нужно учить HTML, CSS, JS год».

«Найму фрилансера за 50 000 руб».

«Ошибка в коде — это катастрофа».

«Я никогда не пойму этот JavaScript».

Стало (когда страх ушёл):

«Какой сайт сделаем сегодня?»

«Нужно написать 10 промтов за час».

«Сделаю сам за вечер».

«Ошибка в коде — это ещё один промт».

«Я никогда и не буду его писать».

Чувствуете разницу? Это не преувеличение. Это опыт тысяч людей, которые прошли этот путь до вас.

Главная идея второй главы (повесьте над рабочим столом)

Вы не обязаны понимать программирование.

Вы обязаны понимать, чего хотите.

ИИ соединит эти две точки.

Страх «я ничего не понимаю» убивается простым фактом:

Вы не будете ничего писать вручную. Вы будете описывать и проверять.

Это как управлять самолётом с помощью автопилота. Вы не знаете, как работает турбина. Но вы знаете, куда лететь.

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

Сделайте это прямо сейчас, чтобы страх исчез навсегда.

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

Откройте любой чат с ИИ. Напишите:

*«Привет. Я ничего не понимаю в программировании. Дай мне простейший HTML-код одной кнопки, которая при нажатии показывает „Привет, мир!“. Всё объясни так, будто мне 5 лет». *

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

Скопируйте код, который дал ИИ. Сохраните в файл index.html (обычный блокнот подойдёт). Откройте файл в браузере двойным щелчком.

Нажмите на кнопку.

Работает? Поздравляю. Вы только что создали работающий JavaScript, не понимая JavaScript.

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

Сломайте это специально. Удалите в коде одну кавычку или скобку. Сохраните. Откройте в браузере. Увидели ошибку? Скопируйте её в ИИ со словами:

«Вот код. Вот ошибка. Исправь»

ИИ даст исправленный код. Вставьте его. Всё работает.

Задание 4 (повторение — самое важное).

Повторите упражнение с поломкой три раза, каждый раз ломая код по-разному (удалите точку с запятой, закройте тег не с той стороны, сотрите слово function).

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

ГЛАВА 3. Что умеют современные нейросети для веба

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

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

Мы разберём шесть главных инструментов: GPT-4o, Claude, Gemini, Copilot, v0 и Replit Agent.

Поехали.

Знакомство с командой

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

Давайте познакомимся с каждым.

1. GPT-4o — универсальный солдат

Кто это.

Нейросеть от компании OpenAI. Та самая, которую большинство людей называют «ChatGPT», хотя ChatGPT — это только интерфейс, а «мозг» внутри — GPT-4o (буква «о» означает «omni» — всё сразу).

Что умеет для сайта.

Она понимает текст, картинки (смотрит на скриншот и видит, где кнопка съехала), голос и даже может сгенерировать простые изображения. Пишет HTML, CSS, JavaScript — уверенно, быстро, понятно.

Сильные стороны.

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

Слабые стороны.

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

Цена.

Бесплатная версия (GPT-4o mini) — есть, но с ограничениями. Полноценная — $20 в месяц (около 1800 руб). Для создания сайтов лучше брать платную — она в разы умнее.

Для каких сайтов.

Лендинги, сайты-визитки, простые каталоги, блоги. Всё, где не нужна сверхсложная логика.

Вердикт.

Лучший выбор для новичка. Начинайте здесь. Когда упрётесь в потолок — переходите к следующему.

2. Claude — вежливый архитектор

Кто это.

Нейросеть от компании Anthropic. Главный конкурент GPT-4o. Многие программисты считают Claude лучшим кодерам среди всех ИИ.

Что умеет для сайта.

Пишет очень чистый, аккуратный код. Комментирует каждую сложную строчку. Объясняет, почему он сделал так, а не иначе. Отлично понимает большие файлы (может «увидеть» весь ваш сайт целиком, если вы дадите ему код).

Сильные стороны.

Код Claude — как дорогой ресторан: красиво, понятно, ничего лишнего. Он редко выдумывает несуществующие функции. Идеально подходит, если вы хотите не просто скопировать, а ещё и разобраться, как это работает.

Слабые стороны.

Не умеет «смотреть» на картинки (пока что). Вы не можете дать ему скриншот макета и сказать «сделай так же». Только текстовое описание. Строже относится к формулировкам — не любит кашу в промтах.

Цена.

Бесплатная версия — щедрая, но с лимитом сообщений. Pro-версия — $20 в месяц.

Для каких сайтов.

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

Вердикт.

Когда GPT-4o начнёт «тупить» на сложных задачах — переходите к Claude. Лучший код, но требует более внятных инструкций.

3. Gemini — поисковик с характером

Кто это.

Нейросеть от Google. Встроена во все сервисы Google (Gmail, Docs, Поиск). Огромный плюс — доступ к актуальным знаниям из интернета в реальном времени.

Что умеет для сайта.

Пишет код, но чуть хуже, чем GPT-4o или Claude. Зато отлично ищет ошибки, объясняет сложные концепции и может проверить ваш код на «современность» (соответствие последним стандартам).

Сильные стороны.

Мгновенно подтягивает свежую документацию. Если вы спросите: «Как сейчас правильно делать адаптив в 2025 году?» — Gemini даст актуальный ответ, а не советы из 2018-го. Интеграция с Google-сервисами: можно дать ссылку на Google Таблицу, и он её «увидит».

Слабые стороны.

Самый «зацензуренный» среди всех. Отказывается делать некоторые вещи «из соображений безопасности». Код может быть слишком многословным.

Цена.

Бесплатная версия — хорошая, но без доступа к самым умным моделям. Платная (Gemini Advanced) — около $20 в месяц.

Для каких сайтов.

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

Вердикт.

Не первая, а вторая или третья нейросеть в вашем арсенале. Берите, если остальные не знают что-то актуальное.

4. Copilot — напарник внутри редактора кода

Кто это.

Нейросеть от GitHub (принадлежит Microsoft). Встроена прямо в редакторы кода (VS Code, PyCharm и другие). Не похожа на чат — это скорее «автодополнение с интеллектом».

Что умеет для сайта.

Вы начинаете писать код (или просто комментарий на русском), а Copilot предсказывает, что вы хотите сделать, и предлагает готовый код целиком.

Пример: вы пишете комментарий // сделать слайдер изображений — и Copilot вставляет готовую работающую функцию.

Сильные стороны.

Молниеносно. Не нужно копировать и вставлять из чата — код появляется прямо у вас в файле. Отлично понимает контекст всего вашего проекта (видит все файлы, а не только один).

Слабые стороны.

Требует установки (редактор кода + плагин). Новички пугаются интерфейса. Без хорошего начального комментария может предложить ерунду.

Цена.

Бесплатно для студентов и авторов open-source проектов. Для всех остальных — $10–19 в месяц.

Для каких сайтов.

Если вы решили всё-таки освоить базовый редактор кода (это несложно, глава 50+), Copilot ускорит работу в 3 раза. Для чистого «общения в чате» — не подходит.

Вердикт.

Инструмент для продвинутых новичков. Не начинайте с него. Сначала научитесь общаться с GPT или Claude, потом добавляйте Copilot как ускоритель.

5. v0 — дизайнер-кодер в одном флаконе

Кто это.

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

Что умеет для сайта.

Вы пишете: «Сделай карточку товара с картинкой, ценой и кнопкой „Купить“ в стиле Apple». ИИ показывает вам готовую карточку — прямо в браузере, сразу. Вы можете кликнуть на неё, подвигать, покрутить. Если что-то не нравится — говорите «сделай кнопку красной», и она меняется на глазах.

Сильные стороны.

Невероятная скорость прототипирования. То, на что вручную уходит час, v0 делает за 30 секунд. Вы сразу видите результат, не сохраняя файлы и не открывая браузер отдельно.

Слабые стороны.

Использует специфичный фреймворк React, а не чистый HTML/CSS. Перенести готовый сайт из v0 в обычный файл — чуть сложнее. Бесплатная версия сильно ограничена (лимит генераций в день).

Цена.

Есть бесплатный тариф (около 50 генераций в месяц). Pro — $20 в месяц.

Для каких сайтов.

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

Вердикт.

Игрушка для энтузиастов и мощный инструмент для тех, кто не боится React. Новичку можно попробовать, но начинать лучше с GPT-4o.

6. Replit Agent — автономный работяга

Кто это.

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

Что умеет для сайта.

Вы пишете: «Сделай сайт-портфолио для фотографа с галереей и формой связи». Агент создаёт папки, файлы, пишет код, запускает сервер и выдаёт вам ссылку на работающий сайт через 2–3 минуты.

Сильные стороны.

Полная автоматизация. Вы не сохраняете файлы, не запускаете локальный сервер — ничего. Результат сразу в интернете.

Слабые стороны.

Ограниченный контроль. Если агент сделал не так — переделывать сложнее. Без платной подписки код принадлежит Replit (вы не сможете скачать его и перенести к себе).

Цена.

Бесплатно — очень слабые модели и очередь. Платная подписка — от $15 в месяц.

Для каких сайтов.

Очень простые проекты «для себя». Или для быстрой проверки идеи.

Вердикт.

Красивая демонстрация будущего, но сегодня ещё сыровато. Не полагайтесь на него для серьёзных проектов.

Какую выбрать? Чёткая схема

Вот простой алгоритм для новичка:

Шаг 1. Зарегистрируйтесь в ChatGPT (GPT-4o). Бесплатной версии достаточно для первых 10 глав. Но если есть $20 в месяц — возьмите платную, она того стоит.

Шаг 2. Если ChatGPT не справляется (например, выдаёт кривой код или врёт про документацию) — попробуйте Claude. Скопируйте тот же промт туда.

Шаг 3. Если вам нужно что-то очень свежее (API, новый браузерный стандарт) — подключите Gemini.

Шаг 4. Когда сделаете 3–4 сайта вручную через чат и вам надоест копировать код в файлы — установите VS Code + Copilot. Это следующий уровень скорости.

Шаг 5. v0 и Replit Agent — оставьте на десерт. Попробуйте, когда вам станет скучно.

А что насчёт Midjourney и DALL-E?

Вы заметили: я не включил сюда генераторы картинок. Почему?

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

Midjourney, DALL-E 3, Kandinsky — это отдельная история. Вы просите: «создай фон для сайта кофейни в тёплых тонах», получаете картинку и вставляете её в код, который написал GPT-4o.

Мы подробно разберём генерацию изображений в главе 19. Пока просто знайте: картинки и код — разные инструменты, и это нормально.

Главная идея третьей главы

Нет одной лучшей нейросети.

Есть лучшая нейросеть для вашей конкретной задачи.

Новичок начинает с GPT-4o. Профи переключается между GPT-4o, Claude и Gemini как перчатками.

Вы не обязаны пользоваться всеми. Но вы обязаны знать, какая что умеет. Потому что в какой-то момент GPT-4o скажет: «Я не знаю», а Claude — «Сейчас сделаю».

И вы будете готовы.

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

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

Зарегистрируйтесь в ChatGPT (chat.openai.com) и Claude (claude.ai) — оба имеют бесплатные тарифы.

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

Напишите один и тот же промт в обе нейросети:

«Напиши HTML и CSS для трёх карточек товаров в ряд. Товары: кофе, чай, круассан. Цены: 150, 120, 90. Сделай современно, с тенями и скруглёнными углами»

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

Сравните результаты. Чей код красивее? Чей понятнее? У кого карточки лучше выглядят на мобилке (сузьте окно браузера)?

Сохраните оба варианта. В следующих главах вы научитесь улучшать и тот, и другой.

Задание 4 (по желанию, 10 минут).

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

ГЛАВА 4. Ограничения: чего ИИ НЕ сделает за тебя

К этому моменту вы уже, наверное, почувствовали эйфорию.

«Вау! Я могу просто попросить — и нейросеть напишет код! Зачем тогда вообще учить программирование? Зачем платить разработчикам? Я теперь всё сделаю сам!»

Стоп. Выдохните.

Я обожаю нейросети. Я сам пишу эту книгу с их помощью. Но если я скажу вам, что ИИ может всё — я солгу. А ложь на старте убивает проекты быстрее любой ошибки в коде.

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

Спойлер: этих мест не так много. Но каждое — критически важно.

Три кита, на которых держится любой сайт

Любой сайт в интернете — это три вещи:

— Код (HTML, CSS, JS) — то, что нейросеть пишет отлично.

— Доменное имя — адрес сайта (например, moy-sait.ru).

— Хостинг — компьютер в интернете, где лежат файлы сайта.

ИИ блестяще делает первое.

Второе и третье он не делает вообще. Вообще. Никак.

И это не «пока не умеет». Это не «в следующей версии добавим». Это архитектурное ограничение: нейросеть живёт внутри чата. У неё нет доступа к вашему кошельку, к регистраторам доменов и к серверам.

Но есть хорошая новость: домен и хостинг покупаются за 5–10 минут. Это не сложнее, чем заказать пиццу. Просто нужно знать, где нажимать. И мы научим вас этому в разделе 6 (главы 51–60).

А пока — давайте разберём все ограничения по полочкам.

Ограничение №1. Покупка домена

Что это такое.

Домен — это адрес вашего сайта. google.com, yandex.ru, ваша-кофейня.рф. Без домена сайт есть, но зайти на него можно только по сложной цифровой ссылке типа 192.168.1.100/~user/site. Никто по такой ссылке не пойдёт.

Что ИИ может.

Он подскажет, где купить домен (Reg.ru, Nic.ru, Beget, Timeweb, Namecheap — если нужен зарубежный). Он посоветует, какое имя придумать. Он проверит, свободно ли имя (если дать ему доступ к поиску — у GPT-4o и Gemini такая возможность есть).

Чего ИИ не сделает.

Он не зайдёт на сайт регистратора, не заполнит ваши паспортные данные, не привяжет карту для оплаты и не нажмёт кнопку «Купить». Это делаете вы. Своими руками. Потому что это ваш кошелёк и ваши персональные данные.

Сколько времени нужно вам.

5 минут, если имя уже придумано. 15 минут, если ещё думаете.

Ограничение №2. Хостинг

Что это такое.

Хостинг — это аренда места на чужом мощном компьютере, который работает 24/7. Вы кладёте туда файлы сайта (код, картинки), и эти файлы становятся доступны всем в интернете.

Что ИИ может.

Он расскажет, какой хостинг лучше для вашей задачи (бесплатный Netlify для простых сайтов, платный Beget/Timeweb для серьёзных проектов). Он напишет пошаговую инструкцию: куда нажать, что скопировать, куда вставить. Он даже объяснит, как не ошибиться с тарифом.

Чего ИИ не сделает.

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

Сколько времени нужно вам.

Первый раз — 20 минут со страхом и инструкцией. Пятый раз — 3 минуты.

Важнейшее уточнение. Есть бесплатные хостинги (Netlify, Vercel, GitHub Pages). Они не просят карту. Но регистрация и нажатие кнопок — всё равно за вами. ИИ не сделает это вместо вас.

Ограничение №3. Настройка DNS (привязка домена к хостингу)

Что это такое.

Вы купили домен mycafe.ru на одном сайте (регистраторе). Вы арендовали хостинг на другом сайте. DNS-записи — это «табличка», которая говорит интернету: «Когда кто-то вводит mycafe.ru, покажи ему файлы с хостинга».

Что ИИ может.

Он напишет точные настройки: какие значения вбить в поля A-запись, CNAME, NS. Он подскажет, где на сайте регистратора находится панель управления DNS.

Чего ИИ не сделает.

Он не зайдёт в ваш личный кабинет регистратора, не найдёт нужный раздел и не вставит туда значения. Это делаете вы. Следуя его инструкции как карте.

Сколько времени нужно вам.

10 минут с первого раза, если инструкция хорошая. 3 минуты — если уже делали.

Ограничение №4. Загрузка файлов на хостинг

Что это такое.

У вас есть папка с файлами сайта (index.html, style. css, script. js, папка с картинками). Их нужно перенести на хостинг.

Что ИИ может.

Он объяснит три способа: через панель управления хостингом (перетащить мышкой), через специальную программу (FileZilla) или через команду в терминале (git push).

Чего ИИ не сделает.

Он не откроет ваш файловый менеджер, не выделит файлы и не перетащит их. Он не введёт пароль от хостинга. Он не нажмёт Enter.

Сколько времени нужно вам.

2 минуты, если делаете в первый раз по инструкции. 30 секунд — если уже знаете.

Ограничение №5. Оплата сервисов

Что это такое.

Почти всё хорошее в интернете стоит денег: домен (200–1500 руб в год), хостинг (100–500 руб в месяц), платные нейросети ($20 в месяц), премиум-шаблоны, API-ключи для форм.

Что ИИ может.

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

Чего ИИ не сделает.

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

Сколько времени нужно вам.

Столько, сколько нужно, чтобы ввести 16 цифр карты. Обычно 2 минуты.

Ограничение №6. Установка паролей и доступов

Что это такое.

На хостинге у вас есть логин и пароль. В панели администратора сайта — ещё один пароль. У домена — третий.

Что ИИ может.

Он научит вас создавать надёжные пароли. Он подскажет, где их хранить (менеджеры паролей типа Bitwarden, а не «записочка на мониторе»).

Чего ИИ не сделает.

Он не придумает пароль за вас (хотя может сгенерировать — но вы его не запомните). Он не введёт его при входе. Он не нажмёт «Запомнить меня». И — критически важно — он не восстановит вам доступ, если вы потеряли пароль. Это только через техподдержку хостинга.

Сколько времени нужно вам.

1 минута на генерацию пароля. 10 минут на восстановление, если забыли.

Ограничение №7. Принятие решений «на свой страх и риск»

Что это такое.

Нейросеть всегда даёт ответ, который кажется уверенным. Даже когда не права. Она не скажет: «Я не уверена, проверьте в трёх источниках». Она скажет: «Вот лучшее решение».

И если вы выберете неправильный хостинг, купите ненужный домен (слишком длинный, с тире, с цифрами) или настроите DNS с ошибкой — сайт не будет работать. ИИ не понесёт за это ответственность. Вы — да.

Что ИИ может.

Он предупредит, если его совет может быть устаревшим. Он покажет альтернативы.

Чего ИИ не сделает.

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

Сколько времени нужно вам.

Время на то, чтобы включить критическое мышление. 30 секунд на вопрос себе: «А точно ли я доверяю этому совету? Может, проверить в другом источнике?»

Что ИИ всё-таки делает, и делает отлично

Чтобы вы не расстроились — вот огромный список того, с чем ИИ справляется на 10 из 10:

— Пишет любой код на HTML, CSS, JavaScript

— Объясняет, что означает каждая строчка

— Находит и исправляет ошибки

— Адаптирует дизайн под мобильные телефоны

— Добавляет анимации, слайдеры, формы

— Создаёт тексты для сайта (SEO-оптимизированные)

— Генерирует структуру сайта (сколько страниц, какие блоки)

— Подбирает цветовые схемы и шрифты

— Пишет инструкции для любых действий (как купить домен, как залить файлы)

— Делает код чистым, комментированным, готовым к публикации

То есть 95% умственной работы ИИ берёт на себя.

Оставшиеся 5% — это механические действия, которые требуют ваших рук, вашего кошелька и вашего здравого смысла.

Аналогия, которая всё прояснит

Представьте, что вы хотите приготовить ужин по рецепту от шеф-повара.

ИИ — это шеф-повар. Он пишет рецепт: какие продукты купить, в какой последовательности их резать, сколько жарить, когда солить.

Но ИИ не сходит в магазин за продуктами. Не включит плиту. Не помоет посуду. И не съест за вас ужин.

Вы делаете это сами. Но без рецепта шефа у вас получилась бы каша.

То же самое с сайтом. ИИ даёт рецепт (код и инструкции). Вы идёте в магазин (покупаете домен, регистрируетесь на хостинге) и готовите (загружаете файлы, нажимаете кнопки).

Без ИИ вы бы сварили кашу. Без вас ужина бы не случилось.

Самый частый вопрос новичков

«Но я слышал, что есть нейросети, которые сами публикуют сайты! Replit Agent, например!»

Да, есть. Они создают временную ссылку на своём поддомене (что-то вроде ваш-проект.replit. app). И это здорово для тестирования.

Но:

— Такая ссылка обычно живёт недолго или работает медленно.

— Вы не сможете привязать свой красивый домен без ручных действий.

— При бесплатном тарифе код часто принадлежит платформе, а не вам.

Поэтому «ИИ сам всё опубликовал» — это иллюзия для игрушечных проектов. Для настоящего сайта, которым вы будете гордиться, ручные 5–10 минут всё равно нужны.

И это нормально. Вы справитесь.

Главная идея четвёртой главы

ИИ делает всю интеллектуальную работу.

Вы делаете механические действия с кошельком и мышкой.

Без ИИ вы утоните в коде.

Без вас ИИ останется болтать в чате.

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

А вот код, дизайн, структура, тексты, инструкции — это к ИИ. И он делает это блестяще.

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

Этот практикум отличается от предыдущих. Здесь вы ничего не будете писать в ИИ. Вы сделаете то, чего ИИ не может.

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

Откройте любой регистратор доменов (для России — Reg.ru или Nic.ru; для других стран — Namecheap или GoDaddy). Проверьте, свободно ли имя мойсайт123.ru (или любой другой вариант). Не покупайте — просто проверьте.

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

Зарегистрируйтесь на бесплатном хостинге Netlify (netlify.com). Подтвердите почту. Это займёт 3 минуты, остальные 2 — на преодоление страха «а вдруг что-то сломаю». Не сломаете.

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

Вернитесь в главу 2, возьмите тот самый простой файл index.html с кнопкой. Перетащите его мышкой в окно Netlify (там есть зона «Drag and drop»). Через 10 секунд Netlify даст вам ссылку вида ваш-проект.netlify. app. Откройте её. Кнопка работает? Поздравляете — вы только что сделали то, чего не умеет ИИ: опубликовали сайт вручную.

Задание 4 (запомнить).

Сделайте скриншот или запишите в блокнот фразу:

«ИИ — мозг. Я — руки. Деньги — мои. Ответственность — моя. Вместе — сайт готов».

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

ГЛАВА 5. Принцип «Промт как конституция»: чем точнее закон, тем лучше результат

Представьте, что вы наняли гениального архитектора. Он может построить дворец, мост или космическую станцию. Но вы говорите ему:

«Сделайте красиво».

Что он построит? Ничего. Или построит что-то среднее между сараем и оперным театром, потому что «красиво» — понятие растяжимое.

То же самое с нейросетями. Они гениальны, но не читают мысли. И если вы дадите размытое задание — получите размытый результат.

Эта глава — о том, как превращать ваши «хотелки» в точные, жёсткие, недвусмысленные инструкции. Я называю этот подход «Промт как конституция».

Почему конституция? Потому что хороший закон исключает разночтения. Он не говорит «наказывать за плохие поступки». Он говорит: «за кражу — лишение свободы на срок от 2 до 6 лет».

Нейросеть любит законы. И ненавидит намёки.

Анатомия плохого промта (и почему он не работает)

Давайте сразу на примере. Вот промт, который пишет 99% новичков:

«Сделай мне сайт для цветочного магазина. Чтобы красиво и современно»

Что получит новичок?

Нейросеть сделает:

— Какой-то случайный зелёный фон (цветы же)

— Случайные картинки ромашек и роз

— Текст «Добро пожаловать в наш цветочный рай»

— Кнопку «Купить», которая ведёт в никуда

— Непонятно, есть ли телефон, адрес, корзина

Новичок расстраивается: «Нейросеть плохая, не понимает меня».

А нейросеть ни в чём не виновата. Ей дали задание, в котором нет ни одного конкретного факта. Что значит «красиво»? Что значит «современно»? Для кого сайт? Что продаём? Где находимся?

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

Анатомия хорошего промта (конституция)

А теперь посмотрим, как выглядит промт-конституция для того же цветочного магазина:

*«Сделай одностраничный сайт-визитку для цветочного магазина «Лилия» в Санкт-Петербурге.

Блоки по порядку:

— Шапка: логотип (текстом «Лилия»), меню (Главная, Каталог, Контакты), телефон +7 (999) 123-45-67.

— Геройский блок: заголовок «Свежие цветы с доставкой за 2 часа», подзаголовок «Букеты на любой бюджет», кнопка «Заказать звонок».

— Три карточки: Розы (от 1500 руб), Тюльпаны (от 1200 руб), Пионы (от 2000 руб). Под каждой кнопка «Выбрать».

— Блок «Почему мы»: три преимущества — свежесть, быстрая доставка, подарок.

— Форма обратной связи: имя, телефон, кнопка «Отправить».

— Карта (вставь код Яндекс. Карт заглушкой).

— Футер: копирайт, ссылки на соцсети мессенджер

Цвета: белый фон, акцент — тёмно-зелёный (#2D5A27) и нежно-розовый (#F7CAC9).

Шрифты: заголовки — Playfair Display, текст — Roboto.

Адаптив: на телефоне карточки должны быть в один столбец, меню сворачивается в бургер.

Дай полный код в одном файле HTML, со стилями внутри. Без комментариев в коде (кроме моих отметок). Сделай так, чтобы работало без интернета (кроме карты и шрифтов Google)». *

Что вы видите? Конституцию из 15 пунктов. Никаких «красиво» и «современно». Только факты, цвета, последовательность, ограничения.

Нейросеть, получив такой промт, выдаст сайт, который будет на 80% похож на то, что вы хотите. Остальные 20% вы докрутите за 2–3 уточняющих промта.

Разница между первым и вторым промтом — не в магии. Разница в точности.

Почему это называется «конституция» (а не «инструкция»)

Инструкцию можно нарушить. Конституцию — нельзя.

Когда вы даёте промт как конституцию, вы устанавливаете жёсткие рамки, за которые нейросеть не может выйти. Она может творить внутри этих рамок, но не за их пределами.

Пример из реальной жизни:

Инструкция: «Пожалуйста, не делайте кнопки слишком маленькими».

→ Нейросеть сделает кнопки «нормальными» по её мнению, а вам покажется, что они всё равно мелкие.

Конституция: «Сделай кнопки высотой 48 пикселей, шириной не менее 120 пикселей, размер шрифта на кнопках — 18 пикселей».

→ Нейросеть сделает точно так. Вы можете не знать, что 48 пикселей — это стандарт для мобильных устройств. Но вы это указали, и получили идеальный результат.

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

Пять столпов хорошего промта-конституции

Любой сильный промт строится на пяти китах. Запомните их как «Пять П» (хотя последняя не на П, но для ритма простим).

1. Роль.

Кто ты для нейросети? «Ты — веб-дизайнер с 10-летним стажем», «Ты — эксперт по адаптивной вёрстке», «Ты — фронтенд-разработчик, специализирующийся на лендингах».

→ Нейросеть включает нужный «режим». Без роли она будет отвечать в нейтральном, усреднённом тоне.

2. Формат результата.

Что именно ты должен получить на выходе? «Дай полный HTML-код в одном файле», «Напиши только CSS, без изменений в HTML», «Опиши структуру словами, кода не надо».

→ Без указания формата нейросеть может выдать кусок кода, объяснение на три страницы и пример использования — всё вперемешку.

3. Последовательность (структура).

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

4. Ограничения (границы).

Чего нельзя делать? «Не используй JavaScript», «Не подключай внешние библиотеки, кроме шрифтов», «Сделай так, чтобы работало без интернета», «Не добавляй анимаций».

→ Ограничения так же важны, как и указания. Они сужают пространство для «творчества» нейросети в нужное русло.

5. Конкретные значения (цвета, размеры, отступы).

Цифры вместо слов. Вместо «большой заголовок» — «заголовок 48 пикселей». Вместо «светлый фон» — «фон #F5F5F5». Вместо «быстрая анимация» — «анимация 0.3 секунды».

→ Нейросеть не чувствует «большой» и «маленький» как вы. Она понимает пиксели, проценты, секунды.

Шкала точности: от намёка до конституции

Давайте посмотрим, как меняется результат при увеличении точности. Возьмём одну простую задачу: «сделать кнопку».

Уровень 1 (намёк).

Промт: «Нужна кнопка»

→ Нейросеть: стандартная серая кнопка браузера. Без стилей. Безразмерная.

Уровень 2 (пожелание).

Промт: «Сделай красивую кнопку»

→ Нейросеть: синяя кнопка с белым текстом, скруглённые углы 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. Отзывы клиентов.

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

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

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

Термин 4. Флекс

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

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

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

Чего бояться не надо. Главное запомнить: грид — для сеток (когда много блоков в разные стороны), флекс — для линий (когда блоки идут в один ряд). Но если перепутаете, нейросеть всё равно поймёт и сделает правильно.

Термин 5. Ховер

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

Пример из жизни. Кнопка лифта. Обычно она не светится. Вы подносите палец — загорается подсветка. Убрали палец — погасла. Это ховер в реальном мире.

Как использовать в промте. «Добавь ховер для кнопок: при наведении фон меняется с зелёного на тёмно-зелёный, курсор становится указателем». Или: «Сделай ховер для карточек товаров: при наведении появляется тень и карточка слегка поднимается вверх».

Чего бояться не надо. Ховер работает только на устройствах с мышкой. На телефонах его нет (там нет курсора). Нейросеть знает об этом и не будет пытаться починить физику.

Термин 6. Паддинг (внутренний отступ)

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

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

Как использовать в промте. «Добавь внутренние отступы (паддинг) внутри карточек: 20 пикселей со всех сторон». Или: «Сделай так, чтобы текст в кнопке не касался краёв кнопки — добавь паддинг 12 пикселей сверху и снизу, 24 пикселя слева и справа».

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

Термин 7. Маржин (внешний отступ)

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

Пример из жизни. Расстояние между стульями в кинотеатре. Если стулья вплотную — неудобно. Если между ними 20 сантиметров — нормально. Если полметра — роскошно. Это маржин.

Как использовать в промте. «Добавь внешний отступ (маржин) снизу каждого заголовка 30 пикселей, чтобы текст не прилипал к следующему блоку». Или: «Сделай так, чтобы между карточками товаров было расстояние 24 пикселя — добавь маржин справа для каждой карточки, кроме последней».

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

Термин 8. Брейкпоинт (точка перелома)

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

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

Как использовать в промте. «Сделай брейкпоинты для адаптива: на экранах шире 1024 пикселей — три колонки, на экранах от 768 до 1024 — две колонки, на экранах меньше 768 — одна колонка». Или просто: «Адаптив сделай с брейкпоинтами 1024 и 768 пикселей».

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

Термин 9. Заглушка

Перевод на человеческий. Это временное содержимое, которое вы потом замените на настоящее. Вместо реальной фотографии котика — серый прямоугольник с надписью «Тут будет фото». Вместо настоящего текста — «Lorem ipsum dolor sit amet». Вместо реальной цены — «999 руб».

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

Как использовать в промте. «Вместо реальных фотографий поставь серые квадраты-заглушки с текстом „Фото“. Вместо реальных цен поставь „от 1000 руб“ как заглушку. Я потом заменю». Или: «Наполни карточки товаров текстом-заглушкой, но сохрани структуру».

Чего бояться не надо. Заглушки — ваш лучший друг. Они позволяют увидеть структуру сайта без отвлечения на контент. Никогда не ждите, пока у вас будут готовые тексты и фото. Делайте сайт с заглушками, потом заменяйте.

Термин 10. Контейнер

Перевод на человеческий. Это блок, который ограничивает ширину контента по краям экрана. Представьте газету. Текст не расползается на весь стол — он ограничен шириной колонки. Контейнер делает то же самое: на огромном мониторе сайт не растягивается на все 3000 пикселей, а останавливается на 1200 пикселях и центрируется.

Пример из жизни. Вы кладёте вещи в чемодан. Чемодан — это контейнер. Вещи не вываливаются наружу. Контейнер на сайте — такой же чемодан для контента.

Как использовать в промте. «Заверни весь контент в контейнер с максимальной шириной 1200 пикселей и выровняй по центру страницы». Или: «Сделай контейнер для текста шириной 800 пикселей, чтобы читать было комфортно».

Чего бояться не надо. Контейнер — это просто «ограничитель ширины». Если не знаете, какую ширину поставить — ставьте 1200 пикселей для компьютера. Нейросеть поймёт.

Как просить нейросеть, используя эти слова без страха

Вот три готовые фразы-шаблона, которые покрывают 90% ситуаций. Просто копируйте и заменяйте свои значения.

Шаблон 1. Для структуры (макет + контейнер + грид/флекс).

«Сделай макет сайта из следующих блоков: шапка, геройский блок, три карточки в грид, форма, футер. Весь контент заверни в контейнер с максимальной шириной 1200 пикселей по центру. Карточки расположи в грид три колонки на компьютере, на телефоне — одну колонку (адаптив). Меню в шапке сделай через флекс, пункты прижаты к правому краю».

Шаблон 2. Для деталей (паддинг + маржин + ховер).

«Добавь внутренние отступы (паддинг) внутри карточек: 20 пикселей со всех сторон. Внешний отступ (маржин) между карточками сделай 24 пикселя. Для кнопок добавь ховер: при наведении фон становится темнее, курсор — указатель, лёгкое увеличение тени».

Шаблон 3. Для работы с заглушками.

*«Вместо реальных изображений поставь серые прямоугольники-заглушки с текстом „Фото“. Текст в карточках пока сделай текстом-заглушкой (Lorem ipsum). Цены пока поставь „от 1000 руб“ как заглушку. Структура важнее содержания, заглушки потом заменю». *

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

Эти 10 слов — не программирование.

Это просто названия вещей, которые вы и так знаете.

Макет — это план.

Адаптив — чтобы работало на телефоне.

Грид — ровные ряды и колонки.

Флекс — выравнивание в линию.

Ховер — реакция на мышь.

Паддинг — отступ внутри.

Маржин — отступ снаружи.

Брейкпоинт — ширина, где сайт меняется.

Заглушка — временное содержимое.

Контейнер — ограничитель ширины.

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

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

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

Откройте нейросеть и отправьте промт, в котором вы используете как можно больше из этих 10 слов. Не важно, правильно или нет. Просто попробуйте. Например: «Сделай макет сайта. В контейнере 1200px. Три карточки в грид. Адаптив. Паддинг в карточках 20px. Маржин между карточками 24px. Ховер для кнопок. Заглушки вместо фото». Посмотрите на результат. Нейросеть поняла?

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

Возьмите любой старый промт из первых глав, где вы использовали «народный язык» («сделай три штуки в ряд, чтобы красиво, и чтобы на телефоне нормально было»). Перепишите его, используя термины из этой главы («сделай грид из трёх колонок, добавь адаптив с брейкпоинтом 768px»). Сравните результаты. Второй вариант будет точнее?

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

Распечатайте или перепишите от руки эти 10 слов с краткими пояснениями:

— Макет — план расположения блоков

— Адаптив — работает на телефонах

— Грид — сетка для блоков (ряды и колонки)

— Флекс — выравнивание в линию

— Ховер — эффект при наведении мыши

— Паддинг — отступ внутри блока

— Маржин — отступ снаружи блока

— Брейкпоинт — ширина, где сайт перестраивается

— Заглушка — временный текст/картинка

— Контейнер — ограничитель ширины

Повесьте этот лист рядом с компьютером. Через неделю вы будете знать их наизусть.

Задание 4 (по желанию, 10 минут).

Попросите нейросеть объяснить эти же 10 терминов так, будто вы пятилетний ребёнок. Или так, будто вы профессор филологии. Сравните объяснения. Это упражнение покажет вам, насколько гибко нейросеть подстраивается под аудиторию. И заодно закрепит термины в голове.

ГЛАВА 10. Как тестировать и «допрашивать» нейросеть, чтобы она сама находила свои баги

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

Вы отправляете идеальный промт. Нейросеть выдаёт код. Вы открываете его в браузере. И видите не то. Или не работает. Или работает, но криво. Или выглядит хорошо, но кнопка не нажимается.

И вы сидите и думаете: «Что мне теперь написать? „Почини“? Но что именно чинить? Я же не знаю, в чём проблема».

Знакомая боль? Это нормально. Вы не программист, вы не обязаны знать, где ошибка. Но вы можете заставить нейросеть найти её самостоятельно.

Это называется «допрос нейросети». Вы становитесь следователем, а нейросеть — свидетелем, который что-то знает, но не говорит, пока вы не спросите правильным образом.

Почему нейросеть врёт (и не замечает этого)

Нейросети обладают удивительным свойством: они уверены всегда. Даже когда неправы.

Если нейросеть ошиблась в коде, она не скажет: «Извините, кажется, я допустила ошибку в 15-й строке, вот исправленный вариант». Она просто выдаст код, который ей кажется правильным. А вы будете мучиться.

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

Ваша задача — стать этим внешним тестировщиком. Но не через знание кода, а через правильные вопросы.

Три главных закона допроса нейросети

Прежде чем мы перейдём к конкретным техникам, запомните три закона. Они работают всегда.

Закон 1. Никогда не проси «почини сайт». Всегда проси «найди ошибку».

Если вы скажете «почини», нейросеть начнёт переписывать код наугад. Может стать лучше, может стать хуже. Если вы скажете «найди ошибку в этом коде», нейросеть включит режим анализа. Она будет искать конкретные проблемы.

Закон 2. Давай нейросети «улики» — скриншоты, описание поведения, ошибки из консоли.

Чем больше улик, тем точнее диагноз. Скриншот того, как выглядит сломанный сайт. Описание «кнопка не нажимается вообще» или «кнопка нажимается, но форма не отправляется». Красные строчки ошибок из консоли браузера (F12). Всё это — улики.

Закон 3. Заставляй нейросеть объяснять, прежде чем исправлять.

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

Техника 1. «Красная строка из консоли» (самая простая и мощная)

Вы открываете сайт в браузере. Что-то не работает. Вы нажимаете клавишу F12. Открывается панель разработчика. Там есть вкладка «Console» (Консоль). Там красные строчки. Это браузер сам говорит, в чём ошибка.

Вы копируете эти красные строчки. Целиком. Вместе со словами «Uncaught TypeError» и всем, что там есть.

Вы вставляете их в чат с нейросетью и пишете:

«Вот код моего сайта. [Вставить код]. Вот ошибка из консоли браузера: [вставить красные строчки]. Объясни, в чём проблема, и дай исправленный код. Ничего больше не меняй».

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

Вы не поняли ни слова из красной строки. Это не важно. Нейросеть поняла.

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

Техника 2. «Скриншот как улика»

Некоторые ошибки не показываются в консоли. Кнопка не того цвета. Текст налезает на картинку. Блок съехал влево. Это визуальные баги.

Современные нейросети (GPT-4o, Gemini с функцией просмотра картинок) умеют смотреть на скриншоты. Вы делаете скриншот того, что видите в браузере. Сохраняете как картинку. Загружаете в чат (там обычно есть кнопка скрепки или «загрузить изображение»). И пишете:

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

Нейросеть увидит проблему своими глазами (да, она действительно «видит» картинки) и предложит исправление.

Если ваша нейросеть не умеет смотреть картинки (например, бесплатный ChatGPT без GPT-4o или Claude), вы описываете проблему словами максимально подробно:

«В блоке с карточкой товара картинка имеет ширину 100%, а текст начинается прямо под ней, но налезает на 20 пикселей. Нужно, чтобы текст был строго под картинкой, с отступом 16 пикселей сверху».

Чем точнее описание, тем лучше исправление.

Техника 3. «Скажи, что не так» (провокация на объяснение)

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

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

«Вот код. Он не работает так, как задумано. Кнопка „Отправить“ ничего не делает. Не давая новый код, объясни, какие 5 возможных причин могут вызывать эту проблему. Просто перечисли гипотезы».

Нейросеть начнёт рассуждать:

«Возможные причины:

— У кнопки не указан обработчик события onclick или addEventListener.

— Функция-обработчик не определена (опечатка в имени).

— Форма отправляется на сервер, но нет бэкенда, а нужно предотвратить стандартное поведение (preventDefault).

— Код JavaScript находится в неправильном месте (до того, как кнопка загрузилась).

— Ошибка в консоли, которую вы не заметили (проверьте ещё раз)».

Вы читаете этот список. Проверяете каждый пункт. В пункте 4 узнаёте свою ситуацию: да, JS-код стоит в начале, до кнопки. Вы говорите нейросети: «Проблема в пункте 4. Как исправить?»

Нейросеть даёт точное исправление.

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

Техника 4. «Протестируй свой код сам»

Самый элегантный приём. Вы заставляете нейросеть быть своим собственным тестировщиком.

Промт выглядит так:

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

Нейросеть вернёт список:

«Проблема 1: Картинки не имеют атрибута alt — плохо для SEO и доступности. Исправление: добавьте alt=«описание картинки».

Проблема 2: Кнопки имеют слишком маленький размер на мобильных устройствах (36px). Исправление: увеличьте до 48px с помощью медиа-запроса.

Проблема 3: Отсутствует обработка ошибок в форме — при пустом поле телефон форма всё равно отправляется. Исправление: добавьте проверку на пустоту».

Вы получаете готовый список того, что нужно исправить. Вы отправляете его нейросети обратно: «Исправь проблемы 1, 2 и 3». И получаете идеальный код.

Вы не нашли ни одной ошибки сами. Вы просто попросили нейросеть найти ошибки в своём же коде.

Техника 5. «Код ревью» (как у настоящих программистов)

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

Промт:

*«Ты — строгий технический лид с 10-летним стажем. Вот код моего сайта. Проведи код-ревью. Укажи на все недостатки: дублирование кода, плохие названия переменных, проблемы с производительностью, несовместимость с браузерами. Для каждого недостатка предложи улучшенный вариант. Будь максимально критичен». *

Нейросеть выдаст разбор:

«1. В строках 45–48 вы трижды используете один и тот же стиль для кнопок. Вынесите в общий класс. button.

— Вы используете alert () для сообщений — это раздражает пользователей. Используйте кастомное модальное окно.

— Картинки не сжаты — добавьте в код атрибуты width/height, чтобы избежать скачков вёрстки».

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

Техника 6. «Сравни с эталоном»

У вас есть две версии кода. Первая — та, что работает (или ближе к истине). Вторая — та, что не работает. Вы просите нейросеть сравнить их.

Промт:

«Вот код А (работает как надо). Вот код Б (не работает, кнопка не нажимается). Сравни их и покажи различия. Объясни, какое различие вызывает проблему. Исправь код Б по образцу кода А».

Нейросеть подсветит различия:

«Код А: button.addEventListener (’click’, showMessage);

Код Б: button.addEventListener (’click’, showMassage);

Разница: опечатка в названии функции showMassage вместо showMessage. Исправляю».

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

Техника 7. «Воспроизведи шаги» (для сложных логических багов)

Бывает, что код работает, но при определённых действиях ломается. Например: «Если нажать кнопку „Добавить в корзину“ два раза подряд, цена удваивается, а должна оставаться прежней».

Вы описываете нейросети последовательность действий:

«Вот код корзины. Шаги воспроизведения бага: 1. Открыть сайт. 2. Нажать „Добавить“ на товаре „Кофе“. 3. Снова нажать „Добавить“ на том же товаре. Результат: в корзине две позиции „Кофе“ вместо одной с количеством 2. Ожидаемое поведение: одна позиция, количество 2. Найди ошибку и исправь».

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

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

Создаём «План допроса» для любой ситуации

Теперь соберём всё вместе. Вот пошаговый алгоритм, который вы применяете, когда что-то идёт не так.

Шаг 1. Соберите улики.

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

Шаг 2. Отправьте нейросети запрос на диагностику.

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

Шаг 3. Добейтесь объяснения, а не исправления.

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

Шаг 4. Дайте команду на исправление.

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

Шаг 5. Проверьте исправление.

Вставьте новый код. Работает? Отлично. Не работает? Вернитесь к шагу 1, но теперь добавьте в промт: «Предыдущее исправление не сработало. Вот новый код и та же ошибка. Найди другую причину».

Чего никогда не надо делать при допросе

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

Не надо. Просить «почини» без объяснения, что именно сломано.

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

Не надо. Отправлять один промт «всё сломано, переделай с нуля».

Надо. Сохранять то, что работает, и чинить только то, что сломано.

Не надо. Злиться на нейросеть и писать капслоком «ТЫ ТУПАЯ, СДЕЛАЙ НОРМАЛЬНО».

Надо. Спокойно дать больше улик. Нейросеть не обижается, но от капслока умнее не становится.

Не надо. Править код вручную, надеясь на лучшее.

Надо. Вернуться к нейросети с уточнением. Ваши ручные правки нейросеть не видит и может их затереть.

Не надо. Пытаться понять код, чтобы найти ошибку.

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

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

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

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

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

Консоль браузера — ваш лучший друг (клавиша 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. Шапка: логотип (текст «Мур-Мур»), меню (О нас, Котята, Отзывы, Контакты), телефон +7 (999) 123-45-67.

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

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

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

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

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

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

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

Блок 9. Карта проезда (заглушка Яндекс. Карт).

Блок 10. Футер: копирайт, телефон, ссылки на соцсети (соцсеть, месенджер), ссылка на политику конфиденциальности.

3. Визуальные требования

Основные цвета: тёмно-синий (#1A2A4F) для фона шапки и футера, серый (#E8ECEF) для фона страницы, белый для текста на тёмном фоне. Акцентный цвет: серебристый (#B0B8C1) для кнопок и рамок.

Шрифты: заголовки — Playfair Display (с засечками, благородно), текст — Open Sans (читаемо).

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

4. Функциональные требования

Кнопка в шапке «Выбрать котёнка» плавно скроллит к блоку котят.

Форма бронирования: проверка на заполнение полей, после отправки — всплывающее сообщение «Спасибо, мы свяжемся с вами в ближайшее время».

Выпадающий список котят в форме автоматически подтягивает имена из блока котят (имитация: пока просто три варианта в коде).

Телефон в шапке — кликабельный, открывает набор номера на телефоне.

5. Адаптив

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

6. Контент (заглушки)

Все фотографии — серые прямоугольники с текстом «Фото котёнка», «Фото родителя», «Фото отзыва». Тексты отзывов — Lorem ipsum. Цены — заглушки «от 25 000 руб». Всё заменю позже.

7. Что НЕ нужно делать

Не использовать анимации кроме ховера кнопкам. Не добавлять слайдеры. Не делать блог (пока). Не добавлять онлайн-оплату. Не использовать Javascript-библиотеки (jQuery и т.д.). Не добавлять звуки и видео.

Видите, насколько это ТЗ точнее вашего исходного потока сознания? Нейросеть разложила по полочкам, добавила недостающие блоки (геройский, почему мы, карта), уточнила стиль, прописала адаптив, чётко указала, чего не надо делать.

Вы не писали ТЗ. Вы просто накидали мыслей. Нейросеть сделала всю структурную работу.

Шаг 3. Другая нейросеть делает сайт по ТЗ

Теперь самое интересное. Вы берёте это ТЗ (полностью, от первого до последнего слова) и отправляете в новый чат с нейросетью.

Ваш промт:

«Вот техническое задание на сайт. [Вставить всё ТЗ целиком].

Теперь, пожалуйста, сделай полный HTML/CSS/JS код по этому ТЗ. Код должен быть в одном файле, готовый к открытию в браузере. Визуал — строго по ТЗ. Адаптив — по ТЗ. Не добавляй ничего от себя, что не указано в ТЗ. Если чего-то не хватает для работоспособности — добавь минимально необходимое, но не меняй структуру. Все картинки — заглушки, как указано в ТЗ».

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

Результат будет на 80–90% соответствовать тому, что вы хотите. Остальные 10–20% вы доработаете итерациями (глава 7) и допросами (глава 10).

Почему лучше использовать двух разных нейросетей (или два чата)

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

Лучше действовать так:

Вариант А (бесплатно, просто).

Шаг 1 и 2 делаете в ChatGPT. Шаг 3 делаете в Claude (или наоборот). Две разные нейросети не путаются.

Вариант Б (если только одна нейросеть).

После шага 2 вы полностью очищаете историю чата (новая кнопка «Новый чат»). Затем вставляете ТЗ как первый промт. Чистая сессия без «воспоминаний» о потоке сознания.

Вариант В (продвинутый).

Шаг 1 делаете в бесплатной версии. Шаг 2 и 3 — в платной. Но это уже излишество для новичка.

Универсальный промт-шаблон «Преврати мысли в ТЗ»

Сохраните этот шаблон. Вы будете использовать его раз за разом.

«Вот мои мысли про сайт. Они корявые, с эмоциями, повторами. Просто прочитай и пойми суть.

[СЮДА ВСТАВЛЯЕТЕ ВАШ ПОТОК СОЗНАНИЯ — КАК ЕСТЬ, НЕ РЕДАКТИРУЯ]

А теперь, не пиша код, составь чёткое техническое задание по следующей структуре:

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

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

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

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

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

6. Контент (всё заглушками).

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

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

Этот промт можно скопировать целиком и менять только блок с вашими мыслями.

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

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

Вы обязаны уметь говорить как человек.

Нейросеть переведёт ваш «человеческий» на «промтовый».

Сначала мысли в ТЗ.

Потом ТЗ в сайт.

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

Вы становитесь не автором промтов, а режиссёром. Вы даёте сырой материал (поток сознания). Одна нейросеть превращает его в сценарий (ТЗ). Другая нейросеть снимает фильм по сценарию (пишет код).

Вы управляете процессом, не утопая в деталях.

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

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

Напишите поток сознания для любого вымышленного дела. Не редактируйте. Пишите так, как будто вы рассказываете другу в мессенджере. С ошибками, с «ой, забыл», с эмоциями. Используйте 5–10 предложений.

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

Отправьте этот поток сознания в ChatGPT или Claude вместе с промт-шаблоном «Преврати мысли в ТЗ». Получите готовое ТЗ. Прочитайте его. Удивитесь, как много деталей нейросеть добавила сама.

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

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

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

Создайте документ «Мои шаблоны». Скопируйте туда промт-шаблон «Преврати мысли в ТЗ». Теперь он всегда под рукой. Используйте его для каждого нового проекта. Через 3–4 раза процесс займёт у вас меньше 5 минут.

Задание 5 (для продвинутых).

Попробуйте сделать «конвейер из трёх нейросетей»: ChatGPT пишет ТЗ по вашему потоку сознания. Claude делает сайт по ТЗ от ChatGPT. Gemini проверяет готовый сайт на ошибки и даёт рекомендации. Вы получите результат, который конкурирует с работой профессионального веб-студио за 2000 долларов.

ГЛАВА 13. Промт «Ты — технический аналитик. Разработай структуру сайта под мой бизнес»

До этой главы мы учились формулировать желания, собирать контекст и превращать мысли в ТЗ. Но есть один шаг, который новички пропускают, а профессионалы никогда не пропускают.

Шаг называется «проектирование структуры».

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

Вы нанимаете архитектора. Он говорит: «Я посмотрю на ваш участок, на ваши привычки и спроектирую оптимальную планировку».

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

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

Почему структура важнее дизайна

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

Правило профессионала: сначала структура, потом визуал. Потому что правильная структура продаёт. Красивый визуал без структуры — это красивая, но пустая коробка.

Что такое правильная структура? Это порядок блоков, который ведёт посетителя по пути: «Узнал → Заинтересовался → Захотел → Поверил → Действие».

Неправильная структура: «Вот телефон. Вот карта. Вот котята. Вот отзывы. Вот форма». Посетитель запутался и ушёл.

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

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

Роль «Технический аналитик» — что это значит

Когда вы пишете «Ты — технический аналитик», вы включаете у нейросети особый режим. Она перестаёт быть просто генератором текста. Она становится:

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

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

Инженером. Она продумывает, какие технические элементы нужны (формы, слайдеры, фильтры) и как они сочетаются.

Маркетологом. Она понимает, что кнопка «Записаться» должна быть не только в конце, но и после каждого блока преимуществ.

Без роли «технический аналитик» нейросеть выдаст структуру «как получится». С ролью — структуру, которая прошла через фильтры профессионала.

Готовый промт «Ты — технический аналитик»

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

*«Ты — технический аналитик с 10-летним опытом проектирования сайтов. Твоя специализация — структура, которая ведёт пользователя к целевому действию.*

Вот информация о моём бизнесе:

— Что я продаю или предлагаю: [описание в двух-трёх предложениях]

— Кто моя целевая аудитория: [кто они, их проблемы, их страхи]

— Главная цель сайта: [одно действие: заявка, звонок, покупка, запись]

— Что должно быть на сайте обязательно: [перечислите 3–5 блоков или элементов, которые вы точно хотите]

Твоя задача — разработать оптимальную структуру одностраничного сайта (лендинга или визитки). Структура должна быть в виде списка блоков сверху вниз. Для каждого блока укажи:

— Название блока.

— Его цель (что должен понять или почувствовать пользователь после этого блока).

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

— К чему этот блок ведёт (какое следующее действие или блок).

В конце добавь рекомендации: каких блоков не хватает, а какие лишние. Объясни логику своей структуры — почему блоки идут именно в таком порядке, а не в другом.

Не пиши код. Только аналитику и структуру».

Этот промт заставляет нейросеть не просто перечислить блоки, а объяснить логику. А когда нейросеть объясняет логику, она сама проверяет себя на ошибки.

Пример работы промта (кошачья ферма «Мур-Мур»)

Давайте отправим наш промт с заполненными данными и посмотрим, что вернёт нейросеть-аналитик.

Входные данные (то, что вы написали в квадратных скобках):

Что я продаю: британских короткошёрстных котят из питомника. Отдаём только с документами, прививками, после 3 месяцев. Цена от 25 000 до 60 000 руб.

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

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

Что должно быть обязательно: котята с фото и ценами, родители с титулами, отзывы, форма бронирования.

Ответ нейросети (сокращённо):

СТРУКТУРА САЙТА (СВЕРХУ ВНИЗ)

Блок 1. Шапка

Цель: дать возможность сразу позвонить или перейти к котяткам.

Элементы: логотип (текст), меню (якоря к блокам), телефон.

Ведёт к: звонку или блоку котят.

Блок 2. Геройский блок

Цель: за секунду объяснить, кто вы и почему стоит остаться.

Элементы: заголовок «Британцы с родословной и любовью», подзаголовок про 7 лет опыта, крупная кнопка «Смотреть котят» (якорь к блоку котят).

Ведёт к: блоку котят.

Блок 3. Блок «Почему питомник, а не перекуп»

Цель: снять главное возражение — страх обмана.

Элементы: три карточки с иконками и текстом: «Документы и родословная», «Прививки по возрасту», «Котята с 3 месяцев — социализированы».

Ведёт к: усилению доверия, переходу к родителям.

Блок 4. Блок «Наши родители — чемпионы»

Цель: показать экспертность и породность.

Элементы: две карточки (кот и кошка): фото, кличка, титулы, характер.

Ведёт к: блоку котят (вы увидели родителей — теперь хотите детей).

Блок 5. Блок «Наши котята»

Цель: вызвать эмоции «хочу» и дать информацию для выбора.

Элементы: три карточки (фото-заглушка, кличка, пол, цена, кнопка «Забронировать»).

Ведёт к: форме бронирования (по нажатию на кнопку — плавный скролл к форме, с предзаполненным полем выбора котёнка).

Блок 6. Блок «Отзывы»

Цель: социальное доказательство — другие уже счастливы.

Элементы: три отзыва (фото семьи, текст «спасибо», звёзды).

Ведёт к: усилению доверия, переходу к форме.

Блок 7. Форма бронирования

Цель: целевое действие.

Элементы: поля Имя, Телефон, выпадающий список с кличками котят, кнопка «Отправить заявку».

Ведёт к: всплывающему сообщению об успехе.

Блок 8. Карта и контакты

Цель: для тех, кто хочет приехать лично.

Элементы: Яндекс. Карта (заглушка), адрес, режим работы.

Ведёт к: футеру.

Блок 9. Футер

Цель: повторный контакт и юридическая информация.

Элементы: телефон, ссылки на соцсети, политика конфиденциальности.

Рекомендации аналитика

Чего не хватает: блока «Часто задаваемые вопросы» — он снижает количество звонков с одними и теми же вопросами. Рекомендую добавить после отзывов, перед формой. Лишних блоков нет. Логика структуры: Доверие (питомник, родители) → Желание (котята) → Подтверждение (отзывы) → Действие (форма). Это стандартная воронка для эмоциональных покупок.

Видите, как глубоко нейросеть проанализировала? Она не просто перечислила блоки. Она объяснила, зачем каждый блок, куда он ведёт, какова психологическая механика. И даже добавила рекомендацию про блок FAQ, о котором вы не думали.

Это уровень Junior-аналитика за 50 000 руб. Бесплатно. За 2 минуты.

Как использовать эту структуру дальше

Вы получили структуру. Что с ней делать?

Вариант 1. Отправить нейросети на создание сайта.

Берёте структуру (блоки, их описание, рекомендации) и добавляете в ваш промт на создание сайта. Или вставляете в ТЗ из главы 12. Нейросеть уже знает порядок, психологию и элементы.

Вариант 2. Уточнить и доработать.

Вы не согласны с каким-то блоком или порядком. Пишете: «Сделай блок FAQ перед формой, как ты рекомендовал. И поменяй местами блок родителей и блок „Почему питомник“ — родители вызывают больше доверия, чем иконки». Нейросеть скорректирует структуру.

Вариант 3. Использовать как чек-лист для готового сайта.

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

Когда структура не нужна (а когда очень нужна)

Структура от аналитика нужна не всегда. Вот таблица-подсказка (текстом, без таблицы):

Когда структура очень нужна.

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

Когда структура нужна, но можно проще.

Вы делаете сайт-визитку для себя или маленькой компании. У вас 3–4 блока, всё очевидно. Вы можете сами перечислить порядок в промте за 30 секунд.

Когда структура не нужна.

Вы делаете простой инструмент (конвертер, генератор паролей). Там один блок с формой и результатом. Или делаете блог — там главное не порядок, а удобство чтения.

Правило большого пальца: если на сайте больше 5 блоков, закажите структуру у аналитика. Если меньше — можете придумать сами.

Усложнённая версия: аналитик с цифрами

Если вы хотите не просто структуру, а структуру, основанную на данных, добавьте в промт:

«Учитывай, что 70% моих клиентов приходят с мобильных устройств. 80% решений принимают женщины. Среднее время на сайте — 1 минута 20 секунд. Адаптируй структуру под эти цифры».

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

Вы можете не знать таких цифр. Но если знаете хотя бы приблизительно — поделитесь с аналитиком.

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

Вы можете знать, какие блоки нужны.

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

Роль «технический аналитик» включает у нейросети режим архитектора и психолога.

Сначала структура — потом визуал.

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

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

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

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

Откройте нейросеть. Скопируйте промт «Ты — технический аналитик» из этой главы. Заполните квадратные скобки для любого вымышленного или реального дела. Отправьте. Получите структуру из 7–10 блоков с объяснениями.

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

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

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

Не согласитесь с каким-то блоком. Напишите нейросети: «Хорошая структура, но поменяй местами блоки X и Y, потому что моя аудитория сначала хочет увидеть цены, а потом отзывы». Нейросеть скорректирует. Посмотрите, как изменилась логика.

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

Создайте документ «Мои структуры». Сохраните туда 3–4 структуры от аналитика для разных типов бизнеса (услуги, товары, инфопродукты, недвижимость). Когда вам понадобится сайт для нового дела, вы откроете документ и возьмёте структуру из похожей ниши как основу.

Задание 5 (для продвинутых).

Отправьте аналитику дополнительный вопрос: «А теперь представь, что у нас очень низкий бюджет на рекламу, и 90% трафика — органический из поиска. Как изменится структура?» Нейросеть перепроектирует структуру под SEO: добавит текстовые блоки, ключевые слова, внутренние ссылки.

ГЛАВА 14. Собираем референсы: просим ИИ описать стиль 3 лучших сайтов в нише

Представьте, что вы учитесь писать картины. Вы не изобретаете технику мазка с нуля. Вы смотрите на работы великих художников, анализируете, как они смешивают краски, как строят композицию, как работают со светом. А потом создаёте своё.

С веб-дизайном то же самое. Нет ничего зазорного в том, чтобы смотреть на лучшие сайты в вашей нише и учиться у них. Зазорно — копировать. Но учиться и анализировать — это путь мастера.

Проблема в том, что вы не дизайнер. Вы смотрите на красивый сайт и чувствуете: «Мне нравится. Хочу так же». Но не можете объяснить словами, что именно вам нравится. «Ну, красиво. Ну, современно. Ну, стильно».

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

Это называется «сбор референсов через ИИ». И это легально, этично и очень эффективно.

Почему референсы нужны даже гениям

Самые талантливые дизайнеры начинают не с чистого листа. Они начинают с «досок вдохновения» — коллекций чужих работ, которые им нравятся. Потом они анализируют, почему эти работы хороши. Потом синтезируют своё.

Если вы пропускаете этап референсов, вы рискуете:

Риск 1. Изобрести велосипед.

Вы придумываете структуру или цветовое решение, которое уже сто раз сделано до вас, но сделано хуже.

Риск 2. Сделать не соответствующее нише.

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

Риск 3. Потратить часы на то, что можно сделать за минуты.

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

Референсы — это не жульничество. Это исследование рынка.

Что нейросеть может увидеть в чужом сайте (а вы — нет)

Вы смотрите на сайт и видите: «Красиво. Синий фон. Крупные буквы».

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

Она видит цветовую схему: не просто «синий», а конкретный оттенок, контрастность, сочетаемость.

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

Она видит композицию: сетку, отступы, выравнивание, соотношение пустого и заполненного пространства.

Она видит настроение: строгое, игривое, дорогое, технологичное — через сочетание всех визуальных элементов.

Она видит паттерны: где находится логотип, как устроено меню, куда ведёт взгляд, где главная кнопка.

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

Способ 1. Анализ по описанию (когда нет ссылки или скриншота)

Вы не всегда можете дать нейросети прямую ссылку на сайт (не все нейросети умеют ходить по ссылкам). Но вы можете описать сайт своими словами. Или найти описание в интернете. Или просто вспомнить.

Промт для этого случая:

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

Сайт 1: [опишите: цветовая гамма, шрифты, композиция, настроение, что запомнилось].

Сайт 2: [опишите].

Сайт 3: [опишите].

После анализа ответь на вопросы:

— Какие цвета повторяются во всех трёх сайтах?

— Какая типографика общая?

— Как организовано пространство (много воздуха, плотно, сетка)?

— Какое общее настроение?

— Что можно взять для моего сайта, а что лучше не повторять?

— Какие элементы устарели или выглядят дешёво?

*

Напиши итоговую рекомендацию: «Для сайта в нише [ниша] оптимален стиль: [цвета], [шрифты], [композиция], [настроение]». Не пиши код, только анализ».

Этот способ работает, даже если вы не помните сайты идеально. Нейросеть достроит недостающие детали на основе статистических знаний о вашей нише.

Способ 2. Анализ по скриншотам (для нейросетей с зрением)

Самый мощный способ. Вы делаете скриншоты трёх сайтов, загружаете их в нейросеть (GPT-4o, Gemini с мультимодальностью) и просите анализа.

Промт:

«Посмотри на эти три скриншота сайтов из ниши [ваша ниша]. Ты — веб-дизайнер-аналитик. Проанализируй их стиль.

Для каждого скриншота опиши: цветовую схему (основной цвет, акцентный, фоновый), типографику (шрифты, размеры, жирность), композицию (сетка, отступы, расположение ключевых элементов), настроение (строгое/игривое/дорогое/минималистичное), что работает хорошо, что работает плохо.

Затем сравни три сайта и выдели общее: какие элементы повторяются, какие цвета доминируют, какой подход к отступам и воздуху.

В конце дай итоговую рекомендацию: «Для сайта в нише [ниша] оптимален следующий стиль — [перечень характеристик]. При создании своего сайта стоит избегать [что не надо копировать]».

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

Способ 3. Анализ по живым ссылкам (если нейросеть умеет в интернет)

Некоторые нейросети (Perplexity, Gemini с включённым поиском, платный ChatGPT с browsing) могут открывать ссылки. Вы даёте три URL, нейросеть переходит по ним, читает сайты и анализирует.

Промт:

«Вот три сайта из моей ниши: [ссылка 1], [ссылка 2], [ссылка 3].

Ты — веб-дизайнер-аналитик. Перейди по каждой ссылке, изучи сайты. Проанализируй их стиль по следующим параметрам: цветовая гамма, типографика, композиция, отступы, использование теней и скруглений, настроение.

Выдели, что общего во всех трёх сайтах. Что повторяется? Что, наоборот, уникально для каждого?

Дай итоговую рекомендацию: «Если делать новый сайт в этой нише, стоит взять за основу [такие-то элементы стиля] и избегать [таких-то ошибок]».

Этот способ самый точный, потому что нейросеть видит сайт вживую, а не по вашему пересказу. Но требует, чтобы ваша нейросеть имела доступ к интернету.

Пример анализа (кошачья ферма)

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

Сайт 1 (дорогой питомник в Москве). Тёмно-синий фон, золотые акценты, много воздуха, крупные фотографии котов на весь экран, шрифт с засечками для заголовков, меню минималистичное. Настроение: премиум, статус, порода как искусство.

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

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

Анализ нейросети (сокращённо):

Общее для всех трёх: все используют холодные оттенки (синий, серый, голубой) — это цвет доверия и породности. Никто не использует красный или ярко-жёлтый. Все имеют блок с документами и родословной. Все используют крупные фотографии (но стиль фото разный).

Различия: сайт 1 — дорого и статусно, сайт 2 — уютно и семейно, сайт 3 — надёжно и официально.

*Рекомендация для вашего питомника «Мур-Мур» (вы позиционируетесь как ответственные заводчики с душой): возьмите из сайта 1 — качественные крупные фото и тёмно-синий фон, из сайта 2 — скругления и человеческие эмоции, из сайта 3 — блок документов и гарантий. Избегайте золотых акцентов (они выглядят пафосно для вашей ценовой категории) и слишком официального тона (вы не сеть клиник, а семейный питомник). Итоговый стиль: сдержанно-благородный, с тёплыми акцентами (не пастель, а глубокий синий с серебром).*

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

Что делать с результатом анализа

Вы получили описание стиля. Теперь вы превращаете его в часть промта для создания сайта.

Берёте итоговую рекомендацию нейросети и добавляете в свой промт (или в ТЗ из главы 12) примерно так:

«На основе анализа трёх лучших сайтов в нише, вот стилевые требования:

* — Основной цвет: тёмно-синий (#1A2A4F) для фона шапки и футера.*

— Акцентный цвет: серебристый (#B0B8C1) для кнопок и рамок.

* — Фон страницы: светло-серый (#E8ECEF).*

— Шрифты: заголовки — Playfair Display (с засечками, благородно), текст — Open Sans.

— Композиция: много воздуха, крупные отступы между блоками (80px).

— Скругления: умеренные (8px для карточек, 4px для кнопок).

— Тени: лёгкие, едва заметные.

— Настроение: сдержанно-благородное, без пафоса и без дешёвой милоты.

— Чего избегать: золотых акцентов, розового, бантиков, анимаций.

*

Придерживайся этого стиля во всём коде».

Нейросеть, которая будет создавать сайт, получит не абстрактное «сделай красиво», а чёткий набор стилевых правил, взятых из лучших образцов в вашей нише.

Чего нельзя делать с референсами

Предупреждение. Оно важное.

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

Нельзя. Спрашивать «сделай точно такой же дизайн, но другой цвет». Это тоже копирование.

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

Можно и нужно. Анализировать и синтезировать. Взять цветовую гамму одного, композицию второго, типографику третьего, добавить своё — и получить уникальный результат, который не нарушает ничьих прав.

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

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

Вы не обязаны быть дизайнером, чтобы понимать дизайн.

Нейросеть посмотрит на чужие сайты и объяснит вам их стиль словами.

Анализируйте три лучших сайта в нише.

Выделяйте общее — это стандарт ниши.

Замечайте уникальное — это идеи для вашего отличия.

Синтезируйте своё из лучших элементов.

Референсы — это не воровство. Это обучение у лучших с благодарностью.

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

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

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

Найдите три сайта в любой нише, которые вам нравятся. Не обязательно вашей — просто красивые. Сделайте скриншоты. Загрузите их в GPT-4o (или другую нейросеть со зрением). Отправьте промт «Посмотри на эти три скриншота и проанализируй стиль». Получите разбор. Удивитесь, сколько деталей вы не заметили.

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

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

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

Возьмите итоговую рекомендацию из анализа (например, «оптимальный стиль — тёмно-синий, шрифт с засечками, много воздуха»). Вставьте её в промт на создание сайта (из главы 12 или 13). Создайте сайт. Сравните с сайтом, сделанным без референсов. Разница будет огромной.

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

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

Задание 5 (для продвинутых).

Попросите нейросеть не просто проанализировать стиль трёх сайтов, но и определить, к какому типу относится каждый: «минимализм», «необрутализм», «кислотный дизайн», «макродизайн» и так далее. Затем спросите: «Какие тренды в моей нише уходят, а какие приходят?» Нейросеть даст вам форсайт на год вперёд

ГЛАВА 15. Прототипирование текстом: как объяснить расположение блоков без картинок

Представьте, что вы объясняете по телефону, как собрать шкаф из Икеи. Вы не можете показать картинку. Вы не можете начертить схему. У вас только голос и слова.

Если вы скажете: «Ну, там полки, и дверцы, и чтобы красиво было», — шкаф не соберётся. Если вы скажете: «Сначала нижняя панель. На неё, с отступом 10 см слева и справа, ставим вертикальные стенки. Между ними, на высоте 30 см от низа, крепим первую полку», — шкаф соберут даже без картинки.

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

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

Почему текстовый прототип лучше картинки для нейросети

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

Хороший вопрос. И ответ на него неочевидный.

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

Нейросеть может догадаться. А может и нет. Картинка оставляет пространство для интерпретации. А интерпретация, как мы знаем из главы 5, — враг точности.

Текстовый прототип не оставляет пространства. Вы пишете: «Блок А, под ним блок Б, внутри блока Б три карточки, каждая карточка имеет отступы 20 пикселей внутри и 24 пикселя между собой». Нейросеть читает и делает точно.

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

Текстовый прототип — это самый быстрый и самый точный способ объяснить нейросети, как должно выглядеть расположение блоков.

Базовые принципы текстового прототипирования

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

Принцип 1. Сверху вниз, без пропусков.

Вы описываете сайт как дорогу: первый блок, под ним второй, под ним третий. Никаких «а потом вернёмся к началу» и «этот блок плавает где-то сбоку». Только вертикальная последовательность.

Принцип 2. Внутри блоков — вложенное описание.

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

Принцип 3. Координаты не нужны, нужны отношения.

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

Синтаксис текстового прототипа (три способа)

У вас есть три способа описывать расположение блоков. Выберите тот, который вам удобнее, или комбинируйте.

Способ 1. Простой список (для маленьких сайтов).

Просто перечисляете блоки один за другим, как список покупок.

Пример:

— Шапка (логотип, меню, телефон)

— Геройский блок (заголовок, подзаголовок, кнопка)

— Карточки товаров (три штуки в ряд)

— Форма обратной связи (имя, телефон, кнопка)

— Футер (копирайт, соцсети)

Этот способ хорош для начала. Но он не показывает вложенность и не объясняет, как элементы расположены внутри блоков.

Способ 2. Маркированный список с вложенностью (универсальный).

Используете звёздочки или дефисы, а для вложенных элементов делаете отступ в два пробела.

Пример:

— Шапка

— Логотип: текст «Кошачья ферма» слева

— Меню: ссылки «О нас», «Котята», «Отзывы», «Контакты» справа

— Телефон: +7 (999) 123-45-67, при нажатии открывается набор номера

— Геройский блок

— Заголовок: «Британские котята с родословной»

— Подзаголовок: «Любовь с первого дня»

— Кнопка: «Выбрать котёнка», зелёная, ведёт к блоку котят

— Блок «Котята»

— Три карточки в грид, отступ 24px между ними

— Каждая карточка содержит:

— Фото-заглушку 300x200px

— Имя котёнка

— Цену

— Кнопку «Забронировать»

Этот способ читается нейросетью на ура. Он показывает иерархию и порядок.

Способ 3. Блочное описание (для сложных макетов).

Вы рисуете текстом «прямоугольники» с помощью символов. Это сложнее, но иногда нагляднее.

Пример:

┌─────────────────────────────────────────────┐

│ ШАПКА │

│ [Логотип] [Меню] [Телефон] │

└─────────────────────────────────────────────┘

┌─────────────────────────────────────────────┐

│ ГЕРОЙСКИЙ БЛОК │

│ «Британские котята с родословной» │

│ [Кнопка «Выбрать котёнка»] │

└─────────────────────────────────────────────┘

┌──────────┐ ┌──────────┐ ┌──────────┐

│ Котёнок 1│ │ Котёнок 2│ │ Котёнок 3│

│ [Фото] │ │ [Фото] │ │ [Фото] │

│ Мурзик │ │ Барсик │ │ Снежок │

│ 30 000 руб │ │ 25 000 руб │ │ 35 000 руб │

│ [Кнопка] │ │ [Кнопка] │ │ [Кнопка] │

└──────────┘ └──────────┘ └──────────┘

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

Рекомендация: Начинайте со способа 2 (маркированный список с вложенностью). Он даёт 95% точности и прост для восприятия.

Как описать сетку и расположение элементов внутри блока

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

Для горизонтального расположения:

— «элементы в ряд» — все в одной строке

— «элементы в строку, прижаты к левому краю»

— «элементы в строку, прижаты к правому краю»

— «элементы в строку, распределены равномерно по ширине»

— «элементы в строку с отступом 20 пикселей между ними»

Для вертикального расположения внутри блока:

— «внутри блока элементы идут вертикально друг за другом»

— «заголовок сверху, под ним текст, под ним кнопка»

— «между элементами отступ 16 пикселей»

Для сеток (грид):

— «три колонки одинаковой ширины, отступ 24 пикселя»

— «две колонки: левая 30% ширины, правая 70%»

— «на компьютере — 4 колонки, на телефоне — 1 колонка»

Для выравнивания:

— «текст по центру блока»

— «картинка слева, текст справа от неё»

— «кнопка выровнена по правому краю родителя»

Для отступов:

— «внутренние отступы внутри карточки: 20 пикселей со всех сторон»

— «внешний отступ снизу заголовка: 30 пикселей»

— «отступ между карточками: 24 пикселя»

Чем больше таких «технических» фраз, тем точнее нейросеть поймёт, как располагать элементы.

Полный пример текстового прототипа (кошачья ферма)

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

ТЕКСТОВЫЙ ПРОТОТИП САЙТА «МУР-МУР»

Общее: одностраничный сайт, блоки идут сверху вниз. Ширина контента ограничена контейнером 1200px по центру.

1. Шапка (прилипает к верху при скролле)

— Логотип: текст «Мур-Мур» слева, размер шрифта 24px, жирный.

— Меню: ссылки «О нас», «Котята», «Отзывы», «Контакты» — расположены справа от логотипа, в строку, отступ между ссылками 30px.

— Телефон: +7 (999) 123-45-67, ещё правее меню, цвет акцентный.

2. Геройский блок

— Заголовок: «Британские короткошёрстные из питомника „Мур-Мур“». Размер 48px. По центру.

— Подзаголовок: «Родословная, документы, любовь с первого дня». Размер 20px. Под заголовком, отступ 20px.

— Кнопка: «Выбрать котёнка». Под подзаголовком, отступ 40px. Цвет — серебристый. При нажатии — плавный скролл к блоку «Котята».

3. Блок «О питомнике»

— Заголовок «О нас» по центру.

— Две колонки: левая 40% — текст, правая 60% — фото-заглушка.

— Текст: три абзаца про опыт, про отличие от перекупов, про условия содержания.

4. Блок «Наши родители»

— Заголовок «Наши родители — чемпионы».

— Две карточки в ряд (кот и кошка), отступ между карточками 40px.

— Каждая карточка содержит:

— Фото-заглушку 300x300px, скругление 12px.

— Имя (например, «Арчибальд»), размер 24px.

— Титулы (например, «Чемпион России 2024»).

— Описание характера (одно предложение).

5. Блок «Котята»

— Заголовок «Наши котята».

— Грид из трёх колонок на компьютере, отступ между карточками 30px. На телефоне — одна колонка.

— Каждая карточка котёнка содержит:

— Фото-заглушку 300x200px, скругление 8px.

— Имя котёнка (Мурзик, Барсик, Снежок).

— Пол (мальчик/девочка).

— Цену (от 25 000 до 60 000 руб).

— Кнопку «Забронировать» — при нажатии плавный скролл к форме бронирования.

6. Блок «Отзывы»

— Заголовок «Что говорят наши семьи».

— Три отзыва в ряд, отступ 30px.

— Каждый отзыв:

— Фото-заглушка 80x80px, круглая.

— Текст отзыва (Lorem ipsum, 2–3 предложения).

— Имя семьи.

— Пять звёздочек (золотые).

7. Форма бронирования

— Заголовок «Забронируйте котёнка».

— Поля:

— Имя (текстовое поле, обязательно).

— Телефон (текстовое поле, обязательно, маска ввода).

— Выбрать котёнка (выпадающий список с именами из блока «Котята»).

— Кнопка «Отправить заявку». При успехе — всплывающее сообщение.

8. Карта и контакты

— Заглушка Яндекс. Карты.

— Адрес текстом: «Деревня Гаврилово, Ярославская область».

— Режим работы: «Ежедневно, 10:00–20:00».

9. Футер

— Телефон повторно.

— Ссылки на соцсеть и месенджер (иконками, ведут на #).

— Копирайт: «© 2025 Питомник «Мур-Мур»».

— Ссылка «Политика конфиденциальности» (модальное окно с текстом-заглушкой).

Этот текстовый прототип нейросеть превратит в код с точностью 90–95%. Вам останется только 2–3 итерации на доводку отступов и цветов.

Типичные ошибки текстового прототипирования

Даже зная все принципы, можно ошибиться. Вот частые ошибки новичков.

Ошибка 1. Описывать визуал, а не расположение.

Плохо: «Красивая шапка с элегантным меню». Хорошо: «В шапке слева логотип, справа меню из четырёх пунктов в строку».

Нейросеть не знает, что такое «красивая шапка». Она знает, что такое «логотип слева, меню справа».

Ошибка 2. Забывать про отступы и размеры.

Плохо: «Карточки в ряд». Хорошо: «Три карточки в ряд, отступ между ними 24 пикселя, внутренние отступы внутри карточек 20 пикселей».

Без отступов нейросеть сделает карточки вплотную. Вам не понравится.

Ошибка 3. Перескакивать между блоками.

Плохо: «В шапке телефон, потом в футере телефон, а ещё в геройском блоке кнопка, но она ведёт к форме, которая после отзывов».

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

Ошибка 4. Использовать отрицания вместо позитивных инструкций.

Плохо: «Не делай меню слишком большим». Хорошо: «Сделай меню из четырёх пунктов, размер шрифта 18 пикселей».

Нейросеть плохо понимает, что значит «не слишком». Она отлично понимает цифры.

Ошибка 5. Забывать про адаптив.

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

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

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

Рисовать макет можно не только в Фигме.

Можно рисовать словами.

И для нейросети текстовый прототип понятнее, чем картинка.

Сверху вниз. Вложенность через отступы.

Технические фразы вместо «красиво».

Цифры для отступов и размеров.

Отдельно — адаптив.

Текстовый прототип занимает 5–10 минут на написание. Он сохраняет вам часы на переделках, потому что нейросеть не гадает, где что должно стоять. Она просто читает инструкцию и выполняет.

Вы не дизайнер? Не проблема. Вы просто описываете расположение блоков словами. Это умеют все, кто умеет объяснять дорогу прохожему.

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

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

Возьмите любой сайт, который вам нравится (откройте в браузере). Напишите его текстовый прототип по правилам из этой главы: блоки сверху вниз, вложенность, отступы, расположение элементов. Сравните ваш прототип с реальным сайтом. Насколько точно вы описали?

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

Отправьте нейросети текстовый прототип из примера (кошачья ферма) с промтом: «Сделай полный HTML/CSS/JS код по этому текстовому прототипу. Все картинки — заглушки, цвета и шрифты — на твой вкус, но придерживайся структуры». Получите сайт. Сравните с тем, что вы представили. Насколько структура совпала?

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

Возьмите старый промт из первых глав, где вы просили «сделай сайт». Перепишите его в виде текстового прототипа по правилам этой главы. Отправьте оба варианта нейросети (в разные чаты). Сравните результаты. Во втором случае структура будет точнее?

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

Распечатайте шпаргалку «Фразы для текстового прототипа»:

— «в ряд» / «в строку» / «вертикально»

— «отступ между элементами X пикселей»

— «внутренние отступы X пикселей со всех сторон»

— «грид из X колонок»

— «на телефоне — одна колонка»

— «элемент A слева, элемент B справа»

— «выравнивание по центру / по левому краю / по правому краю»

— «при нажатии — скролл к блоку Y»

Пользуйтесь этой шпаргалкой при каждом новом прототипе.

Задание 5 (для продвинутых).

Создайте текстовый прототип для сложного макета: например, интернет-магазин с фильтрами (категории слева, товары справа), корзиной (плавающая иконка), модальным окном оформления заказа. Опишите всё словами. Отправьте нейросети. Посмотрите, справилась ли. Если да — вы достигли уровня, когда текстом можно нарисовать почти всё.

ГЛАВА 16.Создаем цветовую схему и шрифты через диалог с ИИ

Цвет и шрифты — это одежда вашего сайта. Можно иметь идеальную структуру, блестящий контент, удобные формы, но если цвета кричат друг на друга, а шрифты выглядят как дешёвая листовка из 90-х — никто не останется.

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

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

Эта глава — про то, как построить этот диалог.

Почему нельзя доверять своему глазу (если вы не дизайнер)

Вы смотрите на цвет и думаете: «Нравится». Или: «Не нравится». Это эмоция, а не анализ.

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

Ваш глаз этого не видит. Ваш глаз видит «красивый синий». А нейросеть видит всё остальное.

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

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

Трёхшаговый диалог для создания цветовой схемы

Вот схема, по которой вы будете работать всегда. Три шага, 5–7 минут, и у вас есть готовая профессиональная схема.

Шаг 1. Вы даёте контекст.

Рассказываете нейросети о бизнесе, аудитории, желаемом настроении. Грузите всё, что знаете.

Шаг 2. Нейросеть предлагает 2–3 варианта схем.

Каждый вариант: основной цвет, дополнительный цвет, акцентный цвет, цвет фона, цвет текста. С объяснениями, почему это подходит.

Шаг 3. Вы уточняете и выбираете.

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

Никакой магии. Просто структурированный диалог.

Шаг 1. Промт для генерации цветовой схемы

Вот готовый промт. Копируйте и заполняйте квадратные скобки.

*«Ты — колорист и веб-дизайнер с опытом 10 лет. Мне нужна цветовая схема для сайта.*

Вот информация:

— Что за бизнес: [например, питомник британских кошек]

— Аудитория: [например, семьи с детьми 30–45 лет]

— Желаемое настроение: [например, благородное, сдержанное, вызывающее доверие]

— Что НЕ нужно: [например, никакого розового и золота, не детское, не сладкое]

— Есть ли брендовые цвета: [если да — укажите, если нет — напишите «нет»]

Предложи 3 варианта цветовой схемы. Для каждого варианта укажи:

— Основной цвет (где будет фон больших блоков или шапка).

— Дополнительный цвет (для карточек, второстепенных элементов).

— Акцентный цвет (для кнопок, ссылок, важных элементов).

— Цвет фона страницы (обычно светлый или тёмный).

— Цвет основного текста (обычно тёмно-серый или белый).

— Цвет второстепенного текста (для подписей, мелких элементов).

*Для каждого цвета укажи hex-код (например, #1A2A4F) и краткое описание, почему этот цвет подходит моей аудитории и настроению.*

После трёх вариантов порекомендуй один как самый подходящий и объясни почему».

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

Пример работы промта (кошачья ферма)

Давайте отправим промт с нашими данными и посмотрим, что вернёт нейросеть.

Входные данные:

Бизнес — питомник британских кошек. Аудитория — семьи с детьми 30–45 лет, средний достаток. Настроение — благородное, сдержанное, вызывающее доверие. Не нужно — розового, золота, пафоса, дешёвой милоты. Брендовых цветов нет.

Ответ нейросети (сокращённо):

Вариант 1. Благородная классика

Основной: #1A2A4F (тёмно-синий) — для шапки и футера. Символизирует надёжность, породность.

Дополнительный: #E8ECEF (светло-серый) — для карточек и блоков. Не отвлекает от контента.

Акцентный: #B0B8C1 (серебристый) — для кнопок. Холодный, сдержанный, но заметный.

Фон страницы: #F5F5F5 (почти белый) — чистый, не напрягает глаза.

Текст основной: #222222 (тёмно-серый) — высокая контрастность.

Текст второстепенный: #777777 (средний серый) — для подписей.

Вариант 2. Природная элегантность

Основной: #2D5A27 (тёмно-зелёный) — ассоциация с природой, спокойствие.

Дополнительный: #F4F1E1 (слоновая кость) — тёплый нейтральный.

Акцентный: #C9A96E (песочный, приглушённое золото) — тепло, но без пафоса.

Фон страницы: #FFFFFF (белый).

Текст основной: #333333.

Текст второстепенный: #666666.

Вариант 3. Современный минимализм

Основной: #2C2C2C (почти чёрный) — для шапки и акцентов. Строго, дорого.

Дополнительный: #EAEAEA (светло-серый) — для карточек.

Акцентный: #0077B6 (чистый синий) — технологичный, вызывает доверие.

Фон страницы: #FFFFFF (белый).

Текст основной: #1A1A1A.

Текст второстепенный: #888888.

Рекомендация. Для вашей аудитории (семьи с детьми, средний достаток) и настроения (благородное, сдержанное) лучше всего подходит Вариант 1 — тёмно-синий с серебром. Тёмно-зелёный (вариант 2) хорош, но ассоциируется с ветеринарией и садоводством больше, чем с питомником. Почти чёрный (вариант 3) слишком строг для семейной аудитории. Выбирайте вариант 1.

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

Как уточнять и доводить схему до ума

Первый вариант может быть не идеальным. Слишком тёмный фон? Слишком бледный акцент? Не проблема. Вот фразы для уточнения.

Изменить насыщенность или яркость.

«Основной цвет #1A2A4F сделай на 20% светлее. Акцентный #B0B8C1 сделай чуть теплее, добавь немного жёлтого».

Поменять роли цветов.

«Сделай акцентный цвет основным для шапки, а основной — акцентным для кнопок».

Проверить контрастность.

«Проверь контрастность между основным текстом #222222 и фоном #F5F5F5. Соответствует ли стандартам WCAG?»

Адаптировать для дальтоников.

*«У меня аудитория — мужчины 50+. Много дальтоников. Убедись, что схема различима при красно-зелёной слепоте». *

Добавить цвет ошибки и успеха.

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

Нейросеть скорректирует схему за секунду.

Создаём шрифтовую пару через диалог

Цвета есть. Теперь шрифты. Здесь тот же принцип: вы даёте контекст, нейросеть предлагает, вы уточняете.

Промт для шрифтов:

«Ты — типографист. Мне нужна шрифтовая пара для сайта.

Вот информация:

— Бизнес: [питомник кошек]

— Аудитория: [семьи с детьми 30–45 лет]

— Настроение: [благородное, сдержанное, но не холодное]

— Цветовая схема: [тёмно-синий + серебро + светло-серый]

Предложи 3 варианта шрифтовой пары: шрифт для заголовков и шрифт для основного текста. Для каждого варианта укажи название шрифта из Google Fonts (чтобы я мог подключить), размеры (заголовки H1, H2, текст), жирность, межстрочный интервал.

Объясни, почему эта пара подходит моей аудитории и настроению. Порекомендуй один вариант».

Ответ нейросети (пример):

Вариант 1. Классика с засечками

Заголовки: Playfair Display (жирный, 48px для H1, 32px для H2). С засечками, благородный.

Текст: Open Sans (обычный, 18px, межстрочный 1.5). Без засечек, читаемый.

Почему: сочетание засечек и беззасечных — классика веб-типографики. Playfair даёт благородство, Open Sans — современность.

Вариант 2. Минималистичный

Заголовки: Montserrat (жирный, 44px для H1, 30px для H2). Без засечек, геометричный.

Текст: Roboto (обычный, 18px, межстрочный 1.5). Без засечек, нейтральный.

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

Вариант 3. Уютный

Заголовки: Cormorant Garamond (средний, 50px для H1, 34px для H2). С засечками, элегантный.

Текст: Lora (обычный, 18px, межстрочный 1.5). С засечками, мягкий.

Почему: оба шрифта с засечками, что создаёт ощущение книжности, тепла, традиций. Хорошо для семейной аудитории, но менее современно.

Рекомендация. Для вашей аудитории (семьи) и настроения (благородное, но не холодное) выбирайте вариант 1 — Playfair Display + Open Sans. Это золотой стандарт, который нравится почти всем и читается на любых устройствах.

Вы получили готовую шрифтовую пару, которую осталось только подключить.

Как подключить шрифты из Google Fonts (инструкция для нейросети)

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

Промт:

«Вот шрифтовая пара: заголовки — Playfair Display, текст — Open Sans. Напиши HTML-код для подключения этих шрифтов через Google Fonts и CSS-правила для использования (font-family для заголовков и для текста)».

Нейросеть вернёт:

html

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Playfair+Display:wght@400;700&display=swap" rel=«stylesheet»>

css

body {

font-family: «Open Sans’, sans-serif;

font-size: 18px;

line-height: 1.5;

}

h1, h2, h3, h4, h5, h6 {

font-family: «Playfair Display’, serif;

font-weight: 700;

}

h1 {font-size: 48px;}

h2 {font-size: 32px;}

Вы копируете этот код в свой сайт — и шрифты работают.

Главные ошибки в цвете и шрифтах (которые нейросеть поможет не совершить)

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

Ошибка 1. Слишком много цветов.

Правило: на сайте не больше 3–4 цветов (основной, дополнительный, акцентный, фоновый). Всё остальное — оттенки этих цветов. Нейросеть никогда не предложит радугу.

Ошибка 2. Низкая контрастность.

Серый текст на светло-сером фоне не читается. Нейросеть проверяет контрастность автоматически, если вы попросите.

Ошибка 3. Слишком много шрифтов.

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

Ошибка 4. Использование системных шрифтов по умолчанию.

Arial, Times New Roman, Courier — это выглядит как сайт из 2005 года. Нейросеть всегда предложит современные шрифты из Google Fonts.

Ошибка 5. Игнорирование читаемости на мобильных.

На телефоне шрифт 14px — это минимум. 18px — комфортно. Нейросеть поставит адекватные размеры.

Ошибка 6. Цветные тексты на цветных фонах.

Белый текст на жёлтом фоне не читается. Нейросеть либо затемнит фон, либо осветлит текст, либо сменит сочетание.

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

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

Цвет и шрифты — это не магия. Это правила.

Нейросеть знает правила.

Вы даёте контекст (бизнес, аудитория, настроение).

Нейросеть даёт схему (цвета и шрифты).

Вы уточняете и выбираете.

Вуаля — профессиональный дизайн без дизайнера.

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

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

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

Откройте нейросеть. Отправьте промт для генерации цветовой схемы (из этой главы), заполнив квадратные скобки для любого дела. Получите 3 варианта. Выберите тот, который вам нравится больше всего. Запишите hex-коды.

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

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

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

Попросите нейросеть проверить контрастность вашей выбранной пары (цвет фона и цвет текста). Если контрастность ниже 4.5:1 — попросите скорректировать цвета. Нейросеть предложит более тёмный текст или более светлый фон.

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

Создайте документ «Мои цветовые схемы и шрифты по нишам». Для каждой ниши сохраняйте: бизнес, аудиторию, настроение, выбранную схему (с кодами), выбранную шрифтовую пару. Через месяц у вас будет библиотека готовых решений.

Задание 5 (для продвинутых).

Попросите нейросеть: «А теперь сгенерируй 10 вариантов акцентного цвета для моей схемы, от более тёплых к более холодным. Для каждого варианта объясни, как изменится восприятие сайта». Получите спектр от «энергичного» до «спокойного». Выберите тот, который лучше подходит под ваш стиль общения с клиентами.

ГЛАВА 17. Генерация названий, слоганов и текстов

Вы сделали структуру. Подобрали цвета. Настроили шрифты. Осталось самое важное — то, что будет читать посетитель. Тексты.

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

Нейросети умеют писать тексты. И даже очень хорошо. Но есть нюанс: по умолчанию они пишут «среднюю температуру по больнице». Гладко, правильно, скучно. Чтобы получить текст, который цепляет, нужно правильно попросить.

В этой главе мы разберём генерацию названий, слоганов и SEO-текстов. Вы научитесь выжимать из нейросети максимум и отсекать воду.

Три типа текстов на сайте (и для каждого — свой подход)

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

Тип 1. Микротексты (названия, слоганы, заголовки, подписи к кнопкам).

Это 2–10 слов. Они должны быть яркими, запоминающимися, иногда дерзкими. Нейросеть здесь может быть слишком вежливой и правильной. Нужно давить на креатив и просить много вариантов.

Тип 2. Основные тексты (описания товаров, услуг, блок «о нас», преимущества).

Это 50–300 слов. Должны быть информативными, продающими, но без маркетинговой пошлости. Нейросеть здесь склонна к воде («индивидуальный подход», «высокое качество», «лучшие цены»). Нужно запрещать эти фразы.

Тип 3. SEO-тексты (мета-теги, описания для поисковиков).

Это 100–160 символов для description, 50–70 символов для title. Нейросеть здесь хороша, но нужно явно указывать ключевые слова.

Мы пройдём каждый тип.

Часть 1. Генерация названий и слоганов

Название компании или проекта, слоган, заголовки на сайте — это лицо. Ошибка здесь стоит дорого. Хорошая новость: нейросеть может сгенерировать сотни вариантов за минуту. Плохая новость: 90% из них будут мусором. Ваша задача — отсеять мусор и выбрать золото.

Вот промт, который выдаёт не «среднее», а много разных вариантов.

*«Ты — нейминг-эксперт и копирайтер. Мне нужно название для [тип бизнеса: питомник британских кошек] и слоган (короткая фраза, 4–7 слов).*

Вот информация:

— Суть бизнеса: [продаём котят с документами, ответственное разведение]

— Аудитория: [семьи с детьми 30–45 лет]

— Настроение: [благородное, сдержанное, вызывающее доверие]

— Какие ассоциации должны быть: [порода, доверие, дом, любовь]

— Каких ассоциаций избегать: [дешевизна, пафос, розовые пони]

— Конкуренты называются: [«Британский дворик», «КотоДом», «Лорд Мур»]

Сгенерируй:

— 15 вариантов названия (от коротких до более длинных).

— 15 вариантов слоганов к лучшим названиям.

* — Отметь 3 лучшие пары (название + слоган) и объясни, почему они сильнее остальных.*

— Напиши, какие названия и слоганы уже заезжены и лучше не использовать».

Что вы получите. 15 названий — от «Мур-Мур» до «Британской империи». 15 слоганов — от «Дом, где рождаются чемпионы» до «Ваш идеальный компаньон». Топ-3 с объяснениями. И список того, что не надо использовать (например, «Кот в мешке» или «Британец ваш»).

Вы не придумываете названия. Вы выбираете из 30 вариантов. Это гораздо легче.

Часть 2. Генерация заголовков для блоков

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

Промт:

«Ты — копирайтер, специализирующийся на заголовках. Мне нужны заголовки для блоков одностраничного сайта [тип бизнеса].

Вот информация:

— Название проекта: [«Мур-Мур»]

— Слоган: [«Британцы с родословной и любовью»]

— Аудитория: [семьи с детьми, ценят документы, но хотят любви]

— Главная цель: [заявка на бронирование котёнка]

Список блоков, для которых нужны заголовки:

1. Геройский блок (самый первый, самый важный) — заголовок и подзаголовок.

2. Блок «О питомнике» — заголовок.

3. Блок «Наши родители» — заголовок.

4. Блок «Котята» — заголовок.

5. Блок «Почему мы» (преимущества) — заголовок.

6. Блок «Отзывы» — заголовок.

7. Форма бронирования — заголовок над формой и текст на кнопке.

Для каждого блока предложи по 5 вариантов заголовков. Заголовки должны быть: короткими (до 8 слов), без штампов («высокое качество», «индивидуальный подход»), с эмоцией или выгодой для клиента.

В конце отметь лучший вариант для каждого блока и объясни почему».

Что вы получите. Для геройского блока: «Британские котята с родословной», «Ваш пушистый чемпион ждёт домой», «Порода, проверенная временем. Любовь — с первого дня». Для блока преимуществ: «Почему нам доверяют 100+ семей», «Чем мы отличаемся от перекупов», «Главное — здоровье и характер». Для кнопки: «Забронировать котёнка», «Выбрать малыша», «Хочу домой».

Вы берёте лучший вариант из пяти и используете.

Часть 3. SEO-тексты (для поисковиков)

Это незаметная, но критически важная часть. Title и description — то, что человек видит в выдаче Google. От них зависит, перейдут на сайт или пройдут мимо.

Промт:

«Ты — SEO-копирайтер. Мне нужны мета-теги для сайта [название проекта].

Вот информация:

— О чём сайт: [продажа британских котят с документами из питомника]

— Ключевые слова (через запятую): [британские котята, питомник британских кошек, купить котёнка британца, британская короткошёрстная]

— География: [Москва и Московская область, возможна доставка]

— Конкуренты в топе поиска: [питомник «Британский сад», «КотоДом»]

Напиши:

— Title (заголовок в выдаче): 50–70 символов, с ключевым словом в начале.

— Description (описание в выдаче): 140–160 символов, с ключевыми словами, с призывом к действию.

— 3 варианта для title и description на выбор.

* — H1-заголовок на странице (должен отличаться от title, но быть близким по смыслу).*

* — 5 ключевых слов для мета-тега keywords (устарел, но некоторые поисковики ещё смотрят).*

Объясни, почему твои варианты будут кликабельны и релевантны запросам».

Пример ответа:

Title вариант 1: «Британские котята из питомника | „Мур-Мур“»

Description вариант 1: «Купить британского котёнка с документами. Родословная, прививки, доставка по Москве. Посетите питомник „Мур-Мур“ и выберите своего чемпиона».

Вы вставляете эти теги в шапку вашего HTML-файла, и поисковики начинают вас лучше понимать.

Часть 4. Основные тексты (без воды и штампов)

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

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

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

Мне нужен текст для блока «О питомнике» (150–200 слов) для сайта [питомник британских кошек].

Вот факты, которые можно использовать:

— Работаем с 2017 года (7 лет).

— Котята от чемпионов России и Европы.

— Отдаём котят после 3 месяцев, с прививками и документами.

— Питомник зарегистрирован в международной системе WCF.

— К каждому котёнку даём паспорт, родословную, договор.

— Не отдаём в «добрые руки» без договора.

— Учим новых владельцев уходу, кормлению, воспитанию.

Запрещённые слова и фразы: «индивидуальный подход», «высокое качество», «лучшие цены», «широкий ассортимент», «современные технологии», «на рынке с 2017 года» (это штамп, напишите просто 7 лет).

Текст должен:

— Вызывать доверие (факты, а не обещания).

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

— Быть читаемым, без сложных оборотов.

*

Напиши текст. После текста перечисли, какие штампы ты сознательно избежал».

Что вы получите. Не «Мы предлагаем высококачественных котят», а «Каждый котёнок из нашего питомника имеет родословную WCF. Это значит, что вы можете участвовать в выставках и получать титулы, если захотите. Если не захотите — просто любить своего чемпиона дома». Без воды. Конкретно. С фактами.

Часть 5. Описания товаров (котят)

Если у вас каталог, каждому товару нужно описание. Нейросеть может написать их массово.

Промт:

«Ты — копирайтер для интернет-магазина. Мне нужно описание для котёнка.

Данные котёнка:

— Кличка: Мурзик

— Пол: мальчик

— Окрас: голубой (серый)

— Характер: спокойный, ласковый, любит сидеть на руках

— Родители: чемпионы России

— Цена: 35 000 руб

Напиши описание для карточки товара (50–70 слов).

— Без штампов («милый», «прекрасный», «замечательный» — можно, но умеренно).

— Расскажи про характер, а не только про окрас.

— Добавь фразу, почему Мурзик подойдёт именно семье с детьми».

Ответ: «Мурзик — голубой британец, который ищет дом, где его будут носить на руках. Он спокоен, не царапает мебель (у него есть когтеточка), и обожает детей: они для него источник бесконечных игр и почесываний за ухом. Родители — чемпионы России, но сам Мурзик главное своё достижение видит в умении мурлыкать так, что засыпают даже самые активные домочадцы. 35 000 руб».

Это продаёт лучше, чем «Красивый котёнок с хорошей родословной».

Чек-лист хорошего текста от нейросети

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

Нет фраз «индивидуальный подход», «высокое качество», «лучший на рынке», «современные технологии», «широкий ассортимент». Если есть — удалите или попросите переписать.

Есть конкретные цифры и факты. Не «много лет», а «7 лет». Не «много клиентов», а «150 семей». Не «быстрая доставка», а «доставка за 2 часа».

Текст читается вслух без запинки. Прочитайте текст. Если спотыкаетесь на сложных оборотах — упростите. Нейросеть любит длинные предложения. Вы любите короткие.

Текст не пытается продать слишком агрессивно. «Лучший котёнок в вашей жизни!!!» — это перебор. «Мурзик будет спать на ваших коленях и требовать вкусняшки» — нормально.

Текст решает проблему или отвечает на страх аудитории. Не «у нас хорошие котята», а «вы не переживаете о документах и прививках — мы всё сделали».

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

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

Вы не писатель. Вы — редактор.

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

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

SEO-теги — доверьте нейросети, но проверьте длину и ключевые слова.

Основные тексты — без воды, только факты и эмоции.

Текст, написанный нейросетью и отредактированный вами, будет лучше, чем текст, написанный нейросетью в одиночку. И лучше, чем текст, написанный вами в одиночку (если вы не профессиональный копирайтер). Вы — та самая добавленная ценность, которая превращает «нормально» в «отлично».

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

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

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

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

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

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

Отправьте промт для SEO-тегов. Получите title и description. Вставьте их в любой онлайн-анализатор длины (например, seolik.ru) — проверьте, что влезаете в 50–70 символов для title и 140–160 для description.

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

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

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

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

ГЛАВА 18. Иконки и простые изображения: нейросети Midjourney/DALL-E под ваш стиль

Вы сделали структуру. Подобрали цвета и шрифты. Написали тексты. Осталось последнее, но очень важное — визуальное наполнение. Картинки, иконки, фоны.

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

Проблема в том, что у вас нет своей фотостудии, нет иллюстратора в штате, а брать чужие иконки из интернета — значит выглядеть как все. Решение — нейросети-генераторы. Midjourney, DALL-E, Flux — они нарисуют что угодно в любом стиле за минуты.

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

Зачем генерировать изображения, если можно скачать готовые?

Вы можете подумать: «Зачем мне возиться с генерацией? Есть же Flaticon, Freepik, иконки от Google Material». Да, есть. И у них есть три большие проблемы.

Проблема 1. Все используют одно и то же.

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

Проблема 2. Стиль не совпадает.

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

Проблема 3. Лицензии ограничивают.

Бесплатные иконки часто требуют указывать авторство или запрещают коммерческое использование. Сгенерированные вами изображения принадлежат вам (проверьте условия конкретного сервиса, но обычно права широкие).

Нейросети решают все три проблемы. Вы получаете уникальные, стилистически единые, юридически чистые изображения за 5–10 минут.

Инструменты: кто есть кто на рынке

У нас есть три главных инструмента для генерации изображений. Каждый силён в своём.

Инструмент 1. DALL-E 3 (через ChatGPT Plus или отдельный интерфейс).

От компании OpenAI. DALL-E 3 лучше всех понимает сложные текстовые описания и создаёт чистые, минималистичные изображения. Он идеален для иконок в стиле «flat design» — плоских, с чёткими линиями, без лишних деталей. Ещё одно преимущество: DALL-E 3 неплохо справляется с простым текстом внутри картинок (например, цифры или короткие слова). Midjourney с текстом почти не работает.

Когда выбирать DALL-E 3: для плоских иконок, интерфейсных элементов, минималистичной графики, изображений с коротким текстом.

Инструмент 2. Midjourney.

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

Midjourney работает через Discord-бота. Это непривычно, но быстро осваивается. Есть платная подписка (от 10–20 $ в месяц).

Когда выбирать Midjourney: для художественных иконок, фонов с текстурой, изображений, где важна эстетика и настроение.

Инструмент 3. Flux.1.

Новичок на рынке, но очень перспективный. Flux даёт больше контроля над параметрами: можно точно настроить цвет, форму, пропорции. Подходит для сложных, детализированных иконок.

Когда выбирать Flux: когда вам нужен максимальный контроль и вы готовы разбираться в настройках.

Для начала рекомендую DALL-E 3. Он самый простой в использовании (пишешь промт на русском или английском — получаешь результат) и даёт отличные результаты для большинства задач сайтостроения. Midjourney освойте позже, когда захотите большего художественного разнообразия.

Часть 1. Создаём набор иконок для сайта

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

Самый правильный подход — генерировать не одну иконку, а сразу набор в едином стиле. Для этого есть техника «тестовой иконки».

Шаг 1. Генерируем тестовую иконку, чтобы поймать стиль.

Вы отправляете в DALL-E 3 такой промт:

*«Нарисуй простую плоскую иконку в стиле минимализм: силуэт кота. Линии чёткие, толщина 2 пикселя. Цвет — тёмно-синий (#1A2A4F). Без фона (прозрачный фон). Соотношение сторон 1:1». *

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

Шаг 2. Фиксируем параметры стиля.

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

Для DALL-E 3 это может звучать так: «плоская векторная иконка, минимализм, толщина линии 2px, скруглённые углы, цвет #1A2A4F, на прозрачном фоне, соотношение 1:1».

Шаг 3. Генерируем остальные иконки по той же формуле.

Теперь вы берёте эту формулу и меняете только объект.

Промт для иконки телефона:

«Плоская векторная иконка телефонной трубки в том же стиле: минимализм, толщина линии 2px, скруглённые углы, цвет #1A2A4F, на прозрачном фоне, соотношение 1:1»

Промт для иконки корзины:

«Плоская векторная иконка shopping cart в том же стиле…»

Таким образом, через 10–15 минут у вас готов полный набор иконок для вашего сайта.

Важное техническое замечание. Ни Midjourney, ни DALL-E 3 не умеют создавать изображения с настоящим прозрачным фоном (PNG с альфа-каналом). Они всегда добавляют какой-то фон — белый, чёрный, цветной. Но это не проблема. Вы просто загружаете готовую иконку в бесплатный сервис удаления фона (например, remove.bg) и получаете чистый PNG за 5 секунд. Для иконок на сайте вам почти всегда нужен именно прозрачный фон.

Часть 2. Готовые промпты для разных типов иконок

Чтобы вы не начинали с нуля, вот библиотека промптов для разных стилей иконок. Берите, меняйте под себя.

Стиль 1. Плоские иконки (flat design, минимализм).

Идеально для современных сайтов. Чисто, понятно, профессионально.

Промпт (для DALL-E 3):

«Минималистичная плоская векторная иконка [объект]. Чёткие контуры, толщина линии 2 пикселя. Аккуратные скруглённые углы. Цвет [ваш основной цвет]. Без теней и градиентов. На белом фоне. Соотношение 1:1.»

Стиль 2. Контурные иконки (line art, как раскраска).

Хорошо для тех, кто хочет совсем лёгкий, «воздушный» дизайн.

Промпт (для Midjourney):

*« [Объект], coloring book page, black and white, simple outline, thick lines, no shading, white background — v 6»*

Стиль 3. Милые иконки (kawaii, для детских или «душевных» проектов).

Промпт (для Midjourney):

*« [Объект], cute kawaii icon, vibrant colors, white background, simple, vector style, clipart — v 6»*

Стиль 4. 3D-иконки (для акцентов, кнопок, премиум-проектов).

Промпт (для Midjourney):

*« [Объект] icon, 3D render, isometric view, soft lighting, pastel colors, white background, high detail — v 6»*

Часть 3. Генерация фонов и иллюстраций

Иконки — это половина дела. Для крупных блоков (геройский блок, шапка, блок «о нас») нужны фоновые изображения или иллюстрации.

Для фона под текст (чтобы текст читался).

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

Промпт для фона в стиле «абстрактная геометрия» (DALL-E 3):

*«Абстрактный геометрический фон в стиле минимализм. Плавные текучие линии. Цветовая гамма: тёмно-синий (#1A2A4F) и серебристый (#B0B8C1). Мягкие градиенты. Достаточно светлый, чтобы поверх него можно было читать чёрный текст. Широкий формат 16:9.»*

Для бесшовных паттернов (повторяющиеся узоры).

Если вам нужен паттерн для фона блока (например, едва заметный узор), используйте в Midjourney параметр — tile. Он делает картинку «бесшовной» — края совпадают, и узор можно повторять бесконечно.

Промпт (Midjourney):

*«Seamless pattern of small [объект, например, листья или звёздочки], [цветовая гамма], minimalistic, vector style, tileable — tile — v 6»*

Для геройского блока (крупная красивая картинка).

Промпт (Midjourney):

*« [Действие или сцена], в стиле [художник или направление], мягкое освещение, кинематографичная композиция, широкий формат 16:9 — ar 16:9 — v 6»*

Часть 4. Техника «Единый стиль через референс»

Самый профессиональный способ — дать нейросети референс (пример) того стиля, который вам нравится, и попросить сгенерировать новые изображения в том же духе.

В Midjourney для этого есть функция /describe. Вы загружаете картинку-пример, и Midjourney пишет, как бы она сама описала этот стиль. Потом вы берёте это описание и используете для генерации новых иконок.

В DALL-E 3 вы можете загрузить изображение в чат (если используете ChatGPT Plus с DALL-E) и попросить: «Сгенерируй иконку кота в том же стиле, что и эта иконка телефона».

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

Часть 5. Как встроить сгенерированные изображения в сайт

Вы сгенерировали иконки. Что дальше?

Шаг 1. Удалите фон (если нужно).

Загрузите картинку в remove.bg. Скачайте PNG с прозрачностью.

Шаг 2. При необходимости уменьшите размер.

Иконки не должны быть огромными. 64×64 или 128×128 пикселей — достаточно. Используйте любой онлайн-сжатие изображений (TinyPNG).

Шаг 3. Сохраните в папку с сайтом.

Создайте папку images и положите туда все иконки и картинки.

Шаг 4. Вставьте в HTML.

Для иконки:

html

<img src="images/icon-phone.png» alt=«Позвонить» width=«32» height=«32»>

Для фоновой картинки в CSS:

css

.hero {

background-image: url('images/hero-bg.jpg’);

background-size: cover;

background-position: center;

}

Юридические нюансы (коротко, но важно)

Сгенерированные изображения — это серая зона с точки зрения авторского права. Законы только формируются. Но есть общие правила.

Что можно делать почти всегда: использовать сгенерированные изображения для своего сайта, включая коммерческое использование. Политики большинства сервисов (OpenAI, Midjourney) передают пользователю права на сгенерированный контент.