design-lab — скилл для Claude Code: что делает и как установить
Скилл проводит дизайн-интервью, собирает пять разных вариантов интерфейса во временной лаборатории и доводит выбранный до плана внедрения.
npx skills add 0xdesign/design-plugin --skill design-lab -a claude-codeЧто делает 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/ после работы не остаются. Так что понравившийся вариант скопируйте себе до подтверждения, иначе он уйдёт вместе с лабораторией.
Какие задачи решает
- сравнить пять вариантов одного экрана перед выбором
- переделать существующий компонент, не задевая остальное приложение
- превратить интервью в дизайн-бриф вместо догадок
- получить план внедрения после утверждения макета
- подхватить токены и стили уже сложившегося проекта
Примеры запросов агенту
- Переделай карточку товара: проведи интервью и покажи пять вариантов
- Хочу новый экран настроек — начни с дизайн-интервью, потом собери варианты
- Сделай дизайн-лабораторию для страницы профиля и дай мне сравнить
Как установить design-lab
1Через Skills CLI (Vercel)
npx skills add 0xdesign/design-plugin --skill design-lab -a claude-code2Вручную: положить файлы
~/.claude/skills/design-lab/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design-lab/
1Через Skills CLI (Vercel)
npx skills add 0xdesign/design-plugin --skill design-lab -a codex2Вручную: положить файлы
.agents/skills/design-lab/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add 0xdesign/design-plugin --skill design-lab -a cursor2Вручную: положить файлы
.cursor/skills/design-lab/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install 0xdesign/design-plugin design-lab2Вручную: положить файлы
.github/skills/design-lab/SKILL.md1Через Skills CLI (Vercel)
npx skills add 0xdesign/design-plugin --skill design-lab -a gemini-cli2Командой платформы
gemini skills install https://github.com/0xdesign/design-plugin --path design-and-refine/skills/design-labВручную: положить файлы
.devin/skills/design-lab/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add 0xdesign/design-plugin --skill design-lab -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о design-lab
Как установить design-lab в Claude Code?
Выполните npx skills add 0xdesign/design-plugin --skill design-lab -a claude-code. Скилл окажется в ~/.claude/skills/design-lab/SKILL.md.
Что делает design-lab?
Проводит дизайн-интервью, генерирует пять разных вариантов UI во временной лаборатории, собирает отзывы и пишет план реализации. Временные файлы в конце удаляются.
Сработает ли скилл в проекте на Vite с CSS Modules?
Да. Префлайт ищет vite.config.ts и файлы CSS, а визуальные токены берёт из переменных в :root.
