# product-design

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

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

## Что делает

\`product-design` работает на уровне решений, а не вёрстки. Из брифа, макета или готового UI он выбирает взаимодействие и контрол, называет объект, охват и последствие каждого действия, разбирается с обратимостью и перечисляет все достижимые состояния. Сборку и стилизацию он передаёт соседним скиллам, сам их не делает.

Внутри пять режимов: `shape` для проектирования флоу, `spec` для спецификации взаимодействия, `review` для разбора уже принятых решений, `action` для семантики действий и `harden` для устойчивости к ошибкам, отказам в правах и офлайну. В каждом режиме подгружается `references/rules.md`, и каждая находка ссылается на ID правила оттуда. Режимы можно сцеплять: `shape` переходит в `spec`, `review` — в `harden`.

Важная граница: разбор готовой разметки, клавиатуры и производительности — это не сюда, этим занимается `ui-design` в режиме аудита. Здесь спрашивают, верны ли решения за флоу. Если задача про формулировки, финальный текст уходит к `ghostwriter`. Скилл не решает, стоит ли фича инвестиций, — это остаётся открытым продуктовым вопросом.

## Установка

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

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

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mblode/agent-skills --skill product-design -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mblode/agent-skills --skill product-design -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mblode/agent-skills product-design
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add mblode/agent-skills --skill product-design -a opencode
```

### Claude.ai

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

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

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

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

## Похожие
- [plan-design-review](https://affpapa.org/nevibecode/skills/garrytan-plan-design-review.md) — скилл · 476 установок
- [muapi-ui-design](https://affpapa.org/nevibecode/skills/muapi-ui-design.md) — скилл · 2800 установок
- [design-better](https://affpapa.org/nevibecode/skills/design-better.md) — скилл · 1100 установок
- [ui-design](https://affpapa.org/nevibecode/skills/frappe-ui-design.md) — скилл · 832 установки
- [ui-ux-design-pro](https://affpapa.org/nevibecode/skills/ui-ux-design-pro.md) — скилл · 797 установок
- [design-like-im-5](https://affpapa.org/nevibecode/skills/design-like-im-5.md) — скилл · 304 установки

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

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

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