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

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

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

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

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

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

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

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

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

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

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

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

Моя задача: квиз, который подбирает уход и собирает контакты.

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