# ui-design

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

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1800 установок · ★ 30
- Автор: Starchild-ai-agent
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/Starchild-ai-agent/official-skills/tree/HEAD/ui-design/SKILL.md
- Обновлён: 2026-10-22
- HTML: https://affpapa.org/nevibecode/skills/starchild-ai-agent-ui-design

## Что делает

\`ui-design` служит основной точкой входа для пользовательского HTML/CSS/JS: лендингов, дашбордов, веб-приложений, портфолио и внутренних инструментов. Перед разработкой он предлагает выбрать Track A с vanilla HTML/CSS/JS или Track B с React/Vite/Next и библиотекой компонентов. В процессе учитываются доступность, адаптивность, темы, производительность и способ доставки превью.

Для стилевых решений скилл подключает `taste-skill`: тот задаёт Brief Inference, Design Dials и финальную Anti-slop-проверку. Для визуального проекта его нужно использовать вместе с `project-builder`. Интерактивным страницам обязательны тактильная реакция и обратная связь при смене состояния, иначе интерфейс считается незавершённым. Инженерные правила читаются из файлов `references/` и из репозитория `https://github.com/Leonxlnx/taste-skill`.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Starchild-ai-agent/official-skills ui-design
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/Starchild-ai-agent/official-skills --path ui-design
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add Starchild-ai-agent/official-skills --skill ui-design -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/Starchild-ai-agent/official-skills/tree/HEAD/ui-design/SKILL.md

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

## Примеры запросов агенту
- Используй скилл `ui-design` и выбери трек для лендинга на HTML/CSS/JS.
- Спроектируй интерактивный дашборд: сначала задай план анимаций, затем проверь доступность и адаптивность.
- Собери интерфейс вместе с `project-builder`, подключив `taste-skill` для стилевых решений.

## Похожие
- [tailwind-design-system](https://affpapa.org/nevibecode/skills/tailwind-design-system.md) — скилл · 70180 установок
- [frontend-design-review](https://affpapa.org/nevibecode/skills/frontend-design-review.md) — скилл · 237 установок
- [ui-design-brain](https://affpapa.org/nevibecode/skills/ui-design-brain.md) — скилл · 845 установок
- [responsive-design](https://affpapa.org/nevibecode/skills/responsive-design.md) — скилл · 20956 установок
- [design-taste](https://affpapa.org/nevibecode/skills/design-taste.md) — скилл · 720 установок
- [web-design-reviewer](https://affpapa.org/nevibecode/skills/web-design-reviewer.md) — скилл · 13957 установок

## Другие версии с тем же именем
- [ui-design · mblode](https://affpapa.org/nevibecode/skills/mblode-ui-design.md) — 1400 установок
- [ui-design · frappe](https://affpapa.org/nevibecode/skills/frappe-ui-design.md) — 832 установки
- [ui-design · tencentcloudbase](https://affpapa.org/nevibecode/skills/ui-design.md) — 1800 установок
- [ui-design · pymodel](https://affpapa.org/nevibecode/skills/pymodel-ui-design.md) — 513 установок
- [ui-design · mindrally](https://affpapa.org/nevibecode/skills/mindrally-ui-design.md) — 981 установка

Из того же набора: [starchild-ai-agent/official-skills](https://affpapa.org/nevibecode/by/starchild-ai-agent/official-skills.md) — 34 карточки

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