Дизайн-система для работы с ИИ

Для Fit&Lead нужно было делать сайт компании, лендинги для разных аудиторий и новые продукты. Я спроектировал дизайн-систему, которой мог пользоваться человек со своим ИИ: ставить задачу, собирать рабочий интерфейс и опираться на уже принятые дизайнерские решения.

Fit&Lead связывает бренды, блогеров и вебмастеров в сфере спорта и здоровья. У них разные задачи, поэтому страницы и сценарии тоже различаются. При этом каждую новую страницу не хотелось начинать с повторного объяснения всей системы — от оформления до поведения интерфейса.

Сначала я спроектировал дизайн-систему и агентный контур: как ИИ находит нужные правила, применяет их и что делает, когда готового решения нет. Затем на этой основе ИИ реализовал сайты и лендинги сразу в коде. Я отвечал за дизайн-направление и развитие системы; на отдельных участках работали дизайнеры на аутсорсе.

Начинать с задачи человека

Человек приходит с задачей: нужна форма заявки, список с фильтрами или страница нового продукта. Для её постановки ему не нужно разбираться в устройстве компонентов. Поэтому вход в систему я строил вокруг того, что человек хочет сделать: к типовым задачам были подготовлены рецепты сборки, а к компонентам — правила применения.

Для тех, кто развивает саму систему, и тех, кто ею пользуется, нужны разные инструкции. Разработчику компонента важно знать его внутреннее устройство. Агенту, который собирает страницу, — когда этот компонент подходит, какие варианты у него есть и как связать его с остальными. Я разделил эти два уровня, чтобы для каждой новой задачи не приходилось изучать весь проект.

Передать смысл дизайнерского решения

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

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

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

Развивать систему через её применение

В агентный контур я заложил обратную связь от проектов, которые пользуются системой. Агент сохраняет, на какой задаче ему не хватило компонента, правила или пояснения. Эти обращения разбираются при развитии дизайн-системы: что нужно исправить в компоненте, что уточнить в инструкции, а где требуется новое дизайнерское решение.

Изменение вносится в общую систему, проходит проверку в отдельном проекте и входит в обновлённую поставку. Найденное решение становится доступно следующим исполнителям. Так по обратной связи из проектов уточнялись состояния компонентов, пополнялись инструкции и менялся сам способ подключения системы — когда её использование показало, что прежний слишком сложен.

Одна система в разных задачах

На этой основе появились сайт Fit&Lead и страницы для рекламодателей, блогеров и вебмастеров. У страниц разные предложения и содержание; общие компоненты и правила связывают их между собой.

Дальше — отдельные продукты. «Искра» помогает работать с личным брендом: за лендингом следует анкета и результат её прохождения. Здесь система используется уже для последовательности действий человека.

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