Сайт из ответов клиента: бриф в WebAsk и прототип с ИИ

Собираем требования к сайту в WebAsk, заполняем бриф на примере фотостудии и по ответам создаём прототип с ИИ. Вопросы, промпт, скриншоты и HTML для повторения.

«Сделай сайт фотостудии» задаёт ИИ тему, но почти ничего не говорит о бизнесе. Какие залы сдаёт студия? Сколько стоят два часа? Должен ли клиент сразу платить или сначала согласовать дату? Эти ответы приходится добывать до генерации страницы.

Соберём бриф в WebAsk, заполним его для фотостудии и превратим ответы в задание для ИИ. На выходе получим работающий HTML-прототип с выбором зала и расчётом аренды. В конце можно забрать вопросы, заполненный пример, промпт и исходник сайта.

«Тихий кадр» придуман для статьи. Сам бриф создан в настоящем WebAsk: мы заполнили его в авторском предпросмотре и по этому учебному тексту собрали сайт. Реального заказчика в примере нет; порядок работы и экраны можно повторить.

Открыть готовый прототип · Скачать бриф, промпт и HTML сайта

Содержание

1. Бриф до генерации сайта
2. Какие вопросы задать клиенту
3. Заполняем пример для «Тихого кадра»
4. Как передать ответы ИИ
5. Что получилось из ответов
6. Как повторить на своём проекте

Бриф до генерации сайта

У фотостудии есть условие: минимум два часа аренды. Если его забыть, ИИ поставит рядом с кнопкой цену за один час, а посетитель будет рассчитывать совсем на другую сумму. В брифе спрашиваем об ограничениях отдельно от прайса.

WebAsk здесь нужен как анкета для заказчика. Один раз задаём вопросы о цели, ценах, заявке и недостающих материалах, настраиваем переходы, а затем используем этот порядок на следующих проектах. Требования из ответов отправятся в промпт и станут списком проверок для готовой страницы.

Вопрос «Какой сайт вам нравится?» оставляет дизайнеру слишком много догадок. Вопрос «Что посетитель должен сделать на странице?» уже определяет кнопку, форму и порядок блоков. Если цель студии получать заявки, цена и условия аренды нужны до этой кнопки.

Какие вопросы задать клиенту

В конструкторе WebAsk создаём анкету с приветствием и экраном завершения. Для цели сайта используем выбор одного варианта, для полей заявки несколько вариантов, для цен и условий развёрнутый текст. Обязательными делаем вопросы, без которых нельзя начать: цель, цены, условия и недостающие материалы. В нашем примере обязательны все вопросы выбранной ветки, а ответ «пока не знаем» разрешён.

Всего в анкете 10 вопросов. Ветка с заявкой содержит девять: вопрос про абонементы ей не нужен.

1. Как называется проект и где он работает?
2. Что посетитель должен сделать на сайте: оставить заявку, купить абонемент или посмотреть портфолио?
3. Что нужно узнать в заявке: зал, дату, продолжительность, способ связи?
4. Что входит в абонемент и как его покупать? Только для ветки с продажей абонементов.
5. Кто ваши клиенты и зачем им студия?
6. Какие залы и цены показать на сайте?
7. Какие условия аренды нужно показать до заявки?
8. Как должен выглядеть сайт?
9. Что обязательно должно быть на странице?
10. Каких материалов пока нет и что нельзя придумывать?

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

В WebAsk настраиваем переходы от вопроса о цели. Выбрана заявка на аренду? Показываем поля заявки, затем переходим к аудитории. Для продажи абонементов открываем вопрос об их условиях; для портфолио пропускаем обе эти детали. Возможность задавать разные вопросы по ответам описана на сайте WebAsk.

Для другого проекта меняются предметные вопросы: у курса появятся программа и формат занятий, у ремонта квартир перечень работ и порядок оценки. Саму анкету не нужно превращать в допрос на 50 пунктов. Сначала соберите сведения, без которых нельзя выбрать структуру первой версии.

Заполняем пример для «Тихого кадра»

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

Минимальная аренда: два часа. Свет включён, фотограф и визажист оплачиваются отдельно. Отправка заявки не бронирует зал: время согласует администратор. Эти условия записываем отдельным ответом, чтобы они не затерялись в описании студии.

По оформлению выбираем светлый холодный серый фон, графитовый текст и синий акцент. Реальных фотографий залов пока нет, поэтому просим схемы с подписью. В вопросе о недостающих материалах также перечисляем точный адрес, отзывы и календарь занятости.

В рабочем проекте проверенный бриф публикуют, отправляют ссылку заказчику и берут его ответ из раздела «Результаты». Наш проход выполнен в авторском предпросмотре, который не записывает ответ в результаты. Поэтому для промпта мы отдельно сохранили введённый учебный текст; вымышленного клиента за настоящего не выдаём.

Как передать ответы ИИ

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

Мы передали заполненный пример Codex и попросили собрать адаптивную HTML-страницу. WebAsk в этом сценарии собирает бриф; сам сайт пишет ИИ-помощник. Можно использовать другой инструмент генерации сайтов, если он принимает текстовое задание, но проверять его результат всё равно придётся.

Перед брифом добавляем такую инструкцию. Полная версия с ответами лежит в архиве.

Собери адаптивный одностраничный HTML-прототип по брифу ниже.
Сначала перечисли недостающие сведения. Используй только факты из ответов.
Покажи два зала, цену за час и минимум за 2 часа.
По кнопке «Уточнить свободное время» открой форму:
зал, дата, длительность, способ связи.
Стоимость = ставка выбранного зала × число часов.
Контроль: 2 часа в «Циклораме» = 4800 ₽.
Не придумывай фото, адрес, отзывы и свободные даты.
Вместо фото используй подписанные схемы.
Заявка не подтверждает бронь. Отправку и оплату не подключай.
Пометь страницу как учебный прототип.
Ниже прикладываю полный бриф.

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

Что получилось из ответов

На первом экране стоят кнопка запроса времени и минимальная цена аренды. Ниже можно сравнить два зала. По выбору «Циклорамы» открывается форма, где уже выбран этот зал. Проверяем страницу по брифу, включая мелкую оговорку про бронь.

Расчёт проверен в браузере: 2 часа «Циклорамы» дают 4 800 ₽, 3 часа дают 7 200 ₽. У «Окна» минимальные два часа стоят 3 600 ₽. Поменяйте зал и длительность в демо, сумма пересчитается.

Это ещё не запущенный сайт студии. Форма показывает пример заявки и ничего не отправляет, свободные слоты не проверяет, оплату не принимает. Перед запуском нужны настоящие материалы, рабочий канал заявок и проверка обработки контактов.

Мобильную версию тоже проверили на ширине 393 пикселя: форма помещается в экран, выбор зала и пересчёт работают. Проверка в браузере не заменяет проверку на конкретном телефоне.

Как повторить на своём проекте

Возьмите список вопросов, замените залы на услуги своего заказчика и соберите бриф в WebAsk. Проверьте переходы в просмотре. Затем отправьте заказчику опубликованную анкету и перед генерацией сверьте цены, условия и пробелы в его ответах.

Бриф пригодится и после первого макета. Когда заказчик спросит, почему на сайте запрос даты вместо мгновенной брони, можно открыть его ответ об условиях и обсудить изменение. Цена, состав формы и отсутствующие материалы тоже записаны в своих вопросах. Эти ответы остаются опорой при следующих правках.

Скачать комплект примера: вопросы для WebAsk, контрольные ответы, полный промпт и автономный HTML. Посмотреть сайт из брифа.