# ui-design

Плагин добавляет агентов и команды для создания дизайн-систем, вёрстки под iOS, Android или веб и проверки доступности по WCAG 2.2.

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

## Что делает

Плагин содержит специализированных субагентов `ui-designer`, `accessibility-expert` и `design-system-architect`, а также девять скиллов для мобильной и веб-разработки. Он помогает настраивать дизайн-токены через Style Dictionary или Figma Variables, писать интерфейсы на React, Vue, Svelte, SwiftUI или Jetpack Compose и проверять разметку на контрастность и поддержку скринридеров.

Все сгенерированные спецификации, токены и отчёты аудита сохраняются в локальную папку `.ui-design/`. Для генерации дизайн-токенов в системе потребуется установленный Node.js 18+, иначе скрипты сборки не сработают.

## Установка

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

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

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

## Примеры запросов агенту
- /ui-design:create-component Card --platform react
- /ui-design:accessibility-audit --level AA
- /ui-design:design-review --file src/components/Button.tsx

## Похожие
- [example-skills](https://affpapa.org/nevibecode/plugins/example-skills.md) — плагин · ★ 183839
- [impeccable](https://affpapa.org/nevibecode/plugins/impeccable.md) — плагин · ★ 88212
- [hyperframes](https://affpapa.org/nevibecode/plugins/hyperframes.md) — плагин · ★ 72481
- [playground](https://affpapa.org/nevibecode/plugins/playground.md) — плагин · ★ 44635
- [frontend-design](https://affpapa.org/nevibecode/plugins/frontend-design.md) — плагин · ★ 44635
- [visual-explainer](https://affpapa.org/nevibecode/plugins/visual-explainer.md) — плагин · ★ 10630

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

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

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