# cli-ui-designer

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

- субагент · `type=agent` · Claude Code · 1849 установок
- Автор: davila7
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/development-team/cli-ui-designer.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/agents/cli-ui-designer

## Что делает

Субагент превращает веб-страницы в подобие консоли. Он генерирует HTML-разметку и CSS-правила, опираясь на моноширинные шрифты, символы командных строк и палитру тёмных оттенков с яркими акцентами. В макетах используются цветные индикаторы состояния, стилизованные контейнеры и блоки с ASCII-графикой.

В работе задействованы встроенные инструменты чтения и правки файлов: `Read`, `Write`, `Edit`, `MultiEdit`, `Glob` и `Grep`. Архитектура стилей опирается на CSS custom properties. Это упрощает правку тем и адаптацию компонентов под разные экраны.

Субагент создаёт веб-страницы, а не нативные консольные утилиты для терминала. Без поддержки CSS Grid и Flexbox в проекте получить адаптивный консольный вид не выйдет.

## Установка

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

1. **Через claude-code-templates**
```bash
npx claude-code-templates@latest --agent development-team/cli-ui-designer
```

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

### Codex

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

### Cursor

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/development-team/cli-ui-designer.md

## Когда брать
- Стилизовать веб-страницу или дашборд под консоль
- Настроить CSS-переменные для терминальной цветовой схемы
- Собрать интерактивное поле ввода с символом командной строки
- Встроить блок ASCII-графики и статус-индикаторы в заголовок

## Примеры запросов агенту
- Сверстай карточку логов в стиле терминала с моноширинным шрифтом и зелёным индикатором статуса
- Добавь в проект CSS-переменные для тёмной консольной палитры с оранжевым акцентом
- Оформи поисковую строку как ввод команды в терминале с символом `>`

## Похожие
- [frontend-developer](https://affpapa.org/nevibecode/agents/voltagent-community-frontend-developer.md) — субагент · 40905 установок
- [ui-ux-designer](https://affpapa.org/nevibecode/agents/ui-ux-designer.md) — субагент · 27069 установок
- [fullstack-developer](https://affpapa.org/nevibecode/agents/fullstack-developer.md) — субагент · 18117 установок
- [javascript-pro](https://affpapa.org/nevibecode/agents/javascript-pro.md) — субагент · 4974 установки
- [ui-designer](https://affpapa.org/nevibecode/agents/voltagent-community-ui-designer.md) — субагент · 1979 установок
- [ui-designer](https://affpapa.org/nevibecode/agents/ui-designer.md) — субагент · 1979 установок

Из того же набора: [davila7/claude-code-templates](https://affpapa.org/nevibecode/by/davila7/claude-code-templates.md) — 205 карточек

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