Как вайбкод помогает на работе | Часть 1

Первый поинт — это передача в разработку кастомных компонентов.

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

Начали искать решение и пришли к идее сделать кнопку подвижной: пользователь сможет перетащить её в удобное место, после чего она примагнитится к ближайшему краю экрана.

Чтобы проверить механику и убедиться, что кнопка не будет конфликтовать с другими элементами интерфейса, я быстро собрал прототип. А в процессе решил заодно докрутить брендинг: превратил обычную кнопку в маскота и добавил ему анимацию в спокойном состоянии и при наведении.

Раньше для такой задачи пришлось бы отдельно собирать анимацию в Lottie или Rive, а затем объяснять разработчикам, как всё должно работать. В этот раз я отрисовал концепты в Figma, а интерактивную версию собрал уже в Codex.
Вся анимация работает на чистом CSS, без сторонних библиотек.

В итоге получился практически готовый компонент, который можно передавать в разработку без долгих описаний и сложной адаптации. Надеюсь, что так он и выйдет в прод 🤞

💬 Тултип