Скучали по Валере? А он тут. Вместе с кейсом о том, как ИИ помог собрать новый UI-компонент для редизайна сайта в 8 раз быстрее запланированного

Плановые затраты времени: 16 часов
Фактические затраты времени: 2 часа
ИИ-инструменты: Cursor PRO и Figma MCP

Перед Валерой стояла задача разработать базовый компонент модального окна по макету из Figma.

Проект находился в стадии постепенного редизайна, поэтому новый Modal нужно было создавать не по принципам старого интерфейса, а в соответствии со второй версией дизайн-системы. Для этого требовалось изучить существующие компоненты в папке v2, разобраться в подходах к структуре и стилям и учесть особенности внутреннего миксина для размеров и отступов.

На десктопе компонент должен был работать как классическое модальное окно, а на мобильных устройствах – как bottom sheet. При этом панель должна была открываться не только снизу, но и сверху.

Также нужно было реализовать overlay и кнопку закрытия, не привязывать компонент к конкретной бизнес-логике и создать временную тестовую страницу. На ней можно было бы проверить разные состояния и варианты поведения Modal до его интеграции в продуктовые сценарии.

Обычно такая задача оказывается сложнее, чем кажется. Нужно не просто сверстать окно по макету, а создать базовый и переиспользуемый компонент, который станет частью новой дизайн-системы.

Чтобы ускорить работу, Валера использовал Cursor PRO в связке с Figma MCP. Сначала он подготовил подробный промт, в котором указал:

- ссылку на figma
- детали реализации
- путь для нового компонента
- контекст новой дизайн системы второй версии с примерами компонентов и особенностями работы со стилями.

После этого Cursor попросили составить подробный план реализации. Валера проверил его и скорректировал отдельные решения. Изначально мобильную версию планировали реализовать самостоятельно, но после обсуждения решили использовать библиотеку Vaul. Она подходила под требования задачи и поддерживала открытие панели сверху с помощью direction="top".

Далее Валера вместе с Cursor последовательно прошёл по шагам плана. ИИ помог собрать базовый компонент Modal, реализовать desktop- и mobile-логику, настроить overlay и подготовить тестовую страницу с разными вариантами отображения.

После реализации Валера провалидировал сгенерированный код, проверил его соответствие новой дизайн-системе и протестировал работу компонента.

В результате задача, на которую планировали потратить 16 часов, была выполнена за 2 часа.

За это время получилось:

- создать базовый Modal для новой дизайн-системы
- учесть различия между десктопной и мобильной версиями
- реализовать мобильный bottom sheet с открытием сверху и снизу
- настроить overlay и закрытие компонента
- подготовить страницу для тестирования разных состояний
- проверить и провалидировать итоговый код

Cursor не заменил Валеру (Валера незаменим). Он стал техническим напарником, который помог быстрее разобраться с контекстом, снять часть рутины и ускорить реализацию в восемь раз.

Пробуй кодить с ИИшкой. Будь как Валера.