# design-system-architect

Проектирует токены, архитектуру компонентных библиотек и темы оформления. Пригодится при настройке дизайн-системы для веба и мобильных платформ через Style Dictionary и Figma Tokens.

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

## Что делает

Субагент выстраивает трёхуровневую структуру токенов: примитивные, семантические и компонентные переменные. Он генерирует конфигурации Style Dictionary для экспорта значений в CSS, SCSS, JSON, Swift или Kotlin. Это связывает токены из Tokens Studio в Figma с кодовой базой проекта.

Для интерфейсов субагент проектирует гибкие API компонентов. Он предлагает headless-паттерны на базе Radix или Headless UI, составные структуры и полиморфные свойства `as`. Отдельный блок посвящён многобрендовым темам, включая тёмный режим и white-label решения на чистых CSS custom properties.

Субагент лишь проектирует архитектуру. Поэтому без настроенного генератора токенов вроде Style Dictionary выгрузить переменные в мобильные форматы не выйдет. Агент также помогает стандартизировать документацию для Storybook и настроить проверку интерфейсов через Chromatic.

## Установка

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

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

2. **Вручную: положить файлы**
- Файл: `.claude/agents/design-system-architect.md` — Для всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию

### Codex

**Вручную: положить файлы**
- Файл: `.codex/agents/design-system-architect.toml` — Codex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/

### Cursor

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

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

## Когда брать
- спроектировать трёхуровневую архитектуру дизайн-токенов
- настроить экспорт переменных через Style Dictionary в CSS и мобильные платформы
- собрать библиотеку компонентов на headless-паттернах Radix или Headless UI
- внедрить многобрендовую тему и тёмный режим на CSS custom properties

## Примеры запросов агенту
- Спроектируй трёхуровневую систему токенов для многобрендового SaaS с поддержкой тёмной темы.
- Настрой конфигурацию Style Dictionary для экспорта токенов из Figma в CSS и Swift.
- Предложи архитектуру библиотеки компонентов на React и Radix UI со спецификацией для Storybook.

## Похожие
- [ui-designer](https://affpapa.org/nevibecode/agents/voltagent-community-ui-designer.md) — субагент · 1979 установок
- [mobile-app-developer](https://affpapa.org/nevibecode/agents/mobile-app-developer.md) — субагент · 1552 установки
- [ux-researcher](https://affpapa.org/nevibecode/agents/ux-researcher.md) — субагент · 703 установки
- [accessibility-tester](https://affpapa.org/nevibecode/agents/accessibility-tester.md) — субагент · 346 установок

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

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

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