subagent

cli-ui-designer — Claude Code subagent: what it does, how to install

Q: How do I install cli-ui-designer in Claude Code?

Run `npx claude-code-templates@latest --agent development-team/cli-ui-designer`. It places the configuration at `.claude/agents/cli-ui-designer.md`.

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.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --agent development-team/cli-ui-designer

Open on GitHub

What cli-ui-designer 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.

What it helps with

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 for the agent

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

How to install cli-ui-designer

1claude-code-templates

npx claude-code-templates@latest --agent development-team/cli-ui-designer

2Manually: put the files in place

.claude/agents/cli-ui-designer.md

For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

Manually: put the files in place

.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/

Manually: put the files in place

.cursor/agents/cli-ui-designer.md

Cursor also reads .claude/agents/

Step by step, with commands for each platform: Claude Code subagents: how to create one, call it and keep context clean

Questions about cli-ui-designer

How do I install cli-ui-designer in Claude Code?

Run npx claude-code-templates@latest --agent development-team/cli-ui-designer. It places the configuration at .claude/agents/cli-ui-designer.md.

What is cli-ui-designer?

It is a subagent that drafts web interfaces resembling command-line screens. It supplies the necessary HTML, CSS custom properties, and UI patterns for terminal aesthetics.

Does cli-ui-designer build native CLI applications?

No, it works strictly with web technologies. It styles browser pages, cards, and forms to look like terminal sessions.

Similar subagents

All subagents for Frontend and UI →

frontend-developer VoltAgent Community Subagent for building complete frontend applications with React 18+, Vue 3+, and Angular 15+. Handles component architecture, state management, testing, and accessibility. 40,905installs ui-ux-designer Seth Hobson This subagent creates interfaces, wireframes, and design systems. Use it for user flows, accessibility work, and consistent UI patterns. CX Codex 27,069installs fullstack-developer VoltAgent Community This subagent carries a feature across the database, API, and frontend layers. Use it when one change needs a consistent end-to-end implementation. 18,117installs javascript-pro Seth Hobson A subagent for modern JavaScript, async code, and Node.js APIs. Use it to debug event-loop issues, review complex patterns, and plan TypeScript migrations. CX Codex 4,974installs ui-designer VoltAgent Community Designs visual interfaces, builds component libraries, and creates handoff documentation. Ideal when code needs structured UI states and design tokens. 1,979installs ui-designer Seth Hobson Designs interfaces, components, and responsive layouts with implementation in mind. Use it when building screens, forms, tables, or a design system. CX Codex 1,979installs

From the same set205

The whole set →

report-generator Converts collected research notes into an organized Markdown document with numbered citations. It takes over at the final stage once all investigation data is ready. 1,930installs fact-checker A Claude subagent that pulls verifiable claims out of a text and rates how trustworthy the sources behind them are. Handy before you publish a draft or repeat someone's number. 1,919installs performance-profiler A Claude subagent that hunts down performance bottlenecks, memory leaks and load problems. Useful when an app is slow and the cause is not obvious. 1,875installs academic-researcher Searches scholarly literature, checks source quality, and builds research reviews. Use it to compare study methods, trace citations, and identify gaps. 1,855installs feature The command creates a feature/<name> branch from develop and sets up remote tracking. Use it to start a feature with the Git Flow branch structure. 1,820installs finish Automates Git Flow branch completion by validating tests, merging into target branches, and handling release tagging. 1,712installs release Automates Git Flow release branches from develop. It validates semver, bumps package.json, compiles a grouped changelog, and pushes to remote. 1,664installs hotfix Creates a Git Flow hotfix branch from main for urgent production fixes. It checks the branch name, repository state, and whether the issue is critical. 1,611installs