# cli-ui-designer

Designs terminal-styled web interfaces with modern web standards. Helpful when you want a dashboard, developer tool, or landing page that looks like a command line.

- subagent · `type=agent` · Claude Code · 1849 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/development-team/cli-ui-designer.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/agents/cli-ui-designer

## What it does

This subagent builds web layouts inspired by terminal environments. It generates semantic HTML and CSS driven by monospace font stacks, command prompts, status dots, and ASCII headers. The design language relies on custom properties for dark themes with distinct accent shades.

For modifying files, it has access to `Read`, `Write`, `Edit`, `MultiEdit`, `Glob`, and `Grep`. The styling workflow uses CSS variables, responsive grids, and clean component patterns for inputs and cards.

Keep in mind that it designs web interfaces rather than actual command-line binary apps. If your frontend lacks support for modern CSS Flexbox or Grid layouts, the generated components will need manual adjustments.

## Install

### Claude Code (native platform)

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

2. **Manually: put the files in place**
- File: `.claude/agents/cli-ui-designer.md` — For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

### Codex

**Manually: put the files in place**
- File: `.codex/agents/cli-ui-designer.toml` — Codex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/

### Cursor

**Manually: put the files in place**
- File: `.cursor/agents/cli-ui-designer.md` — Cursor also reads .claude/agents/

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/development-team/cli-ui-designer.md

## When to use it
- Build developer-focused web interfaces with a terminal look
- Set up dark CSS theme variables with terminal accent colors
- Create interactive command input fields with prompt symbols
- Integrate ASCII art headers with status indicators

## Example prompts
- Design a log viewer card using terminal styling and monospace typography
- Set up a CSS color palette for a dark command-line theme with orange accents
- Create an input bar styled like a shell prompt using the `>` symbol

## Similar
- [frontend-developer](https://affpapa.org/en/nevibecode/agents/voltagent-community-frontend-developer.md) — subagent · 40905 installs
- [ui-ux-designer](https://affpapa.org/en/nevibecode/agents/ui-ux-designer.md) — subagent · 27069 installs
- [fullstack-developer](https://affpapa.org/en/nevibecode/agents/fullstack-developer.md) — subagent · 18117 installs
- [javascript-pro](https://affpapa.org/en/nevibecode/agents/javascript-pro.md) — subagent · 4974 installs
- [ui-designer](https://affpapa.org/en/nevibecode/agents/voltagent-community-ui-designer.md) — subagent · 1979 installs
- [ui-designer](https://affpapa.org/en/nevibecode/agents/ui-designer.md) — subagent · 1979 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 224 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md