Нейросеть для создания сайтов: как выбрать устройство проекта
Тому, кто выбирает формат своего первого сайта
Решение о структуре сайта до генерации страниц
7 мин
Нейросеть нарисовала страницы, но данные и действия не определены
Выбрана структура проекта, понятны источники данных и проверка результата
Как определить структуру сайта до работы с нейросетью: статические страницы, каталог или система с личным кабинетом. Примеры из проектов Алексея.
На запрос «нейросеть для создания сайтов» часто отвечают списком сервисов. Но выбор модели не решает, где будут храниться товары, кому приходят заявки и как обновляется цена. Я собирал проекты разного размера: статический сайт «Гутман Групп», магазин «Православная Трапеза» и систему СПА из истории ниже. По ним удобно увидеть три разных устройства сайта и понять, какую задачу ставить агенту.
Опишите действие посетителя раньше внешнего вида
Начните с предложения: «человек пришёл за X и в конце сделал Y». Для инженерной компании это проверка направления, портфолио и контакта. Для магазина это выбор товара, корзина и заказ. Для СПА это выбор процедуры, времени и запись. Эти сценарии различаются источниками данных. Список объектов подрядчика меняется редко. Цена и остаток товара меняются чаще. Свободные часы мастера должны отражать фактическое расписание.
Если попросить модель «сделай красивый сайт» до этого решения, она может нарисовать все три задачи одинаковой страницей с формой. Получится видимость сайта без рабочего пути. Мой первый документ для агента содержит роли, данные, действия и способ проверки. Цвета и сетку можно закрепить после того, как ясно, какие страницы нужны. Детальный текст задания разобран в статье про промпт для создания сайта; здесь сосредоточимся на выборе устройства.
| Пример из практики | Что меняется | Что требуется проекту |
|---|---|---|
| «Гутман Групп», 9 страниц | Описания услуг и объектов | Страницы, меню и понятное обновление портфолио |
| «Православная Трапеза» | Товары, цены, корзина, заказ | Данные о товарах и общий расчёт заказа |
| «Лёд и Пламя», 96 услуг | Расписание, записи, бонусы | База и правила доступа для разных ролей |
Когда хватит статических страниц
У «Гутман Групп» сайт отвечает на проверочные вопросы B2B‑заказчика. В кейсе девять страниц: направления, портфолио, сведения о компании и контакт. Такой проект не требует личного кабинета каждому посетителю. Важны ясные ссылки между страницами, настоящие работы и актуальные документы. ИИ может помочь разложить материалы по разделам и собрать код, но владельцу нужно подтвердить содержание.
Для подобного проекта техническое задание можно хранить в одном файле рядом с кодом. Агенту дают список страниц и исходных материалов. После изменения проверяют, что ссылка с главной ведёт к нужной услуге, мобильное меню открывается, контактная кнопка работает. Если объект нельзя публиковать с адресом, агент должен получить это ограничение до генерации текста. Выдумать объект для портфолио нельзя даже ради заполнения страницы.
Страница: электромонтаж
Посетитель: закупщик или заказчик объекта
Нужны: виды работ, подтверждение опыта, контакт
Источник фактов: согласованные материалы компании
Готово, когда: путь с главной до контакта проходит с телефонаКогда сайт становится магазином
В «Православной Трапезе» карточка товара, каталог и корзина связаны общими данными. Если цена существует одновременно в карточке, в коде корзины и в письме заказа как три отдельных числа, их легко рассинхронизировать. Поэтому перед генерацией страниц я определяю сущность товара: название, вариант, цена, наличие, изображения. Корзина сохраняет идентификатор выбранного варианта и количество, а сумму рассчитывает по тому же источнику цены.
На снимках кейса карточка икры кеты 500 г показывает 550 ₽, а боковая корзина для двух единиц 1 100 ₽. Это простая проверка цепочки. ИИ может быстро написать интерфейс корзины, но приёмка требует провести изменение количества до страницы заказа. У магазина возникают права администратора, оплата, получение, вопросы персональных данных. Их нельзя считать готовыми потому, что главная страница выглядит законченной.
Когда нужна система за сайтом
Для системы СПА из истории уже недостаточно набора HTML-страниц. Нужно определить, где находится первичная запись об услуге, кто может её менять, откуда берутся свободные часы и что происходит при отмене визита. Если агенту не задать эти отношения, он может построить красивую форму, которая никому не сообщает о записи.
На уровне проекта я разделяю страницу посетителя, данные и действие сотрудника. Посетитель видит доступные варианты; сервер проверяет актуальность; сотрудник или мастер получает запись по своей роли. Конкретные технологии зависят от задачи и поддержки. Важнее не название библиотеки, а возможность проверить один сценарий от нажатия до записи в системе. Для клиники эта граница особенно чувствительна: медицинский совет остаётся за специалистом.
| Вопрос до выбора инструмента | Статический сайт | Магазин или система |
|---|---|---|
| Кто меняет данные | Редактор страниц | Администратор в интерфейсе |
| Что происходит после кнопки | Звонок или сообщение | Сохраняется заказ либо запись |
| Нужны ли права пользователя | Обычно нет | Да, если есть кабинет или роли |
| Что проверять после сборки | Страницы и контакт | Ещё данные, расчёт и состояние |
Как поставить агенту маленькую первую задачу
Выберите вертикальный кусок, который можно закончить и проверить. Для B2B‑сайта это главная, страница услуги и контакт. Для магазина это один товар и корзина без оплаты. Для системы записи это одна услуга, один свободный час и запись, видимая сотруднику. Такой кусок показывает, годится ли выбранная структура. Большой список страниц без работающего сквозного пути даёт ложное чувство готовности.
На существующем проекте сначала посмотрите папки и команды сборки, затем попросите агента описать возможную правку. Если проект принадлежит клиенту, перед изменением проверьте его актуальную версию и зависимости. Это помогает не затереть уже работающие элементы. В моих задачах сайт может быть на Next.js, а отдельный бот на Python; универсальная структура папок для всех случаев была бы выдумкой.
pwd
rg --files | head -80
git status --shortПроверьте выбранный формат на реальном пути
Попросите человека, который не участвовал в сборке, выполнить действие посетителя без подсказок. На сайте подрядчика он должен найти нужное направление и портфолио. В магазине добавить товар и дойти до состава заказа. В СПА выбрать услугу и увидеть, как подтверждается запись. Фиксируйте каждый обрыв в конкретном месте. После исправления повторите тот же путь с телефона. Перечень инструментов без такой проверки мало помогает.
Техническую сторону тоже надо принять: собрать проект, убедиться, что служба сайта слушает локальный адрес за сервером, проверить зависимости перед выкладкой. Это отдельная стадия. Подробнее о ней в статье про выкладку сайта. Для самостоятельной работы можно пройти путь проекта вместе со мной на обучении.
npm audit --omit=dev --audit-level=high
npm run buildЧастые вопросы
Какая нейросеть лучше делает сайт?
Сначала назовите тип проекта и критерий приёмки. Один инструмент может быстро нарисовать страницу, но это не доказывает работу корзины или записи. Сравнивать инструменты стоит на одинаковой задаче.
Можно ли начать магазин как обычный лендинг?
Можно проверить спрос на один продукт, если честно ограничить сценарий заявкой. Для настоящего заказа понадобятся товарные данные, расчёт, хранение корзины и получение заказа.
Почему личный кабинет усложняет проект?
Он добавляет роли и права: кто видит запись, кто меняет цену, что доступно клиенту. Эти правила должны быть описаны и проверены до выкладки.
Нужно ли заранее выбрать весь стек?
Достаточно выбрать устройство данных и первый проверяемый путь. Технологии уточняйте под существующий проект и способ его дальнейшей поддержки.
Если собираете свой первый сайт с ИИ, возьмите один путь пользователя и решите, какой из трёх форматов ему нужен. На обучении Алексея можно пройти этот выбор и собрать работающий кусок вместе.