Пользователь зашёл в твой продукт и не понимает, где что.
Тебе-то всё очевидно, ведь ты его вайбкодишь уже вечность вторую неделю.
А у пользователя нет двух недель, у него есть минута

✏️ Нужен онбординг.

В нашем случае это короткое видео: оно проводит человека по созданному интерфейсу и показывает, где что лежит и куда нажимать.

Обычно онбординг делают картинками-инструкциями, видео-гайдом или интерактивными подсказками прямо в продукте.
Создание видео-гайда был самым долгим из трёх, а теперь и он вайбкодится. Ролик выше как раз такой, спасибо Опусу 5.5.

Как это устроено: Это видео кодом — ролик пишется как веб-страница, которая умеет нарисовать любой кадр по его времени, агент через браузер снимает кадры по одному как слайдшоу и склеивает их в MP4. Музыкальный клип был собран так же.

Инструкция:

1. Открываешь агента в папке с кодом продукта и даёшь ему скилл HyperFrames от HeyGen:

2. Рассказываешь агенту, какой путь пользователя надо закрыть. Я просил показать студенту путь от входа в платформу до первой сдачи домашки. Мне для уточнения целей и сценария всегда хорошо помогает /grill-me.

3. Агент собирает ролик из твоих компонентов и в твоём дизайне: сам поднимет продукт с демо-данными, снимает нужные экраны, собиерает сцены и рендерит видео.

Бонусом можно добавить озвучку: в ролике выше от ElevenLabs.

Через месяц такой ролик пригодится и тебе самому, когда забудешь, что ты там навайбкодил🫥