Обновлено: октябрь 2026
Квиз с логикой ветвления и автоматической передачей лидов в CRM — это именно то, что большинство маркетологов хотят, но боятся реализовать без разработчиков. Через вайбкодинг в Cursor это делается за один вечер: React-компонент с ветвлением, webhook в Битрикс24 или AmoCRM, и лид приходит менеджеру уже с ответами из квиза.
В этой статье — конкретный алгоритм: от структуры промпта до подключения webhook.
В 2026 году квиз с ветвлением вопросов и интеграцией CRM через webhook собирается за 3-5 часов в Cursor без найма разработчика. В статье — готовый промпт для React-квиза, логика ветвления, подключение к Битрикс24/AmoCRM и основные ошибки, которые тормозят проект.
Что такое квиз с ветвлением и зачем это нужно?
Квиз с ветвлением (branching logic) — это когда разные пользователи видят разные вопросы в зависимости от предыдущих ответов. Вместо 20 вопросов для всех — 4-6 вопросов точно под ситуацию каждого.
Стандартный квиз на пять вопросов получает от всех одинаковые ответы — и не работает как квалификатор. Квиз с ветвлением работает иначе. Пользователь выбирает «у меня малый бизнес» — получает один путь. Выбирает «я фрилансер» — другой. При 4 ветках по 3 вопроса вы получаете 12 уникальных сценариев, а пользователь отвечает всего на 4-5 вопросов.
Именно поэтому конверсия таких квизов в заявку в 2-3 раза выше обычных форм: человек чувствует, что его ситуацию поняли, а не просто собрали контакт.
Почему вайбкодинг подходит для создания квиза с ветвлением?
Cursor с хорошим промптом создает рабочий React-квиз с ветвлением за 1-2 итерации. Это быстрее, чем настраивать готовые конструкторы под нестандартную логику.
Готовые конструкторы квизов стоят $20-50 в месяц и дают ограниченный контроль над логикой. Кастомная разработка у фрилансера — от 15 000 руб. и неделя ожидания.
Cursor собирает квиз с любой логикой ветвления за один вечер. Главное — правильно описать бизнес-логику. Именно это и есть суть вайбкодинга: не писать код, а четко формулировать, что должно происходить.
Из реального опыта: при первом промпте типа «создай квиз» AI сгенерирует что-то рабочее, но с базовым UX и без ветвления. На второй итерации, когда точно описываешь логику переходов и желаемые результаты, — получаешь готовый продукт. Разница между «создай квиз» и детальным промптом с бизнес-логикой — принципиальная.
| Способ создания | Время | Стоимость | Гибкость логики |
|---|---|---|---|
| Конструктор (Marquiz, Typeform) | 2-3 часа | $20-50/мес | Ограниченная |
| Фрилансер-разработчик | 5-7 дней | 15 000-40 000 руб. | Высокая |
| Вайбкодинг в Cursor | 3-5 часов | Бесплатно / $20/мес | Полная |
| No-code (Tilda, Readymag) | 4-6 часов | $10-25/мес | Средняя |
Что нужно знать перед стартом?
Чтобы квиз получился с первого раза, нужно описать бизнес-логику до того, как открыть Cursor. AI не знает ваш продукт — он знает только то, что вы ему сказали.
Из транскрипта реального проекта по вайбкодингу: «Для максимальной эффективности нужно четко описывать требования, контролировать результат и проектировать архитектуру. Часто это совсем неочевидно и не так уж просто.»
Перед тем как писать промпт, нужно ответить на несколько вопросов:
Структура квиза. Сколько сегментов аудитории? По каким критериям разделяются пути? Какой результат получает каждый сегмент?
Интеграция CRM. В какую систему идут лиды — Битрикс24 или AmoCRM? Какие поля нужно передавать вместе с контактом?
Технический стек. React-компонент или отдельное приложение? Нужна ли авторизация?
Если пропустить этот этап — получите рабочий квиз, но не под вашу задачу.
Как написать промпт для квиза с ветвлением в Cursor?
Промпт для квиза с ветвлением строится по принципу «бизнес-логика + UX-требования + техническая спецификация». Чем точнее описана логика переходов, тем меньше итераций понадобится.
Вот структура промпта, которая работает:
Создай React-приложение — квиз с ветвлением вопросов.
Стартовый вопрос: [вопрос]
Варианты ответа:
- [Вариант А] → ведет к вопросам из группы A
- [Вариант Б] → ведет к вопросам из группы B
Вопросы группы A:
1. [вопрос] — варианты: [а, б, в]
2. [вопрос] — варианты: [а, б, в]
Вопросы группы B:
1. [вопрос] — варианты: [а, б, в]
2. [вопрос] — варианты: [а, б, в]
Общий финальный вопрос (видят все): [вопрос]
Результаты:
- [Сегмент 1]: заголовок, описание, CTA
- [Сегмент 2]: заголовок, описание, CTA
Перед результатом — форма: имя, телефон, email (обязательные).
После заполнения — отправить данные через POST на webhook [URL].
В теле запроса передать: имя, телефон, email, все ответы с вопросами.
UI: тёмная тема, прогресс-бар, анимация перехода между вопросами,
кнопки — с ховером, мобильная адаптация обязательна.Максим: «Разница между простым промптом и детально описанной бизнес-логикой огромная. Со сложным запросом без деталей AI будет буксовать и делать базовые вещи. Как только начинаешь пошагово описывать — получаешь рабочий результат за одну итерацию.»
Как настроить логику ветвления в коде?
Логика ветвления в React строится через конфигурационный объект с описанием путей. AI генерирует эту структуру сам — вам нужно только описать переходы в промпте.
Cursor обычно генерирует квиз на основе конфигурационного объекта типа:
const quizConfig = {
questions: {
q1: {
text: "Ваш вопрос",
options: [
{ text: "Вариант А", next: "q2a" },
{ text: "Вариант Б", next: "q2b" }
]
},
q2a: { ... },
q2b: { ... },
// общий вопрос для всех
qFinal: { ... }
},
results: {
segment_a: { title: "...", description: "...", cta: "..." },
segment_b: { ... }
}
}Если AI сгенерировал логику без ветвления — просто скопируйте сообщение об ошибке или опишите, что не так, и отправьте обратно. Без лишних комментариев: «Квиз показывает все вопросы подряд, но должен переходить на ветку А после первого варианта ответа». Это чинится за одну итерацию.
Рекомендация из практики: держать файл с логикой квиза до 300-400 строк. Когда файл разрастается, модель начинает терять контекст и путаться в логике переходов.
Как подключить квиз к Битрикс24 через webhook?
Битрикс24 принимает лиды через REST API. Нужен входящий webhook из настроек, PUT-запрос с полями лида. Cursor пишет эту интеграцию по URL за одну итерацию.
Шаг 1. В Битрикс24 зайдите в «Приложения» → «Вебхуки» → «Входящий вебхук». Дайте права на crm.lead.add. Скопируйте URL вида https://ваш-домен.bitrix24.ru/rest/1/ваш-токен/.
Шаг 2. В промпте для Cursor напишите:
После заполнения формы отправить POST на:
https://ваш-домен.bitrix24.ru/rest/1/токен/crm.lead.add
Тело запроса (JSON):
{
"fields": {
"TITLE": "Лид из квиза",
"NAME": "[имя из формы]",
"PHONE": [{ "VALUE": "[телефон]", "VALUE_TYPE": "WORK" }],
"EMAIL": [{ "VALUE": "[email]", "VALUE_TYPE": "WORK" }],
"COMMENTS": "[все ответы квиза в текстовом виде]",
"UF_CRM_[id поля]": "[результат сегментации]"
}
}Шаг 3. Проверьте, что лид появляется в CRM с правильными данными. Обычно с первого раза всё работает, но если нет — скопируйте ответ API и отправьте Cursor с запросом разобраться.
| Поле в запросе | Что передавать |
|---|---|
| TITLE | «Лид из квиза» + дата |
| NAME | Имя из формы |
| PHONE | Телефон |
| COMMENTS | Все вопросы и ответы квиза |
| UF_CRM_* | Сегмент (результат квиза) |
Как подключить квиз к AmoCRM?
AmoCRM использует OAuth 2.0 — чуть сложнее, чем Битрикс24, но Cursor справляется с генерацией кода авторизации по документации.
В AmoCRM для создания лидов нужен access token. Самый простой путь для MVP — использовать интеграцию через API-ключ (доступна в старых аккаунтах) или настроить долгоживущий токен через OAuth.
Промпт для Cursor:
Добавить отправку лида в AmoCRM после заполнения формы.
POST https://домен.amocrm.ru/api/v4/leads
Headers: Authorization: Bearer [access_token]
Тело:
{
"_embedded": {
"leads": [{
"name": "Лид из квиза",
"custom_fields_values": [
{ "field_id": [id], "values": [{ "value": "[сегмент]" }] }
],
"_embedded": {
"contacts": [{ "first_name": "[имя]" }]
}
}]
}
}Если нет опыта с OAuth — начните с Битрикс24. Там входящий webhook настраивается за 2 минуты без авторизации.
Как проверить, что квиз и интеграция работают?
Для проверки webhook используйте webhook.site — бесплатный сервис, который показывает тело входящего запроса. Так вы проверите данные до подключения реальной CRM.
Зайдите на webhook.site, скопируйте уникальный URL и подставьте его в квиз вместо реального адреса CRM. Заполните форму — увидите точное тело запроса в браузере. Если данные приходят правильно — меняйте URL на реальный.
Из практики вайбкодинга: пошаговая реализация снижает количество сложных багов. Сначала квиз без интеграции — убедились, что ветвление работает. Потом добавили форму — проверили. Потом webhook — снова проверили. На каждом этапе понятно, что сломалось, если что-то пошло не так.
Частые ошибки при создании квиза через вайбкодинг
Три типичные ошибки: один большой промпт на всё сразу, логика ветвления описана в голове но не в промпте, и разросшийся файл кода который AI перестает понимать.
Ошибка 1: Один промпт на весь проект. «Создай квиз с ветвлением, CRM и красивым дизайном» — это три разных задачи. AI начнет с чего-то одного и сделает остальное плохо. Разбивайте на шаги: сначала структура и ветвление, потом форма, потом интеграция.
Ошибка 2: Логика ветвления не описана. Если в промпте написано «квиз с ветвлением», но не указаны конкретные пути («ответ А ведет к вопросам X и Y, ответ Б — к Z»), AI придумает что-то своё. Обычно линейный квиз без реального ветвления.
Ошибка 3: Большой файл компонента. Когда весь квиз в одном файле на 1500+ строк, модель начинает путаться и делать странные вещи при правках. Разбивайте: отдельный файл для конфигурации квиза, отдельный для логики переходов, отдельный для UI-компонентов.
Какой стек выбрать для квиза?
Для большинства задач — React + vanilla fetch для webhook. Не нужен Redux, Next.js или сложный backend, если квиз не требует авторизации и хранения данных.
Из транскрипта профессионального вайбкодера про выбор стека: «Для соло проектов подходят NodeJS или Python для бэкенда. SQLite хранит все данные в одном файлике, подходит для локальных проектов.»
Если квиз — просто форма с логикой ветвления и отправкой в CRM — достаточно обычного React без бэкенда. Данные летят напрямую в webhook CRM через fetch на клиенте.
Бэкенд нужен только если: нужно скрыть токен CRM (не светить в браузере), хранить результаты в базе данных, или делать дополнительную обработку перед записью в CRM.
| Сценарий | Стек |
|---|---|
| Квиз → webhook CRM напрямую | React + fetch |
| Квиз → скрытый токен → CRM | React + Node.js backend |
| Квиз + сохранение в базу | React + Node.js + PostgreSQL |
| Квиз внутри существующего сайта | Встраиваемый React-компонент |
FAQ
Сколько времени занимает создание квиза с ветвлением через Cursor?
Если бизнес-логика уже продумана — 3-5 часов на первую рабочую версию с ветвлением и интеграцией CRM. Без предварительной схемы переходов — дольше, потому что больше итераций с правками.
Нужно ли знать React для вайбкодинга квиза?
Понимание базовых концепций помогает: что такое компонент, состояние, пропсы. Но писать код вручную не нужно. Cursor делает это сам. Достаточно понимать, почему квиз — это компонент с состоянием, а не статичная страница.
Можно ли создать квиз через вайбкодинг без React — просто HTML?
Да. Для простого квиза без сложного ветвления — HTML + vanilla JS быстрее и проще. Курсор хорошо генерирует и такой вариант. Минус — сложнее поддерживать при расширении логики.
Как передать в CRM сегмент пользователя (результат квиза), а не только контакт?
Через кастомное поле в CRM (UF_CRM_* в Битрикс24 или custom_fields в AmoCRM). Создайте поле «Сегмент квиза» в настройках CRM, возьмите его ID и передавайте значение в теле webhook-запроса.
Что делать, если квиз генерирует баги при сложной логике ветвления?
Копируйте текст ошибки из консоли браузера и отправляйте в Cursor без лишних комментариев. Добавьте только: «Квиз делает [что именно не так], должен делать [как должно быть]». Обычно это чинится за 1-2 итерации.
Можно ли встроить квиз на Tilda?
Да — через HTML-блок. Собираете квиз в Cursor как отдельное React-приложение, делаете билд, подключаете как кастомный HTML. Или упрощенная версия: квиз на чистом HTML/CSS/JS встраивается в любой блок без сборки.
Как сделать квиз безопасным, чтобы не светить токен CRM в коде?
Нужен простой Node.js или Cloudflare Worker — прокси, который принимает данные от квиза и отправляет в CRM уже с токеном. Cursor пишет такой прокси за одну итерацию.
Посмотрите обзоры инструментов для вайбкодинга в каталоге VibeCoderz — там собраны все актуальные AI IDE с описаниями, ценами и примерами использования. Если хотите разобраться с конкретным проектом — запишитесь на консультацию к Максиму.
Данные по инструментам актуальны на июнь 2026.
