Как сделать сайт для бизнеса с ИИ: от задания до работающей формы
Neaptide · 6 сентября 2026 г. · 9 мин чтения · Обновлено: 7 сентября 2026 г.
Создаём учебный сайт мастерской с ИИ: готовим задание, проверяем страницу на телефоне, тестируем форму и публикуем. Со скриншотами и работающим примером.
В этой статье
Посетитель выбрал занятие, ввёл email и нажал кнопку. На экране появилось «Спасибо!», но владелец мастерской ничего не получил. Такой сайт выглядит готовым, хотя не выполняет основную задачу. Поэтому ещё до разработки с ИИ определите, что посетитель должен узнать и сделать, а также как вы проверите получение его заявки.
Для небольшого сайта подготовьте факты о бизнесе и опишите главное действие посетителя. Затем соберите страницу, проверьте её на узком экране и протестируйте форму. После публикации повторите проверку по публичному адресу. Агент поможет написать и изменить код, но условия услуги и готовность сайта нужно подтвердить отдельно.
Что мы сделали для этой статьи
Для статьи мы собрали учебный сайт вымышленной керамической мастерской Forma. На первом экране описано занятие, ниже расположены программа и форма. Изображение взяли из предыдущего практикума. Название мастерской, цена 60 € и сроки вымышлены; отзывов и клиентских результатов в примере нет.
Пять иллюстраций ниже — наши скриншоты работающего примера. Сервер получает и проверяет учебный запрос, но не сохраняет заявку и не отправляет письма. В форме можно использовать только адреса @example.com, поэтому настоящие контактные данные для упражнения не нужны.
1. Подготовьте сведения о бизнесе
По заданию «сделай современный сайт» агенту придётся многое угадывать. Для мастерской заранее опишите, чему научится участник, сколько длится занятие, что входит в цену, когда можно забрать изделие и как связаться с организатором. Недостающие сведения пометьте для уточнения. Не разрешайте модели придумывать опыт мастера, адрес или отзывы.
| Что определить | В нашем примере |
|---|---|
| Кому помогаем | Человеку без опыта в керамике |
| Что предлагаем | Двухчасовое занятие: сделать чашку |
| Что нужно узнать | Стоимость, материалы, этапы занятия и срок готовности изделия после обжига |
| Главное действие | Перейти к форме и оставить запрос |
| Как проверяем | Кнопка открывает форму, ошибки объяснены, сообщение об отправке соответствует результату на сервере |
Запишите эти сведения в отдельный файл проекта. Он пригодится при следующей правке: агенту не придётся угадывать, включён ли обжиг в цену. Для реального сайта владелец должен подтвердить факты перед публикацией.
2. Выберите, как будете создавать и обновлять сайт
Если сотрудники будут часто менять страницы без помощи разработчика, заранее предусмотрите редактор или CMS. Для небольшого сайта с нестандартной формой может подойти проект с кодом и понятным способом публикации. Выбирайте с учётом того, кто будет поддерживать сайт после запуска.
Откройте папку проекта в агенте, который умеет работать с файлами. Установка и первые шаги в Codex описаны в отдельной статье. Сначала попросите предложить структуру страницы и перечислить недостающие данные, затем переходите к созданию сайта. Ниже — задание, с которым можно повторить наше упражнение.
Создай учебный сайт керамической мастерской Forma.
Аудитория — взрослые без опыта. Занятие длится 2 часа, стоит 60 € с человека, группа до 8 человек. Материалы и обжиг включены. Все эти условия вымышлены: явно подпиши пример.
Блоки: предложение и кнопка, программа из трёх этапов, форма. Не добавляй отзывы, адрес и статистику.
Используй готовое изображение из проекта. На узком экране текст и картинка должны идти друг под другом.
В форме — учебный email @example.com и число участников от 1 до 8. Проверяй поля в браузере и на сервере. Не сохраняй заявку и не отправляй письма. Сообщай об этом в результате.
Добавь режим ошибки сервера: после сбоя поля остаются заполненными и запрос можно повторить.
Сначала перечисли файлы, которые изменишь, и предложи порядок проверки.3. Проверьте первый экран глазами посетителя
На первом экране должно быть понятно, что вы предлагаете, что включено в цену и как перейти к записи. В нашем макете текст расположен отдельно от картинки, поэтому при изменении заголовка её не нужно генерировать заново. Нажмите кнопку и проверьте, что она действительно ведёт к форме.
В правках указывайте конкретную задачу. Например, «сократи описание до двух предложений, сохрани сведения о материалах» понятнее, чем «сделай лучше». Сохраняйте рабочую версию после значимых изменений, чтобы при необходимости вернуться к ней.
4. Проверьте страницу на узком экране
На узком экране две колонки становятся одной: сначала идут текст и кнопка, затем изображение. Текст не должен перекрывать чашку. Кроме такой проверки в макете, откройте сайт на настоящем телефоне. Заполните форму с экранной клавиатуры и убедитесь, что поля и кнопка остаются доступны.
Проверь страницу на узком и широком экране. Найди горизонтальную прокрутку, обрезанный текст и перекрывающие друг друга элементы. Пройди ссылки и форму с клавиатуры. Исправляй найденные проблемы по одной, затем повторно проверь затронутый сценарий.5. Проверьте форму в трёх состояниях
Неверные данные
В примере на занятие можно записать не больше восьми человек. Введите 9: форма должна объяснить ошибку рядом с полем, перевести на него фокус и не отправлять запрос. Проверка в браузере помогает посетителю заполнить форму, но сервер тоже должен проверять данные — запрос можно отправить в обход интерфейса.
Ошибка сервера
Укажите 2 участника и включите учебный сбой. Сервер вернёт HTTP 503. Форма должна показать ошибку и сохранить введённые данные. Выключите сбой и отправьте запрос снова. Так вы проверите, что после временной ошибки посетителю не приходится заполнять всё заново.
Подтверждение
Если поля заполнены правильно, сервер возвращает HTTP 200 и сообщает: данные проверены, заявка не сохранена, письмо не отправлено. Именно это показывает форма. Пока запрос выполняется, кнопку нельзя нажать повторно.
Для настоящего сайта определите, куда поступает заявка: в CRM, систему бронирования или на почту. Отправьте тест и найдите его у получателя. Если сервис подтвердил только постановку в очередь, сообщение пользователю не должно утверждать, что письмо уже доставлено. Если повторная отправка создаёт дубли, потребуется исправить её обработку на сервере.
В этом учебном проекте обработчик прошёл 12 проверок. Среди них — корректный запрос, ошибки адреса и количества участников, неверный формат данных, слишком большой запрос и искусственный сбой. Эти тесты проверяют логику примера. Они не заменяют нагрузочное тестирование или аудит полноценной системы бронирования.
6. Опубликуйте сайт и проверьте его по публичному адресу
Для сайта с кодом можно связать репозиторий с хостингом. Репозиторий хранит версии файлов, а хостинг собирает сайт и делает его доступным посетителям. В нашем проекте используются GitHub и Vercel. Отдельный виртуальный сервер, или VPS, для небольшого сайта нужен не всегда. Если форма использует серверный обработчик, убедитесь, что хостинг его поддерживает.
- Сохраните рабочую версию в репозитории и подключите его к хостингу.
- Проверьте настройки сборки и окружения. Адрес получателя и секреты интеграции задаются отдельно от публичного кода страницы.
- Откройте предварительную публикацию и повторите путь посетителя: кнопка, форма, ошибка, результат.
- Подключите домен по инструкции хостинга и дождитесь корректного HTTPS.
- После выпуска проверьте публичный адрес и фактическое получение тестовой заявки в выбранной системе.
В бюджет включайте создание сайта, инструмент ИИ, домен, хостинг, сервисы для формы и обслуживание после запуска. Сумма зависит от трафика, тарифов и интеграций. Стоимость подписки на ИИ — лишь одна часть этих расходов.
7. Подготовьте страницы к поиску
Проверьте title, описание и основной заголовок страницы. В тексте должны быть ответы на вопросы клиента: кому подходит услуга, что включено в цену и что произойдёт после заявки. Для сайта на нескольких языках проверьте адреса и переключение версий. Структурированные данные должны соответствовать содержанию страницы.
Для GEO/AEO важные условия полезно указывать рядом с описанием услуги, а учебные примеры — явно обозначать. Не оставляйте существенные сведения только внутри изображения. При этом отдельная настройка не гарантирует место в поиске или ответах ИИ. Наш учебный сайт закрыт от индексации, а сама статья доступна для поиска.
Когда подключать специалиста
- На сайте появляются платежи, личные кабинеты или бронирование с остатками мест.
- Форма принимает запрос, но вы не можете проследить его до получателя.
- Нужно перенести существующий сайт и сохранить его адреса и поисковый трафик.
- Каждая правка ломает соседний блок, а причина непонятна.
Передайте специалисту описание задачи, исходные условия и результаты проверок. В нашем упражнении мы прослеживаем действия от первого экрана до ответа сервера. На сайте настоящей мастерской проверка должна продолжаться до появления корректной заявки у ответственного сотрудника.