# ui-ux-design-principles

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

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 36
- Автор: databricks-solutions
- Лицензия: LicenseRef-Unknown · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/databricks-solutions/consort/tree/HEAD/skills/ui-ux-design-principles/SKILL.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/skills/ui-ux-design-principles

## Что делает

Скилл задаёт общий язык для разговора об интерфейсе: эвристики юзабилити, визуальная иерархия, доступность, обратная связь при действиях, информационная архитектура, дизайн-токены и тестируемость. Внутри только markdown, никаких скриптов — его читают, а не запускают. Каждое правило привязано к способу проверки: E2E-слой и Playwright, сверка с `design-guide.json`, проверки доступности. Правило без теста остаётся советом, правило с проверкой становится частью сборки.

Главная часть — чек-лист перед мержем. Семь свойств: обратная связь на успех и на ошибку, доступность с клавиатуры и для скринридера, визуальная иерархия, переиспользование токенов, архитектура экранов и переходов, стабильные селекторы вроде `data-testid`, состояние загрузки для действий дольше ~200 мс без сдвига вёрстки. Пустая строка допустима, если так оправдан объём работ. Строка, о которой не подумали, — повод вернуться.

Скилл третий в тройке: `software-design-principles` про код, `architectural-design-principles` про систему, этот — про то, как продукт выглядит и как по нему ходят. В `consort` его подключает UX Designer, чтобы написать `design-guide.{md,json}` и `ia.md` и задать контракт соответствия; Driver берёт его при сборке интерфейса. Без `ia.md` и без проверки доступности чек-лист закрыть нечем, поэтому оба артефакта стоит завести до первой вёрстки.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add databricks-solutions/consort --skill ui-ux-design-principles -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add databricks-solutions/consort --skill ui-ux-design-principles -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add databricks-solutions/consort --skill ui-ux-design-principles -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install databricks-solutions/consort ui-ux-design-principles
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add databricks-solutions/consort --skill ui-ux-design-principles -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/databricks-solutions/consort --path skills/ui-ux-design-principles
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add databricks-solutions/consort --skill ui-ux-design-principles -a opencode
```

### Claude.ai

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

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

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

## Примеры запросов агенту
- Пройди по чек-листу ui-ux-design-principles и скажи, какие строки не закрыты
- Составь `ia.md` для нового раздела по этому скиллу
- Проверь экран оплаты на доступность и обратную связь при ошибке

## Похожие
- [frontend-design](https://affpapa.org/nevibecode/skills/frontend-design.md) — скилл · 1025790 установок
- [grill-me](https://affpapa.org/nevibecode/skills/grill-me.md) — скилл · 1424476 установок
- [design-taste-frontend](https://affpapa.org/nevibecode/skills/design-taste-frontend.md) — скилл · 678700 установок
- [prototype](https://affpapa.org/nevibecode/skills/prototype.md) — скилл · 986201 установка
- [grilling](https://affpapa.org/nevibecode/skills/grilling.md) — скилл · 979543 установки
- [codebase-design](https://affpapa.org/nevibecode/skills/codebase-design.md) — скилл · 850344 установки

Из того же набора: [databricks-solutions/consort](https://affpapa.org/nevibecode/by/databricks-solutions/consort.md) — 2 карточки

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