Как сделать сайт для бизнеса с ИИ: от задания до работающей формы
Neaptide · 6 сентября 2026 г. · 9 мин чтения · Обновлено: 3 октября 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 важные условия пишите рядом с описанием услуги, а учебные примеры явно помечайте как учебные. Существенные сведения не должны оставаться только внутри изображения. Места в поиске или в ответах ИИ ни одна такая настройка не гарантирует. Наш учебный сайт закрыт от индексации, сама статья для поиска открыта.
Когда подключать специалиста
- На сайте появляются платежи, личные кабинеты или бронирование с учётом свободных мест.
- Форма принимает запрос, но вы не можете проследить его до получателя.
- Нужно перенести существующий сайт и сохранить его адреса и поисковый трафик.
- Каждая правка ломает соседний блок, а причина непонятна.
Специалисту передайте описание задачи, исходные условия и результаты проверок. В упражнении мы проследили путь от первого экрана до ответа сервера. На сайте настоящей мастерской проверка заканчивается позже, когда ответственный сотрудник видит у себя корректную заявку.