Beautiful UI — небольшая библиотека готовых UI-компонентов для интерфейсов, где человек общается с ИИ-агентом: чаты, состояния «думаю», подтверждения действий, статусы задач. Код можно скопировать в проект как есть. Сделана продуктовой студией Turbo, которая занимается дизайном на заказ; компоненты проработаны с вниманием к деталям служебных состояний.
Смысл в том, что интерфейсы для агентов устроены иначе, чем обычные админки и лендинги. Агенту нужно показать, что он читает файлы, спросить разрешение перед отправкой письма, вывести ответ потоком со ссылками на источники, дать понять, насколько он уверен в рекомендации. Всё это приходится собирать вручную каждый раз. Beautiful UI даёт около двадцати таких примитивов в готовом виде.
Что есть в наборе:
- лоадеры — пиксельная сетка с шиммером и счётчиком времени, плюс варианты Drive, Dots, Orbit, Surfer;
- блок Thinking с раскрывающимися трейсами: шаги, рассуждения, поиск, написание кода;
- стриминг текста со ссылками на источники, кнопками действий и подсказками follow-up вопросов;
- Approval Card — карточка, где агент задаёт вопрос человеку перед действием, с шагами вида 1/3, кнопками Skip и Continue;
- Tool Chips — компактные чипы для вызовов инструментов и правок кода;
- Task Rows — живые статусы задач: running, failed, completed, с вложенными подзадачами и процентами;
- чат-панель с табами, ответами-рассуждениями и композером;
- Prompt Bar с @-упоминанием источников, /-командами, выбором модели и диктовкой; есть скругления Rounded и Pill;
- Recommendation Card — предложение агента с индикатором уверенности, альтернативами и кнопкой Accept;
- Context Cards — найденные фрагменты знаний с указанием источника, размера и типа файла (PDF, CSV);
- Diff Table — предлагаемые ИИ правки прямо внутри таблицы;
- Records Table — CRM-подобная сетка с тегами, сортировкой, датой последнего контакта и силой связи;
- Filter Table — чипы статусов, которые на ходу перестраивают данные;
- Sidebar Nav — сворачиваемая навигация по рабочему пространству и чатам;
- Search — командный поиск с живой фильтрацией и пустым состоянием;
- Flowchart — триггеры и условия сценария на точечном полотне;
- Insight Cards — инсайты агента с постраничным листанием и живыми графиками;
- Code Block — листинг с нумерацией строк и режим unified diff;
- Fine-tune Card — инспектор, в котором агент правит свойства дизайна: размеры, радиус, прозрачность;
- Selection Actions — выделить фрагмент текста и передать агенту: объяснить, улучшить, сократить, поправить тон или грамматику.
Демо на сайте построено вокруг одного сквозного примера — сеть поставщиков мороженого и джелато. Видно, как компоненты выглядят на реальных данных: десятки строк в таблице, статусы «very strong» и «no communication», предложения переоформить заказ у конкретного поставщика. Это удобнее сухих плейсхолдеров, потому что сразу понятно, как поведёт себя блок, когда в нём окажется много контента.
Библиотека пригодится тем, кто делает свой агент, ИИ-ассистента или copilot-фичу внутри продукта и не хочет тратить недели на дизайн служебных состояний. Отдельная кнопка на сайте ведёт к студии Turbo — если нужен полноценный продуктовый дизайн, там можно забронировать звонок.
Блог