# design-lab

Скилл проводит дизайн-интервью, собирает пять разных вариантов интерфейса во временной лаборатории и доводит выбранный до плана внедрения.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2000 установок · ★ 781
- Автор: 0xdesign
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/0xdesign/design-plugin/tree/HEAD/design-and-refine/skills/design-lab/SKILL.md
- Обновлён: 2026-09-17
- HTML: https://affpapa.org/nevibecode/skills/design-lab

## Что делает

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

Перед вопросами идёт префлайт. По lock-файлу скилл выбирает `pnpm`, `yarn`, `npm` или `bun`, по конфигам отличает Next.js (App Router или Pages Router) от Vite, Remix, Nuxt и Astro, а в зависимостях ищет Tailwind, MUI, Chakra, Ant Design, styled-components, Emotion или CSS Modules. Визуальный язык берётся из вашего же репозитория: токены из `tailwind.config.ts`, CSS-переменные, тема UI-библиотеки, пара существующих кнопок и карточек. Файл `docs/design-memory.md` или `DESIGN_MEMORY.md` снимает часть вопросов.

Важная деталь: уборка. Временные файлы удаляются при любом финале, и когда дизайн утверждён, и когда вы сказали «отмена». Маршруты `__design_lab` и папка `.claude-design/` после работы не остаются. Так что понравившийся вариант скопируйте себе до подтверждения, иначе он уйдёт вместе с лабораторией.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add 0xdesign/design-plugin --skill design-lab -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add 0xdesign/design-plugin --skill design-lab -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add 0xdesign/design-plugin --skill design-lab -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install 0xdesign/design-plugin design-lab
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add 0xdesign/design-plugin --skill design-lab -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/0xdesign/design-plugin --path design-and-refine/skills/design-lab
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add 0xdesign/design-plugin --skill design-lab -a opencode
```

### Claude.ai

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

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

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

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

## Похожие
- [ui-design](https://affpapa.org/nevibecode/skills/mblode-ui-design.md) — скилл · 1400 установок
- [tailwind-design-system](https://affpapa.org/nevibecode/skills/sickn33-tailwind-design-system.md) — скилл · 1600 установок
- [swiss-design](https://affpapa.org/nevibecode/skills/swiss-design.md) — скилл · 951 установка
- [tailwindcss-advanced-design-systems](https://affpapa.org/nevibecode/skills/tailwindcss-advanced-design-systems.md) — скилл · 655 установок
- [design-system-generator](https://affpapa.org/nevibecode/skills/design-system-generator.md) — скилл · 300 установок
- [nextjs-shadcn](https://affpapa.org/nevibecode/skills/nextjs-shadcn.md) — скилл · 835 установок

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