Как создать сайт услуг с ИИ-агентом: от описания до готовой страницы
Описание услуг и цены уже есть, а отправить клиенту по-прежнему нечего. Попросите агента собрать из этих материалов страницу, которую можно открыть и посмотреть.
Сделай одностраничный сайт для учебной студии «Кадр»: снимаем короткие ролики для кафе и магазинов. Добавь услуги, цены, как проходит работа и кнопку «Обсудить съёмку». Пришли готовый HTML, чтобы открыть в браузере.
Что передать агенту
Мы передали три позиции прайса и выбрали светлый фон с фиолетовым акцентом. Отдельно попросили не придумывать контакты, отзывы и портфолио. Пока контакт не подключён, кнопка должна честно сообщать об этом.
ТекстСкачать полный запрос и исходные данные1 КБ
Все исходные данные о студии и клиентах в этом примере демонстрационные.
Что получилось в реальном чате
Агент подготовил самостоятельный HTML-файл и прислал снимки компьютерной и мобильной версии. Мы проверили код и просмотрели эти снимки: цены на месте, контакт не подставлен, для кнопки предусмотрено уведомление «Контакт ещё нужно подключить». На скриншотах декоративная карточка изображает формат ролика, а не реальное портфолио.
КартинкаПервый экран на телефоне479 КБ · КартинкаВся мобильная страница1.3 МБ
СтраницаОткрыть готовый демонстрационный сайт23 КБ
Что проверить в результате
Важен не только первый экран. Проверьте цены, работу кнопок и узкий экран телефона. Если на странице есть форма заявки, нужно проверить, куда попадёт отправленная заявка. Просто нарисованная форма ещё не означает, что вы получите сообщение.
Как повторять работу
После проверки первого результата попросите сохранить порядок работы как навык:
Сохрани структуру и стиль сайта как навык. Когда меняем услуги и цены, обновляй соответствующие блоки и проверяй страницу на телефоне.
Тогда следующее поручение можно сформулировать короче:
Добавь услугу монтажа из материалов клиента и обнови прайс. Остальные блоки оставь как были.
В этом примере сайт остаётся локальным HTML-файлом: публикацию и приём заявок мы не выполняли. Следующий отдельный шаг — поручить агенту размещение на выбранном хостинге и подключение домена. Для этого ему понадобится доступ к площадке. Возможности внешнего управления зависят от её API, MCP или другого разрешённого способа подключения.
Перед первым поручением
Можно сделать сайт без программирования? Пользователь описывает нужную страницу обычными словами, а агент создаёт код. Результат всё равно стоит открыть и проверить.
Можно использовать свои фотографии? Да, передайте материалы и укажите, где их разместить. Демонстрационный сайт не выдаёт чужие работы за портфолио студии.
Дальше: Как сделать коммерческое предложение с ИИ-агентом — и больше не собирать его с нуля
