К содержанию

2023 — сейчас · MVS · Дизайн-процесс команды

Дизайн-процесс с ИИ‑агентами: от брифа до прототипа

В MVS ИИ‑процесс опирается на дизайн-систему: агенты собирают экраны из её компонентов и работают по правилам команды.

Роль
Lead продуктового дизайна. Придумал ИИ‑процесс и веду его внедрение
Когда
Дизайн-система — с 2023, агенты — с лета 2026
Масштаб
29 сценариев и 2 агента-помощника. На дизайн-системе 8 продуктов, в ней около 100 компонентов
Итог
Чистое время от требований до передачи в аналитику и разработку сократилось в 2–3 раза, хотя этапов стало больше
Макеты мобильного приложения в Figma по разделам: онбординг и вход, дневники, съёмка

Прототип мобильного приложения: экраны, которые собрал агент по брифу

Задача

12 продуктов на разных платформах, от веб‑кабинетов до устройств в операционной, и 8 новых за год. Нужно было, чтобы продукты развивались в одной логике, а дизайнеры тратили время на продуктовые решения. Документацию, типовые экраны и прототипы для стейкхолдеров можно поручить агентам.

Агенты на каждом этапе

Я собрал набор для ИИ‑агентов: подход, сценарии и правила работы. Сейчас внедряю его в команде.

  • Исследования и продукт. Ресёрч конкурентов, персоны, PRD, карта экранов.
  • Дизайн в Figma. Вайрфреймы и экраны на дизайн-системе по правилам команды, аудит макетов.
  • Прототипы. Кликабельные прототипы на компонентах дизайн-системы для стейкхолдеров и юзер-тестов.
  • Публикация и тесты. Прототип по ссылке, сбор событий юзер-тестов.

Всего 29 сценариев и 2 агента-помощника: для ресёрча и для ревью правок. Набор ставится как плагин, обновление приходит всем сразу.

Схема процесса: бриф, агенты, дизайн-система, прототип

Дизайн-система, понятная агентам

Дизайн-система описана в формате, понятном агентам: компоненты, токены и правила «когда что использовать» устроены так, что агент собирает экран из настоящих компонентов.

  • Архитектура деревом. На верхнем уровне переменные с темами и цветовыми схемами, поэтому тема под продукт или White Label-клиента собирается без правки компонентов.
  • Ветки по платформам. Общее ядро и отдельные библиотеки для веба, собственных устройств и мобильных приложений.
  • Синхронно с кодом. Связка со Storybook: компоненты в Figma и в коде совпадают, часть обновлений автоматизирована.
  • Продукты сразу на системе. Дизайн-система развивалась параллельно с запусками и проверялась на живых задачах.
Компоненты дизайн-системы по алфавиту

Правила работы с агентами

  • Готовые макеты агент только читает и работает в новом релизе. Готовое правит только после явного подтверждения.
  • Общие библиотеки дизайн-системы агент правит только по прямой команде и со снимком для отката.
  • Каждый факт в исследовании помечен источником. Ответы симулированных персон считаются гипотезами.
  • Агенты пишут код только для прототипов и проверки гипотез. Продуктовую сборку делают разработчики.
  • Персональные данные и секреты к агентам не попадают, материалы под NDA не выходят из рабочей среды.

Результат

×2–3

быстрее путь от получения требований до передачи в аналитику и разработку (чистое время)

  • Этапов в процессе при этом стало больше.
  • Считали по трекеру на похожих задачах: предварительные оценки без ИИ и фактическое время с ИИ, с учётом простоев.
  • Дизайнеры тратят время на решения и проверку. Типовые экраны собирают агенты.