Разработка кастомных интерактивных квизов часто превращается в рутину с версткой и написанием логики подсчета. Я решил обойти стандартный процесс и протестировать подход Vibe coding, делегировав написание кода ИИ-агентам.
Технический стек и архитектура
Проект реализован без тяжелых фреймворков для максимальной скорости загрузки и простоты деплоя на Vercel.
HTML5 и CSS3 - чистая семантическая верстка. Дизайн использует CSS-переменные для легкой смены тем, glassmorphism для карточек и динамические фоновые блюр-эффекты.
Vanilla JavaScript - вся логика тестирования, переключения экранов и подсчета результатов работает на стороне клиента без задержек.
html2pdf.js - библиотека для мгновенной генерации PDF-отчетов прямо в браузере пользователя, что критически важно для сохранения результатов.
Как ИИ ускорил разработку
Вместо ручного написания сотен строк кода фокус был смещен на архитектуру и грамотный промптинг.
Структурирование данных - исходный текст теста с 12 архетипами и 5 вопросами переведен агентом в удобный структурированный формат внутри скрипта.
Логика подсчета - ИИ спроектировал функцию вычисления результата, которая собирает массив ответов и точно определяет доминирующий архетип по частоте выборов.
Динамический UI - агенты помогли реализовать бесшовное переключение экранов и автоматическую смену фоновых изображений в зависимости от итогового архетипа.
Экспорт в PDF - сложная адаптация стилей под экспорт решена через специальный CSS-класс, который убирает лишние элементы веб-интерфейса и формирует чистый брендированный документ для скачивания.
Итог
Готовое решение Тест Архетипов работает быстро, адаптировано под мобильные устройства и интерактивно проводит пользователя по воронке до получения результата. Это рабочий пример того, как Vibe coding позволяет веб-дизайнеру и специалисту по трафику быстро тестировать гипотезы и запускать полноценные микро-продукты без долгого цикла классической разработки.