# design-system-setup

Интерактивно создаёт основу дизайн-системы с токенами, шаблонами компонентов и документацией. Пригодится перед системной настройкой интерфейса.

- команда · `type=command` · Claude Code, Codex, Cursor · ★ 41823
- Автор: Seth Hobson
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/wshobson/agents/tree/HEAD/plugins/ui-design/commands/design-system-setup.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/commands/design-system-setup

## Что делает

Команда проверяет каталог `.ui-design/`, ищет существующие токены и настройки в `tailwind.config.js`, CSS, `theme.ts` и пакетах вроде `chakra`, `radix` или `shadcn`. Она также читает `conductor/tech-stack.md`, определяет подход к стилям и наличие TypeScript.

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

Состояние сохраняется в `.ui-design/setup_state.json`, а токены генерируются для цветов, типографики, отступов и других параметров. Если в `.ui-design/` уже есть `design-system.json`, команда сначала предложит обновить конфигурацию или начать заново.

## Установка

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

1. **Через маркетплейс плагинов**
В чате агента (не в терминале):
```text
/plugin marketplace add wshobson/agents
```
В чате агента (не в терминале):
```text
/plugin install ui-design@claude-code-workflows
```

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

### Codex

**Вручную: положить файлы**
- Файл: `~/.codex/prompts/design-system-setup.md` — Вызов — /prompts:design-system-setup. В Codex этот формат помечен устаревшим, замена — скиллы

### GitHub Copilot

**Вручную: положить файлы**
- Файл: `.github/prompts/design-system-setup.prompt.md`

### Gemini CLI

**Вручную: положить файлы**
- Файл: `.gemini/commands/design-system-setup.toml` — Gemini хранит команды в TOML: текст запроса — в поле prompt

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/wshobson/agents/tree/HEAD/plugins/ui-design/commands/design-system-setup.md

## Когда брать
- создать токены для цветов и типографики
- выбрать формат вывода дизайн-токенов
- согласовать новую систему с Tailwind или CSS
- зафиксировать параметры интерактивной настройки
- добавить правила для компонентов интерфейса

## Примеры запросов агенту
- Запусти `/ui-design:design-system-setup` и настрой стандартный пресет.
- Инициализируй дизайн-систему с пресетом `--preset minimal`.
- Проверь существующие токены и предложи, как встроить их в новую систему.

## Похожие
- [design-database-schema](https://affpapa.org/nevibecode/commands/design-database-schema.md) — команда · 1021 установка
- [web-design-reviewer](https://affpapa.org/nevibecode/commands/web-design-reviewer.md) — команда · 605 установок

Из того же набора: [wshobson/agents](https://affpapa.org/nevibecode/by/wshobson/agents.md) — 432 карточки

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

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