cli-ui-designer — субагент Claude Code: возможности и установка
Проектирует веб-интерфейсы в стилистике терминала командной строки. Пригодится для стилизации дашбордов, панелей управления и сайтов для разработчиков.
npx claude-code-templates@latest --agent development-team/cli-ui-designerЧто делает cli-ui-designer
Субагент превращает веб-страницы в подобие консоли. Он генерирует HTML-разметку и CSS-правила, опираясь на моноширинные шрифты, символы командных строк и палитру тёмных оттенков с яркими акцентами. В макетах используются цветные индикаторы состояния, стилизованные контейнеры и блоки с ASCII-графикой.
В работе задействованы встроенные инструменты чтения и правки файлов: Read, Write, Edit, MultiEdit, Glob и Grep. Архитектура стилей опирается на CSS custom properties. Это упрощает правку тем и адаптацию компонентов под разные экраны.
Субагент создаёт веб-страницы, а не нативные консольные утилиты для терминала. Без поддержки CSS Grid и Flexbox в проекте получить адаптивный консольный вид не выйдет.
Какие задачи решает
- Стилизовать веб-страницу или дашборд под консоль
- Настроить CSS-переменные для терминальной цветовой схемы
- Собрать интерактивное поле ввода с символом командной строки
- Встроить блок ASCII-графики и статус-индикаторы в заголовок
Примеры запросов агенту
- Сверстай карточку логов в стиле терминала с моноширинным шрифтом и зелёным индикатором статуса
- Добавь в проект CSS-переменные для тёмной консольной палитры с оранжевым акцентом
- Оформи поисковую строку как ввод команды в терминале с символом
>
Как установить cli-ui-designer
1Через claude-code-templates
npx claude-code-templates@latest --agent development-team/cli-ui-designer2Вручную: положить файлы
.claude/agents/cli-ui-designer.mdДля всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию
Вручную: положить файлы
.codex/agents/cli-ui-designer.tomlCodex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/
Вручную: положить файлы
.cursor/agents/cli-ui-designer.mdCursor понимает и .claude/agents/
По шагам, с командами для каждой платформы: Субагенты Claude Code: как создать, вызвать и не утопить контекст
Вопросы о cli-ui-designer
Как установить cli-ui-designer в Claude Code?
Запустите команду npx claude-code-templates@latest --agent development-team/cli-ui-designer. Файл конфигурации субагента сохранится по пути .claude/agents/cli-ui-designer.md.
Зачем нужен субагент cli-ui-designer?
Он специализируется на псевдотерминальной эстетике в вебе. Агент подбирает моноширинные шрифты, CSS-переменные, ASCII-заголовки и разметку интерактивных компонентов.
Создаёт ли cli-ui-designer настоящие консольные программы?
Нет, он работает с веб-технологиями. С его помощью создают HTML- и CSS-интерфейсы, которые внешне копируют вид терминала.
