Вход, вопросы, итог
По одному шагу на страницу, крупные варианты, полоса прогресса и кнопка «Дальше». На телефоне всё то же, только большим пальцем.
Категория · квизы и тесты
Тест задаёт вопросы лучше менеджера
Десять сценариев квизов, где человек доходит до персонального ответа и оставляет телефон: подбор ухода, уровень языка, программа тренировок. Каждый собирается в одном HTML-файле, а вопросы и переходы вы описываете обычными словами.
- 10 сценариев
- ветки и баллы
- итог плюс контакт
- проходится с телефона
Установка и 5 000 000 токенов придут от бота. Остальное — по шагам ниже, страница никуда не денется.
Квиз · подбор ухода
макет · демо
Что кожа делает к вечеру?
Дальше →
Результат
Программа для сухой кожи
Что наносить утром и вечером, плюс два ингредиента, которых зимой лучше избегать.
телефон или @ник
Получить подборку
Перед вами CSS-макет, а не снимок готового квиза. У вас будут свои шаги, варианты и финальный текст — их вы формулируете сами.
Что вы получите
Диалог с финалом, а не форма ради галочки
В файле не опрос для отчётности, а маршрут: вход, вопросы, итог и заявка. Человек проходит его сам, без переписки и без звонка.
Переходы вместо одинаковых анкет
Ответ про стянутость уводит к вопросам об увлажнении, ответ про блеск — к очищению. Ветку вы описываете фразой, а не рисуете на холсте.
Рекомендация вместо «спасибо за ответы»
В финале — тип, два-три пункта и предложение оставить контакт. Польза приходит раньше просьбы, поэтому её не хочется пролистывать.
Ответы, воронка и конверсия
Видно, кто дошёл до финала, что отмечал и оставил ли телефон. Тестовые записи лежат внутри, чтобы список не пустовал в первый день.
Пять причин собрать самому
Почему самому спокойнее, чем платить за конструктор
Квиз — это текст плюс несколько правил перехода. Ради этого держать подписку на чужой сервис почти всегда дороже, чем написать вопросы своими руками.
Без сметы и подписки
Вёрстка на фрилансе и ежемесячный тариф конструктора вам не понадобятся. 5 000 000 токенов на старте дают бесплатно, а собранный файл остаётся вашим навсегда.
Меняется одной фразой
Сменились ингредиенты, тарифы или план занятий — вы просто пишете об этом в чат. Экраны, поля и подписи переделываются без программиста и без новой версии сервиса.
Файл ваш, а не сервиса
HTML открывается двойным щелчком, лежит на вашем диске и запускается с любого носителя. Аккаунт и продление подписки для этого не требуются.
Задачу объясняете один раз
Формулировка неточная — переписываете её на месте и сразу видите новый файл. Созвонов с подрядчиком и писем «поправьте, пожалуйста» больше нет.
Нет тарифа на функции
Ветки, баллы, выгрузка в CSV, вторая языковая версия, отдельный экран под соцсети — подключаете по мере надобности. Новое сообщение в чате вместо нового платежа и ожидания чужого обновления.
Как это устроено
Четыре шага до первого файла
Сначала самый короткий путь: бот, браузер, промпт, ответы. Подробная версия из семи шагов ждёт дальше по странице.
Напишите боту «старт»
Откройте в Telegram @get_ai_access_bot и отправьте ему «старт». В ответ придут 5 000 000 токенов и ссылка на установку AI DIY.
Откройте веб-интерфейс
Кнопка «Открыть веб-интерфейс» в приложении открывает ту же мастерскую в браузере — ни скачивать, ни настраивать не понадобится.
Создайте проект и вставьте промпт
Дайте проекту понятное имя вроде «Квиз для салона» и вставьте текст промпта, который найдёте ниже.
Ответьте на вопросы
Бот уточнит тему, развилки и финал — обычно это 8–15 вопросов. На выходе получите готовый HTML-файл квиза.
Дальше те же действия, но подробнее и по кнопкам. Промпт лежит ниже.
Инструкция 7 шагов
От ссылки в боте до готового квиза
Названия кнопок — как в интерфейсе. Порядок одинаков для любого квиза: не перескакивайте через вопросы бота, иначе файл придётся пересобирать.
Проверьте установку
Ссылку присылал бот после слова «старт». Потерялась — напишите ему «старт» ещё раз, старая ссылка не нужна.
Откройте веб-интерфейс
Кликом по Открыть веб-интерфейс в приложении вы попадаете в браузер — дальше работа идёт на обычной странице.
Создайте проект
На экране «Ваши проекты» есть кнопка Создать проект. Пустой проект и есть заготовка под ваш квиз.
Назовите проект
Например, «Анкета для студии»: имя пишется один раз, а поменять его можно в любой момент.
Вставьте промпт
Жмите «Скопировать промпт», кликните в поле ввода и вставьте через Ctrl + V. На технике Apple то же делает Cmd + V.
Отправьте
Кнопка Отправить или Enter — и бот начнёт расспрашивать про тему, развилки и финальный экран.
Заберите файл и откройте его
После 8–15 ответов придёт готовый HTML. Откройте двойным щелчком, пройдите каждую развилку, проверьте на телефоне. Дальше правите словами: «сократи текст результата», «добавь вариант затрудняюсь ответить», «переставь вопросы местами».
Весь промпт — ниже, отдельным файлом его скачивать не надо.
Сценарии категории
Десять сценариев под разные задачи
Готовых квизов тут нет — только направления. Вопросы, развилки и финальный текст в каждом свои, промпт общий.
уход→
Подбор косметики
Шесть вопросов про кожу и вечерний ритуал, в финале — три средства по порядку нанесения и поле для телефона. Хороший первый опыт: тема знакомая, текст пишется за час.
01 · сценарий профориентация→Выбор профессии
Десять вопросов вместо спора с родителями: три направления, на которые стоит посмотреть внимательнее.
02 · сценарий язык→Школа английского
Срез уровня с записью на пробное: преподаватель видит пробелы ещё до первого урока.
03 · сценарий авто→Подбор автомобиля
Бюджет, пробег и стиль езды превращаются в три конкретные модели — выбирать уже проще.
04 · сценарий ЕГЭ→Подготовка к ЕГЭ
Предметный срез и план на оставшиеся недели: где провал и что подтянуть первым.
05 · сценарий свадьба→Стиль свадьбы
Пять вопросов о вкусах — и мудборд в вашей палитре, без бесконечных сохранённых картинок.
06 · сценарий HR→Опрос сотрудников
Внутренняя анкета без сторонних форм и таблиц: сводка появляется сразу после прохождения.
07 · сценарий бриф→Анкета клиента
Бриф до созвона: человек сам описал задачу, а вы пришли с готовыми вопросами.
08 · сценарий спорт→Тренировки по цели
Цель, опыт и свободные дни в пяти вопросах — на выходе программа без тренера рядом.
09 · сценарий кофе→Вкусовой профиль кофе
Кислотность, тело и способ заваривания складываются в зерно под ваш вкус.
10 · сценарий
Что объединяет сценарии
Всё лежит в одном файле
HTML, CSS и JavaScript внутри
Ни сборщиков, ни папки с зависимостями, ни npm. Открывается локально: интернет для работы не обязателен.
Данные остаются у вас
Ответы и телефоны хранятся в localStorage браузера. Их можно выгрузить в CSV или стереть — решаете вы, а не платформа.
Правки — обычные слова
«Сформулируй вопрос короче», «добавь развилку для новичков», «убери лишний абзац в результате» — файл пересобирается, спорить с вами никто не станет.
Демо-данные с кнопкой удаления
Несколько тестовых прохождений, чтобы список не выглядел пустым, и кнопка «Удалить тестовые данные» с подтверждением.
Честно: сложнее всего не вёрстка, а формулировки вопросов и финального текста. Проверьте квиз на человеке, который вашу тему видит впервые, — половина непонятных мест всплывёт сразу.
Промпт
Промпт для квиза: скопируйте целиком
Текст подходит и для подбора ухода, и для теста на уровень языка, и для внутреннего опроса: тему, развилки и финал бот уточнит первыми вопросами.
Ты — ведущий продуктовый дизайнер, UX-архитектор и фронтенд-разработчик. Твоя задача — помочь человеку без опыта собрать работающее приложение с квизами и тестами. Проектированием данных и архитектуры он не занимается: это на тебе.
ШАГ ПЕРВЫЙ — КОРОТКОЕ ИНТЕРВЬЮ
Выясни 8–15 пунктов простым языком и с готовыми вариантами: зачем нужен квиз, сколько в нём шагов, будут ли развилки, что человек видит в финале, собираем ли заявку и куда уходит результат. Вопросы про фреймворки, базу, компоненты, API и архитектуру не задавай. Когда ответы получены — перескажи своими словами, как всё понял, и начинай только после этого.
ПРОЕКТИРУЕШЬ САМ
Объекты: вопрос, вариант ответа, развилка, итог, заявка. У каждого — поля и связи через стабильные идентификаторы. Состояния: вход → шаги → итог → заявка. Экраны: приветствие, шаги, итог, журнал прохождений. Нужны пустые состояния и подтверждение необратимых действий. Связанная запись открывается из текущей и создаётся там же, без ухода в другой раздел.
ЧТО ВХОДИТ В СБОРКУ
Шаги с вариантами, развилки, подсчёт баллов, итог с рекомендацией, поле контакта, сводка прохождений. Бери ровно то, что следует из задачи, — без блоков «на всякий случай».
ВНЕШНИЙ ВИД
Собери цельную систему сам: типографика, иерархия, одинаковые компоненты, состояния наведения и фокуса, адаптив начиная с 360 px. Декоративные цифры и визуальный шум не нужны. Вопрос должен читаться одной рукой на телефоне.
ТЕХНИЧЕСКИЕ РАМКИ
Всё в одном HTML: разметка, стили и чистый JS, хранение — localStorage. Ни бэкенда, ни сборщиков, ни npm, ни обязательного сервера. Внутри файла порядок слоёв: хранение → объекты → действия → компоненты → экраны → навигация. Любое изменение сразу пишется в хранилище, а интерфейс перерисовывается без перезагрузки.
ТЕСТОВЫЕ ЗАПИСИ
Положи несколько правдоподобных прохождений и кнопку «Удалить тестовые данные»: подтверждение, одно срабатывание. Продумай пустые поля, испорченные данные в localStorage, удаление связанных записей, закрытие окон по Escape и по клику мимо окна.
ПРОВЕРЬ ПЕРЕД ВЫДАЧЕЙ
Прогони сценарии сам: вход, все развилки, итог, отправка контакта, перезагрузка, телефон. Найденное почини. Присылай целый HTML-файл, как и все следующие версии. Есть DESIGN.md — держись его.
Моя тема: ___ (одна строка о том, какой квиз мне нужен).Вставьте этот текст в поле сообщения нового проекта. Бот задаёт вопросы — отвечайте как есть, это часть сборки, а не сбой. Аудиторию лучше продумать заранее, иначе получится что-то среднее.
Вопросы
Что спрашивают чаще всего
Нужен ли конструктор квизов по подписке?
Не нужен. Вопросы, развилки и финальный экран живут в одном HTML-файле, а ответы — в localStorage. Аккаунта, тарифа и оплаты за просмотры нет: расходуются только токены на сборку, и 5 000 000 из них дают бесплатно.
Где хранятся ответы и контакты прошедших?
На том устройстве, где открыт файл, — в браузерном хранилище. Ограничение честное: записи с разных телефонов сами не сойдутся в одну базу. Поэтому в задании есть выгрузка в CSV — её открывают таблицей и сводят ответы руками.
Как задать ветвление, если я не программист?
Обычной фразой: «кто выбрал сухую кожу — спрашивай про увлажнение, остальным — про очищение». Логика перестроится, а файл пересоберётся. Проверяйте каждый путь руками: пройдите квиз так, как пойдёт реальный человек.
Что показывает статистика прохождений?
Долю дошедших до финала, самые частые варианты и число оставленных контактов. Сразу видно провальный шаг: если на втором вопросе отваливается половина — он длинный или непонятный.
Сколько времени занимает первый квиз?
Чаще всего один вечер. Время уходит не на экраны, а на вопросы и финальный текст: от них зависит, дойдут до конца или закроют вкладку. Начните с пяти шагов, остальное добавите позже.
Соберите квиз, который спросит за вас
Возьмите один вопрос, на который вам надоело отвечать в переписке. Развилки, итог и журнал прохождений добавятся потом — по одному сообщению за раз.
Забрать установку в ботеУстановка и 5 000 000 токенов придут от бота. Остальное — по шагам с этой страницы.