Дизайн/journal
Дизайн-системы для AI-native интерфейсов
Дизайн-системы для AI-native интерфейсов
← ЖурналДизайн6 мин чтения

Дизайн-системы для AI-native интерфейсов

Команда nordiqdev
студия

За год работы с AI-продуктами стало понятно: классических Button, Card, Modal недостаточно. Появились новые типы UI-сущностей, для которых не было готовых компонентов. Расширили нашу дизайн-систему - рассказываем, чем.

Новые компоненты

StreamingText

Текст, который дописывается по мере прихода токенов. С курсором, скроллом-к-концу, поддержкой markdown в стриме. Звучит просто - собрать аккуратно сложно. У нас унифицирован для 4 продуктов.

ToolCallCard

Когда агент вызывает tool - это нужно показать пользователю. Сворачиваемая карточка: имя инструмента, аргументы, результат. Доверие пользователя строится на прозрачности.

ConfidenceIndicator

Маленький бейдж рядом с AI-ответом, показывающий уверенность модели. Не процент - а «уверен / возможно / неуверен» в трёх состояниях. Помогает пользователю калибровать доверие.

PromptComposer

Расширенный input для свободных запросов. С slash-командами, упоминаниями файлов/контактов через @, attach, prompt suggestions. По сути - отдельный mini-product.

Принципы, которые добавили в гайдлайны

  • Любой AI-вывод должен иметь visible source - кнопка «откуда это» с раскрывающимися деталями.
  • Любое деструктивное действие AI требует confirm - даже для «удалить отдельную строку».
  • Состояние «думаю» отображается явно (не просто spinner, а с подписью текущего шага).
  • Тёмные паттерны вроде «AI сам сделал, отменить можно через support» - запрещены.
Теги
#design system#ai#ux#components#figma
Студия nordiqdev

Делаем мобильные приложения, веб-сервисы и AI на заказ

Если задача из текста выглядит знакомой и нужна команда, которая соберёт продукт - расскажите подробнее. Вернёмся в течение 24 часов с разбором.