Gravity UI

Gravity UI — дизайн-система, которую Яндекс много лет развивал для своих облачных сервисов и в 2023 году открыл для всех. На ней построены интерфейсы Yandex Cloud, DataLens, Яндекс Трекера, YDB и десятков других продуктов компании. Всё, что входит в Gravity UI, бесплатно и распространяется с открытым исходным кодом.

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

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

Gravity UI — не одна библиотека, а экосистема из трёх с лишним десятков пакетов для веб-приложений на React. Главные из них закрывают большую часть задач интерфейса.

• UIKit — основа системы, больше 70 компонентов от кнопок и полей ввода до всплывающих окон и списков. Это самый популярный пакет Gravity UI, у него около тысячи звёзд на GitHub.
• Графики и данные — Charts, ChartKit и Yagr для диаграмм, Table для таблиц, DashKit для дашбордов и Graph для больших схем связей.
• Редактор Markdown — редактор текста, который работает и как визуальный, и как режим разметки.
• Страницы и навигация — Page Constructor для промостраниц и лендингов из готовых блоков, конструктор блога и панель навигации.
• Формы и даты — формы, которые строятся по описанию полей, календари и выбор дат.

Для дизайнеров есть макеты Gravity UI в Figma, набор иконок и иллюстраций. Отдельный инструмент Themer позволяет собрать свою тему оформления — цвета, шрифты, скругления — и сразу увидеть, как она выглядит на компонентах.

AIKit для чатов с нейросетями

AIKit — библиотека Gravity UI для интерфейсов ИИ-ассистентов. Команда Yandex Cloud сделала её после того, как несколько сервисов компании, например AI-ассистент в консоли облака и помощник в SourceCraft, независимо собрали свои чаты с нейросетями и те стали вести себя по-разному. AIKit объединяет такие чаты в одном стиле.

В AIKit есть всё для окна чата — поле ввода запроса, лента сообщений, история диалогов, отображение рассуждений модели и вызовов инструментов, индикаторы загрузки. Библиотека не привязана к конкретной нейросети. Подключить к ней можно GigaChat, YandexGPT, модели OpenAI или любую другую — AIKit отвечает только за внешний вид и удобство чата.

Gravity UI для ИИ-агентов

С лета 2026 года Gravity UI официально подготовлена к работе с ИИ-агентами вроде Claude Code , которые сами пишут код. У сайта появился файл llms.txt — каталог всех пакетов в формате, удобном для нейросетей. Кроме того, команда выпустила открытый навык для агентов, который ставится одной командой.

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

Доступ к Gravity UI

Gravity UI устанавливается как обычные пакеты для JavaScript-проектов и работает с React. Документация, примеры и галерея тем открыты на сайте gravity-ui.com, в том числе на русском языке. Компоненты поддерживают тёмную тему, работу с клавиатуры и экранными читалками, интерфейсы на разных языках и письмо справа налево.

Сколько стоит Gravity UI

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

Кто развивает Gravity UI

Gravity UI создала команда Yandex Cloud, сейчас проектом занимается Gravity UI Team внутри Яндекса. Исходный код открыт на GitHub, в разработку могут вносить вклад внешние участники. Новости проекта команда публикует в блоге на сайте и в Telegram-канале.

Задачи, которые решают с Gravity UI

Стартап собирает на Gravity UI личный кабинет и админку и не тратит месяцы на собственную дизайн-систему. Команда аналитики строит внутренний дашборд из готовых графиков и таблиц. Маркетологи делают лендинг в Page Constructor из типовых блоков.

Компания, которая встраивает нейросеть в свой продукт, берёт AIKit и за несколько дней получает аккуратное окно чата с историей и отображением рассуждений модели. Разработчик, который пишет код вместе с ИИ-агентом, подключает навык Gravity UI и получает рабочие экраны с первого раза.

Плюсы и минусы Gravity UI

Сильные стороны Gravity UI:

• полностью бесплатна и открыта по лицензии MIT;
• проверена в больших продуктах Яндекса;
• готовая библиотека AIKit для чатов с нейросетями;
• навык и llms.txt для работы с ИИ-агентами;
• документация и сообщество на русском языке.

Ограничения:

• работает только с React, для других фреймворков компонентов нет;
• рассчитана на разработчиков, без программирования ею не воспользоваться;
• без настройки темы продукт выглядит похоже на сервисы Yandex Cloud.

Как начать работу с Gravity UI

Начинать Gravity UI удобнее с UIKit и готовых шаблонов на сайте — дашборда, лендинга или админки. Тему оформления лучше сразу собрать в Themer, чтобы интерфейс получился в фирменных цветах продукта.

Если код пишет ИИ-агент, стоит сразу подключить навык Gravity UI и прописать в инструкциях проекта, что для интерфейса нужно использовать именно его. Тогда агент реже путает пакеты и не придумывает несуществующие компоненты.

Готовый интерфейс для продукта с ИИ

Gravity UI подойдёт разработчикам и командам, которым нужен аккуратный интерфейс веб-сервиса без собственной дизайн-системы. Особенно она полезна тем, кто встраивает нейросети в продукт и хочет быстро получить удобный чат, а также тем, кто доверяет написание интерфейса ИИ-агентам.