Как сделать продуктовый тур в приложении, сделанном в Cursor без программиста
Интерактивная обучалка в приложении, сделанном в Cursor примерно за двадцать минут: ставим одну строку, прокликиваем свой интерфейс в визуальном редакторе и публикуем тур, который стартует там, где он нужен новым пользователям.
- Время
- ● 20 минут
- Цена
- Тариф Free
- Кто делает
- Вы и агент Cursor
Пример: продуктовый тур в приложении, сделанном в Cursor
B2B CRM, которую ведут в Cursor. Менеджеры по продажам на /deals получают тур из пяти шагов: этапы воронки, перетаскивание сделки, поле следующего действия, фильтры и сумма прогноза.
Бесплатно на тарифе Free — без карты и без срока: один сайт и до 3 опубликованных туров или подсказок. Правила аудитории и A/B-тесты — в тарифе Pro.
Как сделать продуктовый тур в приложении, сделанном в Cursor: пошагово
- Шаг 01
Скопируйте код Clew
Зарегистрируйтесь бесплатно или войдите, добавьте сайт и откройте Админка → Обзор. Нажмите на строку в карточке «Виджет пока не подаёт сигналов.» — она скопируется уже с ключом вашего сайта вместо заглушки.
<!-- Clew: замените ВСТАВЬТЕ_КЛЮЧ_САЙТА на ключ сайта из админки > Обзор --> <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script>
Шаг 1 · схема интерфейса - Шаг 02
Откройте репозиторий в Cursor в режиме Agent
Откройте папку проекта в Cursor и чат в режиме Agent, чтобы он сам правил файлы.
Шаг 2 · схема интерфейса - Шаг 03
Отправьте промпт со своим ключом
Замените
ВСТАВЬТЕ_КЛЮЧ_САЙТАна ключ и отправьте. Cursor прочитает репозиторий и выберет нужный корневой файл из списка в промпте.Добавь в это приложение виджет онбординга Clew. Вставь этот тег один раз, чтобы он загружался на каждой странице, в том числе после переходов без перезагрузки: <script src="https://tryclew.ru/widget/ВСТАВЬТЕ_КЛЮЧ_САЙТА.js" async></script> Найди в проекте корневой HTML или корневой layout (index.html для Vite, app/layout.tsx с next/script для Next.js App Router, app.head.script в nuxt.config.ts для Nuxt, src/app.html для SvelteKit) и вставь тег туда. Также добавь стабильные атрибуты data-tour элементам, на которые будет указывать продуктовый тур: главной навигации, основной кнопке создания/добавления, главному фильтру или поиску и заголовку страницы — например data-tour="create-button". Не меняй их стили, тексты и поведение. Правила: - Используй URL скрипта ровно как указано. Не скачивай его, не собирай в бандл и не ставь npm-пакет. - Если в проекте задан Content-Security-Policy, разреши https://tryclew.ru в script-src и connect-src. - Больше ничего не меняй и покажи дифф.
Шаг 3 · схема интерфейса - Шаг 04
Примите дифф, закоммитьте и задеплойте
Проверьте дифф — тег в одном корневом файле и небольшие добавления из промпта, — примите, закоммитьте и запушьте. Хостинг задеплоит как обычно.
Шаг 4 · схема интерфейса - Шаг 05
Соберите тур поверх своей страницы
В Clew откройте Сценарии → + Новый сценарий, оставьте Формат — Тултипы по шагам и нажмите Редактировать на сайте. На своей странице нажмите Выбрать элемент, кликните по элементу для первого шага и напишите заголовок и одно-два предложения. Повторите для 3–5 шагов — предпросмотр обновляется на лету.
Шаг 5 · схема интерфейса - Шаг 06
Укажите, где, когда и кому показывать
В том же редакторе заполните Где показывать (URL страницы), Когда показывать, Таргетинг аудитории и Частота. Настройки примера выше:
Настройка Значение Формат Тултипы по шагам Где показывать (URL страницы) Раздел по префиксу /dealsКогда показывать Сразу при загрузке Таргетинг аудитории Без правил — все, кто открыл страницу Частота Один раз на посетителя 
Шаг 6 · схема интерфейса - Шаг 07
Опубликуйте и проверьте на сайте
Поставьте Статус — Опубликован и сохраните. Откройте страницу в режиме инкогнито: Clew помнит, кто уже видел показ «один раз», поэтому в обычном окне его может не быть. Показы, прохождения и отвалы появятся в статистике тура.
Шаг 7 · схема интерфейса
Подводные камни: продуктовый тур в приложении, сделанном в Cursor
Проверяйте перед тем, как принять
Агенты иногда «улучшают» соседний код. Отклоняйте изменения вне файлов из промпта: для формата «продуктовый тур» больше ничего не нужно.
Локальная разработка — не прод
Виджет работает и на localhost, это удобно для проверки, но статистика посетителей и статус «Виджет активен» приходят из задеплоенного приложения.
Сгенерированные классы меняются при каждой пересборке
В приложениях, собранных ИИ, часто утилитарные классы или хешированные CSS-модули. Селектор вида .bg-blue-600.px-4 сломается после следующего промпта. Поэтому промпт выше просит атрибуты data-tour: выбирайте эти элементы, и тур переживёт перегенерацию.
Вопросы и ответы
Можно хранить тур в репозитории?
Содержимое тура живёт в Clew, чтобы его правили не только разработчики. В репозитории — только строка и атрибуты data-tour.
Какую модель выбрать в Cursor?
Любая модель в режиме Agent справится: задача маленькая, файлы названы в промпте.
Продуктовый тур бесплатный?
Да, туры есть на тарифе Free — до 3 опубликованных. Тариф Pro нужен только для правил аудитории, A/B-тестов и большего числа туров.
Почему не попросить ИИ сразу сделать тур?
Можно, но тогда каждая правка текста — это новый промпт, новый дифф и новый деплой, и никакой статистики. С Clew ИИ один раз добавляет строку и пару атрибутов, а сам тур за минуты правит любой человек в команде.