Gravity UI

Gravity UI — открытая дизайн-система и набор библиотек для React-приложений. В UIKit есть базовые компоненты и токены оформления, а AIKit помогает собрать интерфейс чата с ИИ. Gravity UI полезна при разработке личных кабинетов, админок и аналитических интерфейсов, где нужно последовательно оформлять формы, таблицы, статусы и действия. За данные, бизнес-логику и подключение модели отвечает ваше приложение.

Из чего состоит Gravity UI

UIKit даёт элементы интерфейса: кнопки, поля, меню, диалоги и другие компоненты. Библиотека задаёт визуальные состояния, предоставляет механизмы темизации и документирует параметры компонентов. Начните с документации UIKit и примеров. Репозиторий базового пакета опубликован под лицензией MIT. Лицензию дополнительных пакетов и используемых материалов проверяйте отдельно.

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

Дополнительные библиотеки нужны для отдельных сценариев. Для графиков проверьте актуальный пакет Charts, для диалоговых приложений — AIKit. Подключайте пакеты по мере появления требований: небольшой редактор может обойтись UIKit, а аналитический кабинет потребует графики, таблицы и собственную логику фильтрации. Проверяйте совместимость версий и содержимое сборки после подключения каждого пакета.

Практический сценарий: личный кабинет с заявками

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

1. Соберите таблицу. Выберите только нужные колонки: номер, тема, дата и статус. Установите предсказуемый порядок сортировки. При возврате из карточки полезно восстановить страницу списка и фильтры.
2. Настройте статусы. Дайте каждому статусу подпись, например «Ожидает ответа». Цвет ускоряет просмотр, а текст сохраняет смысл в тёмной теме, при слабом контрасте и для пользователя, который не различает некоторые цвета.
3. Соберите форму. Определите обязательные поля и поставьте подсказки рядом с вводом. При отказе сервера сохраните введённый текст и покажите, какое поле или действие нужно проверить.
4. Проверьте диалог подтверждения. Переведите фокус внутрь диалога, проверьте закрытие и возвращение фокуса на кнопку. Для действия, которое меняет состояние заявки, явно назовите результат на кнопке.
5. Пройдите сценарий на телефоне. Уменьшите ширину, проверьте длинный текст, меню и поля. Для таблицы определите, какие данные показываются сразу, а какие доступны при открытии строки.

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

Как связать Figma, токены и код

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

Если в макете использована собственная иллюстрация или набор иконок, проверьте права на соответствующие материалы. Лицензия React-пакета и правила использования графических ресурсов могут отличаться. В проекте полезно хранить список основных пакетов, их версии, ссылки на исходники и источник дизайн-файлов. При обновлении проще понять, какая часть интерфейса зависит от конкретной версии.

Как подключить Gravity UI к существующему проекту

Возьмите тестовую ветку и подключите UIKit по инструкции для своей версии. Проверьте требования к React, способ подключения стилей и использование провайдера темы. Если приложение использует серверный рендеринг, откройте страницу напрямую и проверьте консоль при первой загрузке. Особое внимание уделите меню и всплывающим окнам: они могут добавляться вне основного контейнера страницы и зависеть от темы, границ прокрутки и порядка слоёв.

Начинайте с одного раздела. Сохраняйте текущий способ работы с данными и заменяйте элементы интерфейса небольшими группами. Например, сначала подключите поля и кнопки формы, затем таблицу и модальные окна. Это позволяет понять, какая замена повлияла на валидацию, фокус или формат событий. Перед выпуском сравните размер сборки, время загрузки и привычные сценарии работы.

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

Проверка локализации, доступности и темы

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

AIKit: что он даёт чату с нейросетью

AIKit даёт готовые элементы интерфейса для диалога с моделью. Он помогает представить сообщения, ввод запроса и статусы генерации. Конкретный набор компонентов и свойства зависят от версии пакета. Для каждого элемента проверяйте пример и список параметров в документации. Хранение истории, авторизация, выбор модели, отправка запроса и лимиты API остаются задачами проекта.

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

Для рабочего помощника особенно полезен сценарий прерывания. Пользователь может закрыть страницу, нажать «Остановить» или потерять соединение. Решите, сохраняется ли частичный текст, можно ли продолжить диалог и как отличить повтор от новой попытки. Протестируйте также изменение размеров окна, прокрутку длинного диалога и переход к полю ввода с клавиатуры.

Стоимость и когда выбирать Gravity UI

Основной UIKit можно изучить и использовать как открытый пакет, без регистрации в отдельном сервисе Gravity UI. Бюджет проекта зависит от адаптации темы, разработки нестандартных экранов, проверки доступности и поддержки версий. Подключение сторонней ИИ-модели, хостинг приложения или отдельные инструменты дизайна оплачиваются по правилам соответствующих поставщиков.

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

Если команда уже использует другую дизайн-систему, начните с одного нового раздела и посмотрите, насколько проще его поддерживать. Сравните количество своего кода, гибкость темы и поведение компонентов при нестандартном контенте. Для интеграции чата отдельно сравните готовый UI и выбранный серверный API. Например, клиент на AIKit может отправлять запросы через бэкенд, который работает с OpenRouter или другим шлюзом из рубрики API-шлюзов.

Частые вопросы

Можно ли использовать UIKit в коммерческом React-проекте? Базовый репозиторий указывает лицензию MIT. При распространении соблюдайте её условия и отдельно проверьте лицензии зависимостей, шрифтов, иконок и изображений.

AIKit предоставляет свою модель? AIKit помогает построить интерфейс. Модель, доступ к ней, обработку запросов и хранение диалогов подключает команда проекта.

Обязательно ли внедрять всю дизайн-систему? Начните с нужных компонентов и темы для одного раздела. Проверяйте версии связанных пакетов, если позднее добавите графики или AIKit.

Можно ли адаптировать Gravity UI под фирменный стиль? Можно менять тему и токены. Проверьте, как новая палитра влияет на статусные цвета, контраст текста и видимость фокуса.