Как дизайнеры развивают библиотеку ИИ-компонентов от макета до кода
В больших дизайн-системах между макетом и работающим компонентом нередко возникает разрыв. Предложение может появиться в Figma, пройти обсуждение и остаться в одной из рабочих веток на месяцы. Иногда изменения не доходят до кода и публикации в Storybook почти год.
Пока компонент существует только в макетах, команды уже могут использовать его в новых интерфейсах, но общего реализованного решения у них нет. В результате одни и те же элементы приходится собирать заново, а различия между дизайном и фронтендом постепенно накапливаются.
Почему для ИИ-интерфейсов понадобился отдельный процесс
Когда появились задачи по созданию общих компонентов для ИИ-интерфейсов, команда решила не ждать, пока изменения пройдут стандартный путь внутри основной дизайн-системы. Для таких компонентов организовали собственный процесс и взяли на себя ответственность за результат на всех этапах.
В этот цикл вошли исследование, проектирование, реализация, проверка и исправления. Такой подход позволяет рассматривать компонент не как отдельный макет, а как готовую часть продукта, которая должна одинаково работать в дизайне и коде.
От исследования до реализации
Работа начинается с изучения задачи и определения того, каким должен быть общий элемент для ИИ-интерфейсов. Затем команда формирует решение в макетах и проверяет, насколько оно подходит для дальнейшего использования. Важная цель этого этапа — подготовить не просто визуальный пример, а основу для компонента, который можно развивать и применять в разных сценариях.
После проектирования изменения переводятся в код. При этом дизайнеры участвуют в полном цикле и отвечают не только за внешний вид, но и за проверку результата. Такой формат требует понимать, как решение будет реализовано, какие расхождения могут возникнуть и что нужно исправить до передачи работы на финальное ревью.
Роль агентов и фронтенд-ревью
Рутинные операции команда делегирует агентам. Они помогают подготовить изменения, чтобы фронтендеры получали уже собранный результат, а не задачу, которую предстоит выполнять с нуля. Это не отменяет участия разработчиков: подготовленный код передается им на ревью.
Фронтенд-ревью становится отдельной точкой контроля качества. Разработчики проверяют изменения в коде, а команда при необходимости вносит исправления. В итоге между макетом и публикацией появляется последовательный маршрут, где у каждого этапа есть понятный результат.
Что меняется в работе дизайнеров
Такой процесс расширяет привычную роль дизайнера. Помимо исследования и работы в Figma, приходится разбираться в реализации, участвовать в проверке компонентов и сопровождать их после создания. Одновременно команда получает больше контроля над тем, как решение выглядит в коде и насколько точно оно соответствует замыслу.
Опыт может быть полезен другим дизайнерам и командам, которые хотят участвовать в создании общих компонентов от начала до конца. Однако такой подход предполагает готовность отвечать не только за проектирование, но и за проверку, исправления и дальнейшее развитие библиотеки.
