Агентская дизайн-система LogicBPM: AI собирает прототипы по Figma один в один
Контекст
LogicBPM — Service Desk со сложными B2B-экранами. Для проверки решений нужны прототипы, которые ведут себя как продукт.
Проблема
AI-ассистенты собирали экраны быстро, но «похоже, а не так»: цвета на глаз, отступы вне сетки, свои кнопки вместо библиотечных. Каждый прототип приходилось вычитывать и чинить вручную — ревью занимало больше времени, чем сборка.
Моя роль
Придумал и собрал систему целиком: правила, паспорта компонентов, скиллы и линтер. Веду библиотеку в Figma.
Ограничения
- Figma — источник истины: код и документация только производные от неё;
- Code Connect платный и недоступен — маппинг Figma → код агент берёт из текста;
- Бэкенда нет: прототип живёт на моках, но должен вести себя как продукт;
- Старые компоненты с нарушениями нельзя переписать разом — нужен контролируемый долг.
Результат
Агент собирает экран из настоящих компонентов дизайн-системы и сам исправляет нарушения до сдачи. Прототип совпадает с макетом по токенам и геометрии, а разработка получает готовую композицию компонентов.
60+
Компонентов в коде
11
Правил автопроверки
×8
Быстрее сборка прототипа
1. Почему AI-прототипы не работали
Значения на глаз
Агент подбирал HEX и отступы по скриншоту. Цвет был «почти тот», а в тёмной теме ломался полностью.
Свои компоненты
Вместо кнопки из библиотеки агент верстал свою. Через три экрана в прототипе жили пять вариантов одной кнопки.
Правила в промпте забываются
Длинные инструкции в чате теряются на середине задачи. Одна и та же ошибка возвращалась через пару итераций.
Ревью дороже сборки
Найти расхождения с макетом вручную дольше, чем собрать экран. Скорость AI съедалась проверкой.
2. Как устроена система
Одна цепочка от Figma до прототипа
Токены и иконки выгружаются из Figma и не правятся руками. Каждый компонент существует трижды и синхронно: в Figma, в коде и в паспорте с секцией «Code», где написано, какой вариант макета каким пропсом становится. Агент получает не скриншот, а словарь соответствий.
Figma — источник истины
Расходятся макет и библиотека — агент снапит к компоненту, а отклонение отмечает флагом для дизайнера. В код «как на экране» ничего не попадает.
Стоп и флаг
Нет нужного токена, компонента или иконки — агент ставит заглушку и сообщает. Придумать значение он не может по правилам.
Definition of Done
Компонент готов, только когда есть файл Figma, паспорт с «Code», стори со всеми состояниями и привязка к токенам.
Правила в репозитории
Короткий CLAUDE.md и документы по областям вместо промпта в чате. Агент читает их в начале каждой задачи.
3. Скиллы: три типовых сценария
figma-to-page
Переносит экран Figma со всеми состояниями в страницу прототипа: пустые, заполненные, модалки, ховеры, тосты. Аннотации дизайнера — требования, а не советы. Готово — значит проверено в браузере на 1440×1024.
page-to-figma
Обратное направление: переносит экран из кода в макеты и раскладывает его по флоу так же, как существующие страницы. Макеты не отстают от прототипа.
describe-component
Описывает новый компонент по шаблону: анатомия, варианты, состояния, токены и маппинг в код. Из такого паспорта агент потом собирает экраны.
Документация
Сайт дизайн-системы собирается из тех же паспортов: команда и агент читают один и тот же источник.
4. Контроль вместо ручного ревью
Ошибка возвращается агенту, а не дизайнеру
После каждой правки агента хук прогоняет ds-lint по изменённому файлу. Голый цвет, число вне шкалы Figma, несуществующий токен или самодельная кнопка — и агент получает сообщение с подсказкой, какой токен подходит по значению. Он чинит нарушение до сдачи задачи.
Долг, который только сокращается
Нарушения, которые были в коде до включения проверки, лежат в baseline. Новые туда добавить нельзя без явного согласия человека, а исправленные вычищаются командой.
5. Что получилось
17 экранов прототипа из одних компонентов
Доски заявок, карточка обращения, справочники, профиль, команды, график работы и автораспределение собраны агентом из компонентов дизайн-системы. Разработка получает не картинку, а готовую композицию с понятными пропсами.
Тёмная тема бесплатно
Раз в коде нет ни одного голого цвета, тёмная тема работает на любом экране сразу — её не нужно отдельно проверять и дорисовывать.
Документация для людей и агента
Описание компонентов, их вариантов и маппинга в код — один сайт для дизайнеров, разработчиков и AI.
Результат
Прототип экрана собирается в 8 раз быстрее, чем раньше: около часа вместо рабочего дня. Правок по расхождению с макетом почти не остаётся. 60+ компонентов, 136 токенов и 11 правил проверки держат систему в синхроне с Figma.
Что вынес
AI ускоряет работу, только когда ему негде ошибиться. Правила в промпте не работают — работают ограничения в среде: производные токены, словарь соответствий и автоматическая проверка после каждого шага.