# bencium-controlled-ux-designer

Помогает обсуждать визуальные решения для веб-интерфейсов до правок кода. Пригодится при создании компонентов, страниц и приложений.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4600 установок · ★ 467
- Автор: bencium
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/bencium/bencium-marketplace/tree/HEAD/bencium-controlled-ux-designer/skills/bencium-controlled-ux-designer/SKILL.md
- Обновлён: 2026-10-04
- HTML: https://affpapa.org/nevibecode/skills/bencium-controlled-ux-designer

## Что делает

Скилл направляет работу над цветами, типографикой, компоновкой и доступностью интерфейса. Перед любым решением по оформлению он должен спросить согласие и показать варианты с их компромиссами. Это значит, что без явного указания он не должен менять цвета, шрифты, размеры или раскладку.

В рекомендациях есть отказ от типовых визуальных шаблонов, работа с нейтральной и акцентной палитрой, контрастом и визуальной иерархией. Для интерактивных элементов предлагаются состояния наведения и фокуса, а не имитация объёма тенями.

Скилл проверяет доступность по WCAG AA, навигацию с клавиатуры и работу на мобильных устройствах, планшетах и десктопах. В описании также есть ориентиры для анимаций, отступов и дизайн-системы.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill bencium-controlled-ux-designer -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill bencium-controlled-ux-designer -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill bencium-controlled-ux-designer -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bencium/bencium-marketplace bencium-controlled-ux-designer
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill bencium-controlled-ux-designer -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/bencium/bencium-marketplace --path bencium-controlled-ux-designer/skills/bencium-controlled-ux-designer
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add bencium/bencium-marketplace --skill bencium-controlled-ux-designer -a opencode
```

### Claude.ai

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

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

## Когда брать
- согласовать цвета и шрифты до правок интерфейса
- предложить варианты компоновки с компромиссами
- проверить контраст и навигацию с клавиатуры
- избежать шаблонной эстетики при создании страницы
- выстроить визуальную иерархию без теней

## Примеры запросов агенту
- Помоги спроектировать страницу профиля, но сначала спроси меня о цветах, шрифтах и компоновке.
- Предложи варианты типографики и палитры для этого веб-компонента, не меняя код без согласия.
- Проверь макет на WCAG AA, контраст и навигацию с клавиатуры.

## Похожие
- [ux-designer](https://affpapa.org/nevibecode/skills/ux-designer.md) — скилл · 1600 установок
- [design-review](https://affpapa.org/nevibecode/skills/plugin87-design-review.md) — скилл · 594 установки
- [ui-ux-polish](https://affpapa.org/nevibecode/skills/ui-ux-polish.md) — скилл · 539 установок
- [ui-design](https://affpapa.org/nevibecode/skills/pymodel-ui-design.md) — скилл · 513 установок
- [ui-ux-designer](https://affpapa.org/nevibecode/skills/ui-ux-designer.md) — скилл · 3100 установок
- [ui-designer](https://affpapa.org/nevibecode/agents/voltagent-community-ui-designer.md) — субагент · 1979 установок

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

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

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