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

Блок 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. Потратить часы на то, что можно сделать за минуты.

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

Референсы — это не жульничество. Это исследование рынка.

Что нейросеть может увидеть в чужом сайте (а вы — нет)

Вы смотрите на сайт и видите: «Красиво. Синий фон. Крупные буквы».

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

Она видит цветовую схему: не просто «синий», а конкретный оттенок, контрастность, сочетаемость.

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

Она видит композицию: сетку, отступы, выравнивание, соотношение пустого и заполненного пространства.

Она видит настроение: строгое, игривое, дорогое, технологичное — через сочетание всех визуальных элементов.

Она видит паттерны: где находится логотип, как устроено меню, куда ведёт взгляд, где главная кнопка.