Тест подбора автомобиля, который сам приносит заявки

Промпт для квиза подбора автомобиля

Скопируйте текст кнопкой и вставьте его в поле сообщения нового проекта. Бот сам спросит про ваши машины и бюджеты, а потом соберёт квиз.

Роль: senior product designer, UX-архитектор и фронтенд-разработчик. Помоги мне без технических знаний собрать квиз подбора автомобиля одним HTML-файлом. Я не программист: сущности, поля и экраны придумай за меня.

Сначала задай мне 8–15 простых вопросов с готовыми вариантами: что я продаю — новые машины, авто с пробегом, подбор под заказ или помощь в выборе; какие бюджеты называют чаще всего; какие кузова спрашивают (седан, кроссовер, универсал, пикап); нужен ли вопрос про коробку и привод; что важнее покупателю — расход, размер, клиренс или стоимость обслуживания; для чего берут машину — город, трасса, дача, семья; спрашивать ли про пробег и год; что человек получает в конце — три варианта, один вариант или расчёт платежа; как со мной связаться; хочу ли я видеть, на каком вопросе люди уходят. Не спрашивай про фреймворки, базы данных и хостинг. Перескажи услышанное своими словами и начинай сборку.

Модель данных: вопрос — текст, порядок, тип выбора (один или несколько), обязательность, подсказка; вариант — текст, баллы, целевая ветка; ветка — условие перехода к следующему вопросу; результат — три рекомендации, у каждой название, кузов и класс, чем подходит, на чём экономить, кому не подходит; лид — имя, телефон или ник, ответы, подобранные варианты, дата, отметка «обработан»; прохождение — статус и лог ответов.

Статусы прохождения: старт → вопросы → результат → заявка. Человек может закрыть квиз на результате без контакта: тогда прохождение остаётся с ответами и подобранными вариантами, но без заявки.

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

Логика подбора: баллы за ответы складываются в профиль — бюджет, размер, тип дорог, приоритет расхода; ветки отсекают заведомо неподходящее (при бюджете до миллиона не показывать новые кроссоверы, при парковке во дворе — не предлагать длинные седаны); если ответы противоречат друг другу, покажи два честных варианта и пометку «стоит уточнить на осмотре».

Оформление: яркий плакатный стиль — светлый тёплый фон, очень крупные заголовки, один акцентный цвет на кнопках, скругления 14–24 px, заметные тени у кнопок. Никаких стоковых фото и внешних шрифтов: только CSS. Адаптив от 360 px, варианты должны нажиматься пальцем.

Технически: один HTML-файл, стили и vanilla JS внутри, данные в localStorage. Без сервера, сборщиков, npm и сторонних библиотек. Слои: хранилище → сущности → логика подбора → компоненты → экраны → навигация. После любого действия состояние сохраняется и экран перерисовывается сразу. Предусмотри пустые списки, подтверждение удаления, Escape, битые данные в localStorage и возврат в незакрытое прохождение.

Заполни демо-данными: три набора рекомендаций и пять прохождений с разными статусами. Добавь кнопку «Удалить демо-данные» с подтверждением и выгрузку заявок в CSV. Проверь сам: прохождение целиком, возврат на шаг назад, уход без контакта, повторное открытие, удаление прохождения, мобильный экран. Ответом должен быть готовый HTML-файл целиком; правки присылай так же.

Моя задача: квиз, который подбирает автомобиль и собирает заявки.

Прокрутите блок, чтобы прочитать промпт целиком