Auto Layout · Variables · Variants · Components · Design Tokens · Handoff

Дизайн-система для AI агрегатора

Проблема

Созданный дизайн для AI-продукта с 6 крупными разделами и сложным workspace-интерфейсом — без какой-либо дизайн-системы. Цвета и отступы хардкодились вручную, размеры элементов расходились от экрана к экрану, компонентов не существовало вообще. Передавать макеты в разработку в таком состоянии было невозможно.

Созданный дизайн для AI-продукта с 6 крупными разделами и сложным workspace-интерфейсом — без какой-либо дизайн-системы. Цвета и отступы хардкодились вручную, размеры элементов расходились от экрана к экрану, компонентов не существовало вообще. Передавать макеты в разработку в таком состоянии было невозможно.

Задача №1

построить систему с нуля: провести аудит интерфейса, выявить все несистемные значения и дублирующиеся элементы, сформировать дизайн-токены (типографика, цвет, отступы, радиусы),
разработать систему нейминга для токенов и слоёв, спроектировать компонентную библиотеку, внедрить систему в существующие макеты и прописать гайдлайн.

Задача №2

адаптировать интерфейс под все разрешения (desktop, tablet, mobile),
доработать рабочее пространство под реальное использование
разработать страницу нового режима генерации,
создать информирующие pop-up для коммуникации с пользователем

Процесс

Аудит и токены

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

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

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

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

Система нейминга

Разработала единую логику именования для токенов, слоёв и компонентов на основе IBM Carbon. Названия в Figma стали совпадать с переменными в коде.

Разработала единую логику именования для токенов, слоёв и компонентов на основе IBM Carbon. Названия в Figma стали совпадать с переменными в коде.

Библиотека компонентов

Спроектировала полноценную библиотеку (30+ компонентов) по атомарному подходу. Каждый компонент построен с Variants по осям:

состояние (default, hover, focus, disabled, error, loading),

тип (primary, secondary, ghost, destructive),

размер L, M, S, XS, XSS (по необходимости)

иконка — с возможностью быстрой замены через подключённую библиотеку иконок и установки видимости иконки в компоненте.

Спроектировала полноценную библиотеку (30+ компонентов) по атомарному подходу. Каждый компонент построен с Variants по осям:

состояние (default, hover, focus, disabled, error, loading),

тип (primary, secondary, ghost, destructive),

размер L, M, S, XS, XSS (по необходимости)

иконка — с возможностью быстрой замены через подключённую библиотеку иконок и установки видимости иконки в компоненте.

В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.

В результате компоненты собираются как конструктор, поведение каждого состояния описано и предсказуемо. Скорость создания новых блоков кратно выросло за счёт готовых компонентов.

Паттерны снизили когнитивную нагрузку на пользователей

Рабочее пространство

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

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

Для пользователя история генераций убрала страх потерять результат. Ползунок параметров дал пользователю контроль над генерациями без перегрузки интерфейса.

Для пользователя история генераций убрала страх потерять результат. Ползунок параметров дал пользователю контроль над генерациями без перегрузки интерфейса.

Улучшение рабочего пространства повлияло на глубину использования продукта и retention.

Адаптация и коммуникации

Адаптировала экраны под desktop, tablet и mobile

Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации

Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации

Дизайн-система для AI агрегатора

Проблема

Задача №1

Задача №1

разработать систему нейминга для токенов и слоёв, спроектировать компонентную библиотеку, внедрить систему в существующие макеты и прописать гайдлайн.

Задача №2

Задача №2

адаптировать интерфейс под все разрешения (desktop, tablet, mobile),

доработать рабочее пространство под реальное использование

разработать страницу нового режима генерации,

создать информирующие pop-up для коммуникации с пользователем

Процесс

Процесс

Аудит и токены

Система нейминга

Система нейминга

Разработала единую логику именования для токенов, слоёв и компонентов на основе IBM Carbon. Названия в Figma стали совпадать с переменными в коде.

Библиотека компонентов

Библиотека компонентов

Паттерны снизили когнитивную нагрузку на пользователей

Рабочее пространство

Рабочее пространство

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

Для пользователя история генераций убрала страх потерять результат. Ползунок параметров дал пользователю контроль над генерациями без перегрузки интерфейса.

Улучшение рабочего пространства повлияло на глубину использования продукта и retention.

Адаптация и коммуникации

Адаптация и коммуникации

Адаптировала экраны под desktop, tablet и mobile

Разработала pop-up для оферты, рабочей зоны и регистрации — снизила юридические риски и повысила конверсию в начало генерации

Всегда на связи

Буду рада познакомиться и пообщаться!

Почта: kuznezky.design@gmail.com

Телефон: +7 (937) 396 90-36

Резюме на HH.ru · Блог в instagram*