Как создать сайт с помощью нейросети: пошагово

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

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

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

Главная ошибка: один большой запрос

Почему «сделай сайт целиком» не работает, хотя модель честно что-то выдаёт.

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

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

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

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

Шаг 0. Ответить на один вопрос

До первого запроса — одна строка на бумаге: что должен сделать посетитель. Оставить заявку. Записаться. Позвонить. Скачать прайс.

Это не формальность. От этой строки зависит структура сайта, порядок блоков и то, что вообще на нём нужно. Без неё модель сгенерирует средний сайт вообще ни для кого — и будет по-своему права, потому что вы не сказали иначе.

Шаг 1. Структура текстом, без кода

Первый запрос — не про сайт, а про план.

Просите: «Вот мой бизнес, вот кто мой клиент, вот что он должен сделать. Предложи структуру одностраничного сайта: список блоков по порядку и одна фраза о том, что в каждом. Без кода».

Вы получите список из восьми-двенадцати блоков. Читаете и правите руками: этот выкинуть, эти поменять местами, этот добавить. Пять минут работы, которые экономят потом часы.

Проверка шага: вы можете пересказать структуру вслух и она звучит логично.

Шаг 2. Каркас без красоты

Второй запрос: «Собери страницу по этой структуре. Только разметка, минимальные стили, текст-заглушки. Никаких анимаций, библиотек и картинок».

Это самый скучный и самый важный шаг. Вы получаете скелет, где всё на месте и ничего не отвлекает. Здесь легко увидеть, что блок лишний или что не хватает шага в логике.

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

Шаг 3. Блоки по одному

Теперь по одному запросу на блок: «Оформи первый экран: заголовок, подзаголовок, кнопка. Палитра — такие цвета. Не трогай остальные блоки».

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

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

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

Шаг 4. Свой контент вместо выдуманного

Тексты-заглушки заменяем на настоящие. И здесь самое важное предупреждение всей статьи: не позволяйте модели придумывать факты о вашем бизнесе.

Она с удовольствием напишет «15 лет на рынке», «более 5000 довольных клиентов» и «работаем по всей стране». Это выдумка, которая попадёт на ваш сайт и которую потом прочитает клиент.

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

Проверка: в каждом утверждении на странице вы узнаёте свою правду.

Шаг 5. Телефоны

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

Обязательно откройте на своём телефоне сами. Модель не видит, как это выглядит; она рассуждает о коде. Ваши глаза на этом шаге — единственный надёжный инструмент.

Шаг 6. Публикация: домен и сертификат

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

Что нужно: хостинг или сервер, домен (на первое время подойдёт тестовый), сертификат для https. В моём заказе с тем самым ТЗ ассистент сделал это сам: сверстал, залил на тестовый домен, прикрутил сертификаты — по адресу открывается и работает. Но даже если вы делаете руками, это разовая настройка на полчаса, после которой каждое обновление занимает минуту.

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

Шаг 7. Правки после первого показа

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

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

Что нельзя отдавать нейросети

Четыре вещи, которые остаются на вас.

Факты о бизнесе. Цены, сроки, гарантии, опыт. Всё, за что вы отвечаете перед клиентом.

Юридическое. Политика обработки данных, согласия в формах, реквизиты. Тут шаблон из интернета — плохая идея.

Доступы. Пароли, ключи платёжных систем и токены в тексте запроса — прямой путь к тому, чтобы они утекли.

Решение «готово или нет». Модель считает готовым любой связный результат. Критерий готовности задаёте вы.

Сколько это занимает по времени

Честные ориентиры из практики.

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

И отдельно: срок сильно зависит от того, есть ли у вас материалы. Фотографии и тексты — то, из-за чего сайты задерживаются чаще всего.

Дальше

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

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