Fluid Glass UI: как дать AI-агенту воспроизводимый WebGL-интерфейс вместо абстрактного промпта
Основной чат
Чат для вайбкодеров: новости, гайды, поиск исполнителей, маркетплейс и разбор реальных кейсов.
У AI-генерации интерфейсов есть проблема не с идеями, а с повторяемостью
Попросите несколько раз собрать стеклянный дашборд - и получите несколько разных результатов. В одном случае карточки будут слишком прозрачными, в другом исчезнет контраст, в третьем появится тяжёлая анимация, которая перегружает телефон. Для быстрого эксперимента это допустимо. Для продукта или серии экранов - уже нет.
Fluid Glass UI предлагает другой подход: не описывать визуальный стиль заново в каждом промпте, а передать агенту готовое и проверяемое ядро материала. Проект появился на GitHub 2 августа 2026 года и распространяется по Apache-2.0.
Что именно зафиксировано
В репозитории неизменяемой считается не бизнес-логика, а визуальная физика интерфейса: геометрия карточек, порядок стеклянных слоёв, бюджет прозрачности, WebGL-шейдер, реакция на курсор и CSS-fallback. Это важно: агент может менять подписи, значения, цвета, количество карточек и скорость движения, но не «переизобретает» материал при каждой задаче.
Для команды это похоже на дизайн-систему, только на уровне готового визуального эффекта. Вместо фразы «сделай glassmorphism, но не слишком глянцево» появляется конкретный набор активов, API и ограничений.
Не просто демо: есть ограничения для реального интерфейса
Fluid Glass UI рассчитан на современный браузер с WebGL1, но не предполагает, что WebGL есть у всех. Если контекст недоступен, включается CSS-вариант. Проект также ограничивает число одновременных WebGL-контекстов восемью - это защита от проблем в Safari на iOS. В конфигурации можно создать до двенадцати карточек: лишние будут показаны через fallback, а не сломают экран.
У материала есть профили качества auto, high, balanced, eco и fallback, а также пауза вне viewport, ResizeObserver, IntersectionObserver и учёт prefers-reduced-motion. Для дизайнеров это хороший пример того, что эффект нужно проектировать вместе с его деградацией и энергопотреблением, а не добавлять эти детали в самом конце.
Как использовать с AI-агентом
- Скопируйте каталог проекта в папку skills вашего агента или дайте агенту ссылку на репозиторий.
- Попросите собрать конкретный интерфейс: например, финансовый дашборд с четырьмя KPI, а не «красивые стеклянные карточки».
- Передайте реальные данные, палитру бренда и допустимую интенсивность движения через JSON-конфиг.
- Попросите агента не менять canonical assets и выполнить
python tools/package_qa.py. - Проверьте на мобильном устройстве, в режиме reduced motion и при отключённом WebGL.
Главная практическая ценность здесь не в том, что агент умеет писать шейдер. Он получает чёткую границу: какие части визуальной системы можно адаптировать под задачу, а какие нельзя менять без дизайнерского решения.
Где подход подходит, а где нет
Материал хорошо работает для компактных аналитических поверхностей, демонстрационных виджетов, продуктовых KPI и иммерсивных промо-экранов на тёмном фоне. Но это не универсальная замена базовой UI-системе: у проекта фиксирована высота карточки в 144 пикселя, а «стекло» может ухудшить читаемость в сложных рабочих интерфейсах.
Поэтому разумный сценарий - использовать Fluid Glass UI как ограниченный характерный слой продукта, а не растягивать его на весь кабинет. Сначала определить, где эффект помогает считывать приоритеты или передавать характер бренда, затем закрепить допустимые вариации в конфиге.
Что взять в свою практику
Fluid Glass UI интересен не только как визуальный приём. Он показывает зрелый способ работать с агентами: дизайн-код не должен быть бесконечным текстовым описанием. Чем больше в системе проверяемых референсов, ограничений и QA-правил, тем стабильнее результат и тем меньше времени уходит на исправление «почти того же самого» интерфейса.
Исходники, demo и документация доступны в репозитории Fluid Glass UI.
