# glassmorphism

Задаёт агенту правила дизайн-системы в стиле глассморфизма с полупрозрачными слоями, размытием и контрастными токенами. Пригодится при вёрстке карточек bento и UI по WCAG 2.2 AA.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2900 установок · ★ 3349
- Автор: typeui.sh
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/bergside/awesome-design-skills/tree/HEAD/skills/glassmorphism/SKILL.md
- Обновлён: 2026-06-28
- HTML: https://affpapa.org/nevibecode/skills/typeuish-glassmorphism

## Что делает

Скилл настраивает ИИ-агента как автора гайдлайнов для интерфейсов с эффектом матового стекла (liquidglass). Инструкция фиксирует типографику на базе Plus Jakarta Sans и JetBrains Mono, а также конкретные токены палитры: primary `#1856FF`, surface `#FFFFFF` и text `#141414`.

При генерации правил агент формирует структуру из семи обязательных разделов: от базовых токенов и анатомии компонентов до критериев доступности и чеклиста для код-ревью. Спецификация обязывает описывать состояния hover, focus-visible, active и disabled под управление с клавиатуры и сенсорные экраны.

Скилл прямо запрещает жертвовать читаемостью ради визуальных эффектов: при любых конфликтах полупрозрачной эстетики и стандарта WCAG 2.2 AA приоритет всегда отдаётся контрасту текста.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill glassmorphism -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/glassmorphism/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/glassmorphism/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill glassmorphism -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/glassmorphism/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill glassmorphism -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/glassmorphism/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bergside/awesome-design-skills glassmorphism
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/glassmorphism/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill glassmorphism -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/bergside/awesome-design-skills --path skills/glassmorphism
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/glassmorphism/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill glassmorphism -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/bergside/awesome-design-skills/tree/HEAD/skills/glassmorphism/SKILL.md

## Когда брать
- сформулировать правила дизайн-системы в стиле глассморфизма
- составить чеклист проверки доступности интерфейса по WCAG 2.2 AA
- описать состояния интерактивных карточек и компонентов
- закрепить токены цветов и шрифтов для bento-сеток

## Примеры запросов агенту
- Составь спецификацию для bento-карточки в стиле glassmorphism с учётом токенов
- Опиши правила доступности и состояния focus-visible для кнопок интерфейса
- Создай чеклист для код-ревью новых компонентов дизайн-системы

## Похожие
- [generate-ui-from-brand](https://affpapa.org/nevibecode/skills/generate-ui-from-brand.md) — скилл · 870 установок
- [image-to-code](https://affpapa.org/nevibecode/skills/plugin87-image-to-code.md) — скилл · 719 установок
- [design-component](https://affpapa.org/nevibecode/skills/design-component.md) — скилл · 522 установки
- [ui-web](https://affpapa.org/nevibecode/skills/ui-web.md) — скилл · 393 установки
- [glass-dark-ui](https://affpapa.org/nevibecode/skills/glass-dark-ui.md) — скилл · 1500 установок
- [glass-dark-mode-clock](https://affpapa.org/nevibecode/skills/glass-dark-mode-clock.md) — скилл · 1400 установок

## Другие версии с тем же именем
- [glassmorphism · iart-ai](https://affpapa.org/nevibecode/skills/glassmorphism.md) — 2400 установок

Из того же набора: [bergside/awesome-design-skills](https://affpapa.org/nevibecode/by/bergside/awesome-design-skills.md) — 67 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md