Ngxba

Claude Code CLI UI — Design skill for Claude Code

Design community

An intuitive interface to create, orchestrate, and monitor Claude-based code agents for automated development workflows.

How to install Claude Code CLI UI

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Ngxba/claude-code-cli-ui and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Code CLI UI does

An intuitive interface to create, orchestrate, and monitor Claude-based code agents for automated development workflows.

Alternatives in Design

  • CloudCLI — 8,400+ Free open-source web/mobile UI for Claude Code, Cursor CLI, and Codex 8.7k ★
  • Interface Design — Design engineering for Claude Code 4.3k ★
  • Design Review Workflow — by Patrick Ellis - A tailored workflow for enabling automated UI/UX design review, including specialized sub a 3.7k ★

README

agents-ui — visualize your Claude Code

Claude Code CLI UI
(aka Claude Code Agents Management Studio)

Quickstart · Contributing · GitHub

MIT License Stars



What is agents-ui?

Open-source visual orchestration for Claude Code

**If Claude Code is the _engine_, agents-ui is the _dashboard_**

agents-ui is a Nuxt 3-based visual dashboard for managing Claude Code agents, commands, skills, workflows, and plugins. It provides a GUI layer on top of the `~/.claude` directory, allowing users to create, edit, and organize their Claude Code configuration without touching markdown files directly.

It looks like a studio — but under the hood it has relationship graphs, real-time metrics, visual workflow builders, and terminal emulation.

**Manage your agents visually, not through scattered markdown.**

Step Example
01 Define the agent Create a "Senior Frontend" agent with specific instructions.
02 Build s