Beautiful UI

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 — если нужен полноценный продуктовый дизайн, там можно забронировать звонок.