Квиз-сайт с подбором путешествия
Небольшой подборщик формата путешествия, где каждый ответ влияет на итоговую рекомендацию.
Учебный пример, созданный с помощью ИИ. Названия, проекты и цены вымышлены.
Живой пример сайта
Выберите настроение и длительность. Вернитесь назад, измените ответ и сравните результат.
Вопрос 1 из 2
Демо показывает основную механику страницы. Его можно повторить и развить с помощью инструкции ниже; подключения форм, оплаты и публикации здесь нет.
Как это сделать с ИИ
Что подготовить
Нужны вопросы, варианты, правила подбора и тексты результата. В демо нет бронирования, контактов и настоящих туров: итог — учебный формат поездки.
Начните с любого удобного ИИ: ChatGPT, Claude, Gemini или DeepSeek. Работайте в одном диалоге и прикладывайте актуальный код при доработке.
- 01
Опишите дерево решений
Два вопроса: море/горы/город и выходные/неделя. Запишите результат для каждой комбинации. Если ответ ничего не меняет, подумайте, нужен ли вопрос.
Результат: Шесть понятных комбинаций, которые можно проверить.
- 02
Соберите шаги
Первый экран задаёт вопрос и показывает варианты. «Далее» доступно после выбора. «Назад» сохраняет уже введённые ответы.
Результат: Управляемый сценарий с обратным ходом.
- 03
Покажите полезный итог
Покажите ответы и объясните, почему выбран такой формат. Не маскируйте результат формой телефона. Для рабочей версии отдельно согласуйте способ связи.
Результат: Результат можно оценить без передачи контакта.
- 04
Пройдите все маршруты
Проверьте шесть комбинаций, смену ответов, повторный запуск, фокус нового шага и отсутствие ложного сообщения об отправке.
Результат: Полная проверка короткого дерева решений.
Создайте, доработайте, проверьте
Отправляйте промпты по порядку. Первый создаёт основу, второй добавляет нужное поведение, третий помогает найти ошибки. Ответы разных моделей могут отличаться; это учебный сценарий, а не сравнение их качества.
01 · Создать основу
Замените поля в [скобках] на свои данные.
02 · Доработать поведение
Замените поля в [скобках] на свои данные.
03 · Проверить результат
Замените поля в [скобках] на свои данные.
Как открыть полученный сайт
- Попросите полный файл
index.htmlи сохраните его с этим расширением. - Откройте файл в браузере. Для видео положите предоставленные материалы по путям из кода.
- Проверьте действия и мобильный экран. Если ИИ выбрал React или другой стек, используйте инструкцию запуска, которую он приложил.
- Перед публикацией замените учебные материалы своими и подключите необходимые сервисы.
Что проверить вручную
- Без ответа нельзя перейти дальше
- Возврат не стирает выбранный вариант
- Оба ответа влияют на результат
- После перехода виден фокус нового шага
- Сброс начинает подбор заново
- Никакие данные не отправляются
Если что-то пошло не так
Все ответы ведут к одному результату
Опишите таблицу соответствий до генерации интерфейса.
Внезапный переход по клику на ответ
Оставьте явное подтверждение «Далее».
Итог обещает реальное бронирование
Отделите учебный подбор от доступности и покупки тура.
Попробуйте идею сайта в VidLix бесплатно
Перенесите свой бриф в выбранный сценарий конструктора и сравните, как он подходит вашей задаче. Начать можно с примеров на сайте VidLix.
Открыть vidlix.ruДоступ к редактору — по заявке. Условия подключения и публикации смотрите в VidLix; перенос произвольного кода и эффектов нужно уточнять отдельно.
Портфолио с фильтрами проектов
Открыть следующий разбор →