# design-brief

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

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5300 установок · ★ 592
- Автор: julianoczkowski
- Лицензия: Apache-2.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/julianoczkowski/designer-skills/tree/HEAD/design-brief/SKILL.md
- Обновлён: 2026-07-06
- HTML: https://affpapa.org/nevibecode/skills/design-brief

## Что делает

Скилл ведёт структурированный разговор: сначала спрашивает, что вы хотите построить, для кого и какие есть ограничения. Потом сам проходит по репозиторию и ищет то, на что дизайн должен опереться — CSS-переменные и токены, конфиг Tailwind, темы UI-фреймворков, каталоги компонентов, Storybook, шрифты и уже существующие страницы. Если компоненты уже есть, бриф их расширяет, а не заменяет.

Дальше идёт серия вопросов про пользователя и его задачу, критерии успеха, эмоциональный тон, референсы и анти-референсы, жёсткие ограничения по устройствам и доступности. На каждый вопрос скилл предлагает свой вариант ответа, чтобы не сидеть над пустым полем. Шаги можно пропускать, если они не нужны.

Результат ложится в `.design/<feature-slug>/DESIGN_BRIEF.md` — слаг в нижнем регистре через дефис, например `onboarding-flow`. Разные фичи живут в разных подпапках, поэтому повторный запуск не затирает прошлый бриф. По шаблону внутри: проблема, решение, принципы опыта, эстетическое направление, существующие паттерны, инвентарь компонентов, ключевые взаимодействия, адаптивность, требования доступности и явный out of scope. Последующие скиллы набора читают и пишут в ту же папку, так что структуру лучше не переименовывать.

## Установка

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

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

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-brief -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-brief -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install julianoczkowski/designer-skills design-brief
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add julianoczkowski/designer-skills --skill design-brief -a opencode
```

### Claude.ai

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

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

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

## Примеры запросов агенту
- Напиши бриф для онбординг-флоу
- Мне нужно спланировать страницу настроек до начала разработки
- Помоги определить направление для маркетингового лендинга

## Похожие
- [frontend-design](https://affpapa.org/nevibecode/skills/cline-frontend-design.md) — скилл · 7300 установок
- [ui-design](https://affpapa.org/nevibecode/skills/frappe-ui-design.md) — скилл · 832 установки
- [design-with-taste](https://affpapa.org/nevibecode/skills/design-with-taste.md) — скилл · 758 установок
- [awesome-design-md](https://affpapa.org/nevibecode/skills/awesome-design-md.md) — скилл · 666 установок
- [avoid-ai-design](https://affpapa.org/nevibecode/skills/avoid-ai-design.md) — скилл · 641 установка
- [hallmark](https://affpapa.org/nevibecode/skills/hallmark.md) — скилл · 70800 установок

## Другие версии с тем же именем
- [design-brief · nexu-io](https://affpapa.org/nevibecode/skills/nexu-io-design-brief.md) — 3400 установок
- [design-brief · owl-listener](https://affpapa.org/nevibecode/skills/owl-listener-design-brief.md) — 2100 установок

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

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

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