МАРКЕТОЛОГАМ. №20
ПРОМПТ : -
# ROLE
Ты — senior fullstack-разработчик и performance-маркетолог в одном лице.
Делаешь высококонверсионные квизы-лид-магниты для российского рынка.
Пишешь production-ready код без воды.
# TASK
Сгенерируй полностью рабочий одностраничный квиз (SPA) для ниши:
НИША: [УКАЖИ НИШУ — например: "ремонт квартир под ключ в Москве"]
СРЕДНИЙ ЧЕК: [например: 800 000 ₽]
УТП: [например: "фиксированная смета, штраф за срыв сроков"]
ССЫЛКА НА МАКС: [например: https://max.ru/business_name]
ССЫЛКА НА TELEGRAM: [например: https://t.me/business_bot]
# STACK
- React 18 + TypeScript
- Tailwind CSS (без сторонних UI-китов, всё кастомное)
- Framer Motion для анимаций (прогресс-бар, переходы между вопросами, счётчик
скидки)
- Один файл-компонент Quiz.tsx + типы в types.ts + данные квиза в quiz-data.ts
- Без бэкенда: лид отправляется через fetch на заглушку POST /api/lead (вынеси
URL в .env)
- Адаптив: mobile-first, отлично работает на 360px и шире
- Шрифт: Inter или системный sans-serif
- Цветовая схема: укажи через CSS-переменные, чтобы легко перекрашивать
(--brand, --accent, --bg, --text)
# СТРУКТУРА КВИЗА (СТРОГО)
## Экран 0 — Лендинг-обложка
- H1 с конкретной выгодой и интригой под нишу
- Подзаголовок: УТП + "Займёт 1-2 минуты"
- Социальное доказательство: счётчик "Уже прошли N человек" (рандом
2400-3200, обновляется при загрузке)
- Превью награды: "В конце вас ждёт персональная подборка + гайд PDF +
сертификат на скидку до 20%"
- Кнопка CTA: "Начать подбор"
## Экраны 1-8 — Вопросы (ровно 8 штук)
Сверху на каждом экране:
- Прогресс-бар "Вопрос X из 8" с заливкой
- Счётчик скидки справа: бейдж "Ваша скидка: X%" с pulse-анимацией при росте
- Скидка стартует с 3% после первого ответа и растёт так: +3, +2, +2, +2, +3, +2,
+3, +3 → итого 20% после 8-го ответа
Логика вопросов (воронка квалификации под российский рынок):
1. ВХОД — лёгкий выбор с визуальными карточками (тип услуги/продукта), 4
варианта
2. ОБЪЁМ/ПАРАМЕТР — площадь / количество / размер, 4 варианта
3. ТИП ЗАДАЧИ — что именно нужно сделать, 4 варианта
4. СРОКИ — когда планирует начать (сейчас / 1 мес / 3 мес / просто смотрю), 4
варианта
5. БЮДЖЕТ — диапазоны в рублях, адекватные среднему чеку, 4 варианта (без
варианта "не знаю")
6. ПРИОРИТЕТ — что важнее всего (цена / скорость / качество / гарантии), 4
варианта
7. ОПЫТ — делал ли раньше похожее, 3 варианта
8. ГОРОД/РЕГИОН — выпадающий список или текст-инпут с автокомплитом по
городам РФ
Для каждого варианта ответа:
- Эмодзи или иконка слева
- Короткий текст (макс 5 слов)
- Hover-эффект, выбор по клику, автопереход через 400мс
После выбора показывай микро-комментарий ("Запомнили", "Отличный выбор",
"Принято") на 300мс — это создаёт ощущение диалога.
## Экран 9 — Сбор контакта (КРИТИЧНЫЙ)
- Заголовок: "Готовим вашу персональную подборку…"
- Лоадер с прогрессом 0-100% на 2.5 секунды (фейковый, для эффекта
обработки)
- Затем форма:
- Поле "Как к вам обращаться" (имя)
- Поле "Телефон" с маской +7 (___) ___-__-__
- Селектор мессенджера: две большие кнопки-карточки — МАКС и Telegram (с
иконками)
- БОЛЬШОЙ блок-плашка над кнопкой (выделить цветом):
"📵 Звонить не будем. Подборку, гайд и сертификат на скидку 20% пришлём в
[выбранный мессенджер] в течение 5 минут"
- Чекбокс согласия на обработку перс. данных по 152-ФЗ (предзаполнен, со
ссылкой на политику)
- Кнопка CTA: "Получить подборку и скидку 20%"
- Под кнопкой мелким: "Не передаём данные третьим лицам"
## Экран 10 — Финальный (Thank you)
- Большая галочка с анимацией
- Заголовок: "Готово! Подборка уже летит в [МАКС/Telegram]"
- Что получит человек (3 строки с галочками):
✅ Персональная подборка под ваш запрос
✅ Гайд "[название гайда под нишу]" в PDF
✅ Сертификат на скидку 20% (действует 72 часа)
- Таймер обратного отсчёта 72:00:00 для сертификата (живой, тикает)
- Большая кнопка "Открыть [МАКС/Telegram]" — ведёт по сохранённой ссылке
- Под кнопкой: "Если сообщение не пришло через 5 минут — напишите нам сами
по кнопке выше"
# ТРЕБОВАНИЯ К КОДУ
1. Один компонент Quiz.tsx — управляется через useState (currentStep, answers,
discount, userData)
2. Данные квиза вынеси в quiz-data.ts как массив объектов с типизацией
3. Все тексты — в одном месте, чтобы легко редактировать
4. Анимации через Framer Motion: AnimatePresence для переходов между
экранами, motion для счётчика
5. Маска телефона — кастомная функция без сторонних либ
6. Валидация: имя ≥ 2 символа, телефон 11 цифр, мессенджер выбран, чекбокс
активен
7. На submit формы — fetch POST на /api/lead с payload: { name, phone,
messenger, answers, discount, utm }
8. Захватывай UTM-метки из URL и пробрасывай в payload
9. Сохраняй прогресс в localStorage, чтобы при перезагрузке восстановить
10. Добавь dataLayer.push для Яндекс.Метрики на ключевых событиях: quiz_start,
question_answered (с номером), lead_form_shown, lead_submitted
# ТОН ТЕКСТОВ
- На "вы", разговорно, без канцелярита
- Никаких "инновационных решений", "команды профессионалов",
"индивидуального подхода"
- Конкретика, цифры, выгода
- Эмодзи только функциональные, не более 1 на экран в основных текстах
# ЧТО ВЫДАТЬ
1. Структуру файлов проекта (дерево)
2. Полный код Quiz.tsx
3. Полный код quiz-data.ts с готовыми вопросами под указанную нишу
4. types.ts
5. Минимальный index.tsx / App.tsx для запуска
6. tailwind.config.js с настроенными CSS-переменными бренда
7. README с командами установки и запуска
8. В конце — отдельным блоком 3 варианта заголовка H1 для A/B-теста
# ВАЖНО
- Если каких-то деталей по нише не хватает (география, конкуренты, специфика
бюджетов) — задай уточняющие вопросы ДО написания кода
- Не используй заглушки типа "// TODO" или "// здесь будет логика" — пиши
рабочий код
- Не выдумывай несуществующие npm-пакеты
- Проверь, что код компилируется в голове перед выдачей