Как нейросеть собирает сайт за минуты — без единой строчки кода

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

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

Что вы напишете

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

Создай посадочную страницу для онлайн-школы по психологии. Главный блок с заголовком «Психология для бизнеса» и кнопкой «Записаться». Блок «Для кого» с четырьмя ролями: предприниматель, эксперт, наставник, тренер. Блок с программой курса — восемь модулей. Блок отзывов с тремя карточками. Цена 49 000 ₽. Форма заявки внизу. Стиль: тёмная тема, бирюзовый акцент, типографика в духе Apple. Сделай на Next.js и Tailwind, готовый к выкату.

Заметьте — здесь нет ни одного технического термина из мира программирования. Только то, как должна выглядеть страница и из чего она состоит. Названия «Next.js» и «Tailwind» — это просто маркеры, по которым агент понимает какой набор технологий брать. Их роль такая же как «купи в магазине» — указание места, а не команда что делать.

Что произойдёт дальше

Получив такой промпт, агент проходит несколько шагов один за другим — без вашего участия. Сначала разбирает запрос: вытаскивает структуру (сколько блоков, что в каждом, какой стиль), решает какие файлы для этого нужны, как их связать. Дальше создаёт папку проекта и пишет в неё начальный скелет — конфигурацию Next.js, подключение Tailwind, базовую вёрстку.

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

Каждый из этих шагов раньше делал человек, и каждый занимал минуты или часы. Создание проекта, ручная вёрстка десятка блоков, подключение шрифтов, проверка адаптива, локальный запуск. Агент проходит всю цепочку без вашего участия — вы вмешиваетесь только если хотите что-то поправить.

Что окажется у вас на экране

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

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

Чем это отличается от классической разработки

До 2025 года тот же лендинг проходил через несколько этапов с разными исполнителями. Сначала вы искали разработчика — публиковали задачу, собирали отклики, договаривались по цене. Потом был бриф и согласование — что именно нужно, какие блоки, какой стиль. Дальше дизайнер делал макет в Figma — за деньги. Только после этого начиналась вёрстка — тоже за деньги и тоже не быстро. В конце — тестирование, правки, выкат. Каждый этап был отдельной работой, отдельной оплатой и отдельной точкой просрочки.

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

Главное следствие — экономика. Когда лендинг стоит не сотню тысяч и месяц работы, а несколько долларов и полчаса — открываются ниши, в которых раньше делать сайт было нерентабельно. Микро-страница под одну услугу мастера маникюра, лендинг под разовую распродажу, страница для проверки гипотезы которая может не сработать. Раньше это был «не вариант», теперь — рабочая практика.

А подводные камни есть

Конечно. ИИ может ошибиться, оставить недоделанный кусок, сделать «странно» — особенно если промпт размытый. Поэтому к процессу есть требования, и это не «знайте программирование». Главное — точная формулировка. «Сделай красиво» работает плохо. «Сделай блок с заголовком X, подзаголовком Y, кнопкой Z, фоном такой-то цвет» работает хорошо. Чем конкретнее — тем меньше итераций.

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

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

Что в следующем уроке

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