# aesthetic

Скилл для ИИ-агента, который помогает проектировать интерфейсы: разбирает чужие макеты, генерирует варианты дизайна и доводит их до внятного вида.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 714 установок · ★ 2228
- Автор: mrgoonie
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/mrgoonie/claudekit-skills/tree/HEAD/.claude/skills/aesthetic/SKILL.md
- Обновлён: 2026-04-03
- HTML: https://affpapa.org/nevibecode/skills/aesthetic

## Что делает

Скилл задаёт агенту рамку из четырёх этапов. Сначала BEAUTIFUL: разбор чужих работ и вытаскивание принципов — визуальная иерархия, типографика, цвет, воздух. Потом RIGHT: системы компонентов и требования доступности. Дальше SATISFYING — микровзаимодействия с таймингом 150–300 мс и кривыми ease-out на вход, ease-in на выход. Завершает PEAK: параллакс, частицы, сюжет в прокрутке, но с оговоркой про сдержанность.

Внутри два рабочих сценария. Первый — снять скриншот сайта-вдохновителя через скилл `chrome-devtools` и разобрать его скиллом `ai-multimodal`: стиль, сетка, шрифты с попыткой угадать конкретную гарнитуру из Google Fonts, палитра в hex, паттерны компонентов, оценка от 1 до 10. Второй — генерировать картинки дизайна через Gemini API, оценивать их тем же `ai-multimodal` и переделывать промпт, пока оценка не дойдёт до 7 из 10. Правки готовых изображений идут через `media-processing`, вёрстка — через `ui-styling` и `web-frameworks`.

Главное ограничение заложено в самом скилле: у ИИ нет вкуса, поэтому планку задают люди. Без разбора качественных примеров агент выдаст что-то среднее. Для генерации изображений нужен Gemini API, а работа со скриншотами опирается на `chrome-devtools`. Итоги разбора складываются в `./docs/design-guideline.md` и `./docs/design-story.md` — если в проекте уже есть свой гайдлайн, стоит решить, какой из них основной.

## Требования
- Работает с: Chrome

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill aesthetic -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill aesthetic -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill aesthetic -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mrgoonie/claudekit-skills aesthetic
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill aesthetic -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/mrgoonie/claudekit-skills --path .claude/skills/aesthetic
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill aesthetic -a opencode
```

### Claude.ai

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

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

## Когда брать
- разобрать чужой макет и вытащить из него палитру и сетку
- подобрать шрифтовую пару вместо дежурных Inter и Poppins
- добавить микровзаимодействия с внятным таймингом
- проверить макет на доступность до вёрстки
- сгенерировать несколько вариантов дизайна и выбрать лучший

## Примеры запросов агенту
- Разбери скриншот этой страницы и собери гайдлайн: стиль, сетка, шрифты, палитра в hex
- Сгенерируй три варианта лендинга и оцени каждый по десятибалльной шкале
- Опиши микровзаимодействия для карточек: тайминг и кривые анимации

## Похожие
- [empty-state](https://affpapa.org/nevibecode/skills/empty-state.md) — скилл · 552 установки
- [ui-design](https://affpapa.org/nevibecode/skills/frappe-ui-design.md) — скилл · 832 установки
- [avoid-ai-design](https://affpapa.org/nevibecode/skills/avoid-ai-design.md) — скилл · 641 установка
- [bencium-innovative-ux-designer](https://affpapa.org/nevibecode/skills/bencium-innovative-ux-designer.md) — скилл · 7500 установок
- [frontend-design](https://affpapa.org/nevibecode/skills/mager-frontend-design.md) — скилл · 1700 установок
- [aesthetic-usability](https://affpapa.org/nevibecode/skills/aesthetic-usability.md) — скилл · 1900 установок

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

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