Liquid Glass скилл для дизайна в стиле Apple

Liquid glass skill (полное имя навыка — liquid-glass-design) собирает веб-интерфейсы в стиле Apple Liquid Glass: полупрозрачные панели, мягкое размытие фона и глубина через тени. Скилл добавляет Claude Code готовые паттерны backdrop-filter, CSS-масок и WebGL-шейдеров для React, Vue и обычного HTML — премиум-визуал на лендингах и дашбордах без ручной настройки каждого эффекта стекла.

Это разбор из рубрики «Новинки скилов». Соседи по рубрике — web design skill от Vercel и Prisma skill, — а этот про то, как один конкретный визуальный тренд Apple упакован в agent skill.

Часть 1 · Тренд

Что такое Liquid Glass у Apple

Liquid Glass — дизайн-язык, который Apple представила на WWDC 2025. Материал имитирует настоящее стекло: полупрозрачность, преломление света, глубина и реакция на движение, с адаптацией под контент, освещение и взаимодействие. Он заменил плоский стиль, который Apple использовала с iOS 7 до iOS 18, и стал единым языком для iOS 26, iPadOS 26, macOS Tahoe 26, watchOS 26 и tvOS 26.

Это не разовая мода: Apple обязала все приложения полностью поддерживать Liquid Glass к сентябрю 2026, а дизайн уже получил награду Art Directors Club (Gold Cube в категории Interactive/UX/UI). Для тех, кто собирает лендинги, дашборды и прототипы кодом, это значит одно — спрос на этот визуальный стиль в вебе будет только расти весь 2026 год.

Часть 2 · Скилл

Что делает liquid-glass-design

Скилл liquid-glass-design переносит эффект стекла Apple в веб-код. Он добавляет Claude Code готовые паттерны:

• backdrop-filter для размытия фона под панелями и модалками;
• CSS-маски для мягких краёв и переходов прозрачности;
• WebGL-шейдеры для более точного преломления света на стекле;
• верстку под React, Vue и обычный HTML без привязки к фреймворку.

Смежные применения — лендинги, SaaS-дашборды, прототипы для инвесторов и модальные окна, где нужен премиум-визуал без ручной возни с настройкой каждого CSS-эффекта отдельно.

Часть 3 · Уместность

Когда уместен, а когда нет

Эффект стекла хорошо работает на панелях навигации, модальных окнах, hero-блоках лендингов и карточках, которые должны выглядеть премиально поверх фото или градиента. Он плохо работает на текстовых страницах со сплошным контентом (снижает читаемость) и на интерфейсах, где важна максимальная контрастность — например, в дашбордах для операторов, где ошибка в чтении цифры стоит дорого.

Это узкий навык, не замена широким дизайн-скилам. Полный разбор скилов, которые отвечают за стиль и вёрстку интерфейса целиком — в гайде про скилы для дизайна, а дип-дайв по самому востребованному из них — в разборе UI/UX Pro Max.

Часть 4 · Установка

Как поставить

1. возьмите папку скила с файлом SKILL.md — карточка liquid-glass-design на маркетплейсе;
2. положите её в ~/.claude/skills/;
3. перезапустите Claude Code, он подхватит навык;
4. попросите агента собрать конкретный блок в стиле Liquid Glass.

# Кладём папку навыка (внутри — SKILL.md) к себе:
mkdir -p ~/.claude/skills/
# переносим папку liquid-glass-design в ~/.claude/skills/
# и перезапускаем Claude Code

# Дальше — словами:
«Собери hero-блок лендинга в стиле Apple Liquid Glass:
 полупрозрачная панель, размытие фона, мягкая тень»

Скилы-плагины ставятся через /plugin install. Полный пошаговый разбор трёх способов установки — в гайде как установить скилл в Claude Code.

Вопросы

Частые вопросы

Читать дальше

Соседние гайды