Линтер для Tailwind-дизайн-систем, ориентированный на AI-агентов: задавайте допустимые правила стилизации и получайте исправления на основе компонентов и темы проекта.
deeplethe/solid-glass
Дизайн-система для AI-приложений: совместимые с shadcn/ui стили и компоненты с выразительной отделкой под матовое стекло.
- Звёзды
- 2,042
- Форки
- 42
- Открытые issues
- 5
- Последний коммит
- 7 дней назад
Что это?
Solid Glass — дизайн-система для AI-приложений на базе shadcn/ui, Tailwind CSS 4 и React 19. Она поставляется в виде единого stylesheet, который переоформляет существующие компоненты shadcn/ui по их атрибутам data-slot и именам классов, поэтому менять уже используемые в проекте компоненты не нужно.
Визуальный стиль занимает промежуточное положение между плоским дизайном и liquid glass: поверхности получают тонкие блики по краям, узкие границы и мягкие тени, поэтому выглядят как цельный материал, а не прозрачные панели. Цель — создать спокойный интерфейс, в котором текст остаётся читаемым, пока на экране отображаются потоковые ответы, работающие агенты и ожидающие решения.
Помимо базового оформления, проект предлагает собственные компоненты для интерфейсов агентов: индикатор статуса, composer, списки шагов инструментов, diff-представление, карточку вопроса, кольцевой индикатор использования контекста, уведомления о задачах и блок рассуждений. В проект также входят страница Create для настройки переменных темы и набор примеров экранов, которые можно установить через shadcn CLI.
Ключевые возможности
- 01Единый stylesheet переоформляет существующие компоненты shadcn/ui без изменений кода.
- 02Поддерживаются светлая и тёмная темы; основная — тёмная.
- 03На странице Create можно настраивать переменные темы, например толщину, оттенок, радиус и размытие.
- 04Компоненты для интерфейсов агентов: статус хода, шаги инструментов, diff-представление и карточка запроса.
- 05Установка через shadcn CLI из реестра репозитория.
Сценарии использования
- Создание интерфейса чата или агента на базе существующего проекта shadcn/ui.
- Читаемое отображение потокового вывода LLM, вызовов инструментов и ожидающего ввода от пользователя.
- Создание единой визуальной темы для AI-продукта без написания CSS с нуля.
В подборках
Темы
Частые вопросы
- Что такое solid-glass?
- Дизайн-система для AI-приложений: совместимые с shadcn/ui стили и компоненты с выразительной отделкой под матовое стекло. Solid Glass — дизайн-система для AI-приложений на базе shadcn/ui, Tailwind CSS 4 и React 19. Она поставляется в виде единого stylesheet, который переоформляет существующие компоненты shadcn/ui по их атрибутам data-slot и именам классов, поэтому менять уже используемые в проекте компоненты не нужно.
- solid-glass можно использовать бесплатно? Какая у него лицензия?
- solid-glass распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
- solid-glass всё ещё поддерживается?
- Активно поддерживается. Последний коммит в solid-glass — 31 окт. 2026 г..
- Для чего можно использовать solid-glass?
- Создание интерфейса чата или агента на базе существующего проекта shadcn/ui. Читаемое отображение потокового вывода LLM, вызовов инструментов и ожидающего ввода от пользователя. Создание единой визуальной темы для AI-продукта без написания CSS с нуля.
- Где скачать solid-glass?
- Исходный код и инструкции по установке — на GitHub: https://github.com/deeplethe/solid-glass
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
Веб-рабочее пространство на React/TypeScript для Hermes Agent: чат, файлы, терминал, память, навыки и мониторинг агента в одном интерфейсе.
Неофициальный порт shadcn/ui для Svelte: доступные настраиваемые компоненты, исходный код которых можно скопировать в своё приложение.
Демонстрационный проект с открытым исходным кодом на Next.js, воссоздающий Intelligent UI из ChatGPT: ответы модели выводятся потоком в виде интерактивных карт, диаграмм, форм и работающих инструментов на базе OpenUI.
Библиотека анимированных UI-компонентов и эффектов для React и Tailwind CSS, которые можно скопировать в приложения на Next.js или shadcn/ui.
Шаблон интерфейса админ-панели на компонентах Shadcn UI и Vite с поддержкой светлой и тёмной тем, RTL и глобальным поиском.