Создать сайт нейросетью: лендинг по ТЗ на 10 страниц

Создать сайт нейросетью по готовому ТЗ — работа на один вечер. Показываю на живом заказе, что в ней делает модель, а что всё-таки ты.

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

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

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

Что вообще было в ТЗ

Хорошее ТЗ на лендинг — это не описание «хочу красиво и современно». В том документе было четыре вещи, и они закрывают 90 % вопросов:

• Палитра. Конкретные цвета, а не «в фирменном стиле».
• Экраны. Что идёт первым блоком, что вторым, где форма, где отзывы.
• Тексты. Готовые, написанные заказчиком.
• Фотографии. Приложены файлами.

Если у тебя на руках такое ТЗ — работа сводится к сборке. Если нет — ты сначала сам становишься автором ТЗ, и вот это самая дорогая часть, а не вёрстка.

Шаг 1. Превратить ТЗ в структуру, а не в задачу «сделай лендинг»

Первое, что я делаю — раскладываю десять страниц текста в список экранов по порядку. Один экран — одна строка. Что на нём, какая кнопка, куда ведёт.

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

Правило простое: сначала структура текстом, потом код. Пять минут на список экранов экономят вечер переделок.

Шаг 2. Собрать материалы до начала сборки

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

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

Материалы — первыми. Только потом сборка.

Шаг 3. Сначала каркас, потом красота

Сборку я всегда прошу делать в два прохода.

Первый проход — каркас: все экраны по порядку, настоящие тексты, настоящие картинки, рабочая форма. Некрасиво, но целиком и по-настоящему.

Второй проход — оформление: палитра из ТЗ, отступы, шрифты, поведение на телефоне.

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

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

Шаг 4. Тестовый домен и сертификат — до того, как показывать

Ключевой шаг, который отличает работу от учебного упражнения.

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

Почему это принципиально:

• Ссылка равно доверие. Архив с файлами заказчик не откроет или откроет неправильно и увидит поехавшую вёрстку.
• Без сертификата браузер пугает. Человек видит предупреждение о небезопасном соединении и делает вывод о качестве работы.
• Ссылку можно переслать. Заказчик покажет её партнёру и жене, и решение примут быстрее.

Технически это одна операция: домен, деплой, автоматический сертификат. Но пропускают её постоянно — и потом объясняют по переписке, почему «у меня локально работало».

Шаг 5. Чек-лист перед показом

Прогоняю глазами за пять минут, до отправки ссылки:

1. Все экраны из списка на месте, ни один не потерялся.
2. Тексты — из ТЗ, а не сгенерированные модели «по смыслу».
3. Фотографии — заказчика, не стоковые заглушки.
4. Форма реально отправляет заявку, и я вижу, куда она приходит.
5. Телефон: ничего не разъезжается, кнопки нажимаются пальцем.
6. Ссылка открывается по https без предупреждений.
7. Вкладка подписана нормально, а не «Document».

Седьмой пункт вроде ерунда, но его замечают все.

Шаг 6. Отдача заказчику

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

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

Тестовый домен — это витрина для приёмки, а не постоянный адрес проекта. Держать чужой готовый сайт на своём тестовом домене месяцами — плохая идея.

Что сделала нейросеть, а что решал я

Разделю честно, потому что это главное, что стоит забрать из статьи.

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

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

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

Где такой подход не сработает

Скажу честно, где я бы так не делал.

• Нет ТЗ и нет текстов. Тогда сначала ТЗ. Нейросеть не придумает ваше позиционирование.
• Нужна сложная логика: личный кабинет, оплата, склад, интеграция с CRM. Это уже не лендинг, там другая цена ошибки и другой порядок работы.
• Жёсткий бренд-бук с нестандартной типографикой. Дизайнер тут вернёт больше, чем сэкономит генерация.

Лендинг по готовому ТЗ — идеальный первый заказ для новичка именно потому, что все решения уже приняты заказчиком. Тебе остаётся не ошибиться в порядке действий.

Что дальше

Если ты дочитал до этого места, у тебя уже есть рабочая схема: структура экранов, материалы, каркас, дизайн, домен с сертификатом, чек-лист, передача. Возьми любое ТЗ и пройди по ней один раз.

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