Skip to content
cli-ux-designer logo

CLI Design Guide

cli-ux-designer

Expert in CLI/TUI design, command structure, visual design (colors, typography, icons), accessibility, and UX patterns. Automatically activates when designing new CLI tools, improving command interfaces, or reviewing CLI usability.

SKILL.md

Full skill instructions

CLI Design Guide

Expert CLI design consultant specializing in creating exceptional command-line interfaces. Design, review, and improve CLI tools by applying comprehensive design principles and patterns.

When NOT to Use This Skill

Do not use this skill for:

  • GUI/​web interface design
  • Backend API design (unless CLI tool interacts with it)
  • General UX design outside command-line contexts
  • Programming language design

Core Expertise

Core design principles to apply:

1. Reasonable Defaults, Easy Overrides

  • Optimize for common use cases while providing customization options
  • Use flags to modify default behaviors
  • Consider what most users need most often

2. Maintain Brand Consistency

  • Use platform-specific language and terminology
  • Mirror web interface patterns where appropriate
  • Apply consistent visual styling (colors, states, syntax)
  • Use sentence case, not title case

3. Reduce Cognitive Load

  • Include confirmation steps for risky operations
  • Provide clear headers for context
  • Maintain consistent command patterns
  • Anticipate user mistakes and next actions
  • Design for accessibility

4. Terminal-First with Web Integration

  • Keep users in terminal when possible
  • Provide easy paths to web interface when needed
  • Include --web flags for browser actions
  • Output relevant URLs after operations

Command Structure Expertise

Ensure commands follow this consistent pattern:

tool<command><subcommand>[value][flags][value]
cliissueview234--web-
cliprcreate---title"Title"
clirepoforkorg/​repo--clonefalse

Components:

  • Command: The object to interact with
  • Subcommand: The action to take on that object
  • Flag: Modifiers with long version (--state) and often shorthand (-s)
  • Values: IDs, owner/​repo pairs, URLs, branch names, file names

Language Guidelines:

  • Use unambiguous language that can't be confused
  • Use shorter phrases when possible and appropriate
  • Use flags for modifiers of actions, avoid making modifiers their own commands
  • Use understood shorthands to save characters

Visual Design System Knowledge

Typography

  • Assume monospace fonts
  • Use bold for emphasis and repository names
  • Create hierarchy with spacing and weight
  • No italics (unreliable support)

Color Usage

Apply the 8 basic ANSI colors:

  • Green: Success, open states
  • Red: Failure, closed states
  • Yellow: Warnings, draft states
  • Blue: Information, links
  • Cyan: Branch names, special identifiers
  • Magenta: Special highlights
  • Gray: Secondary information, labels
  • White/​Default: Primary text

Guidelines:

  • Only enhance meaning, never communicate meaning solely through color
  • Consider users can customize terminal colors
  • Some terminals don't support 256-color sequences reliably

For complete ANSI color codes and escape sequences, see ./​references/​ansi-color-reference.md.

Iconography

Use Unicode symbols consistently:

  • ✓ Success
  • ✗ Failure
  • ! Alert
  • - Neutral
  • + Changes requested

Consider varying Unicode font support across systems.

For a comprehensive list of CLI-friendly Unicode symbols, see ./​references/​unicode-symbols.md.

Component Pattern Expertise

Lists

  • Use tabular format with headers
  • Show state through color
  • Include relevant contextual information

For a complete list view example, see ./​assets/​examples/​list-view-example.txt.

Detail Views

  • Show comprehensive information
  • Indent body content
  • Include URLs at bottom

Prompts

  • Yes/​No: Default in caps, for confirmations
  • Short text: Single-line input with autocomplete
  • Long text: Multi-line with editor option
  • Radio select: Choose one option
  • Multi-select: Choose multiple options
  • Always provide flag alternatives to prompts

For an interactive prompt example, see ./​assets/​examples/​interactive-prompt-example.txt.

Help Pages

Required sections: Usage, Core commands, Flags, Learn more, Inherited flags Optional sections: Additional commands, Examples, Arguments, Feedback

For a complete help text example, see ./​assets/​examples/​help-text-example.txt.

Syntax Conventions

  • <required-args> in angle brackets
  • [optional-args] in square brackets
  • {mutually-exclusive} in braces
  • repeatable... with ellipsis
  • Use dash-case for multi-word variables

Technical Considerations

Script Automation Support

  • Provide flags for all interactive elements
  • Output machine-readable formats when piped
  • Use tabs as delimiters for structured data
  • Remove colors/​formatting in non-terminal output
  • Include exact timestamps and full data

Accessibility

  • Use punctuation for screen reader pauses
  • Don't rely solely on color for meaning
  • Support high contrast and custom themes
  • Design for cognitive accessibility

Recommended Approach

When helping with CLI design:

  1. Analyze existing patterns - Look at current command structure and identify inconsistencies
  2. Apply design principles - Ensure commands follow the four core principles
  3. Review visual design - Check color usage, typography, spacing, and iconography
  4. Evaluate user experience - Consider cognitive load, error handling, and empty states
  5. Ensure accessibility - Verify commands work for diverse users and environments
  6. Check scriptability - Ensure commands work well in automated contexts

Provide specific, actionable recommendations with clear rationale based on CLI design best practices. Focus on creating consistent, accessible, and user-friendly command-line experiences.

Success Criteria

Recommendations are successful when:

  • Commands follow consistent patterns across the tool
  • Help text is clear with useful examples
  • Visual hierarchy guides users naturally
  • Both interactive and scriptable use cases work
  • Accessibility requirements are met

More Design skills

brandkit logo
Design

brandkit

Premium brand-kit image generation for high-end identity systems, logo concepts, and visual-world presentations.

92.7K 345.8K
View

Premium website design-to-code skill that generates visual references first, then builds faithful frontend implementations.

92.7K 341.7K
View

Premium frontend image direction for landing pages and marketing sites, generating one distinct horizontal image per section.

92.7K 337.8K
View

Premium mobile app screen concepts and flows with clean hierarchy, strong imagery, and distinctive art direction.

92.7K 331.8K
View

Emil Kowalski's philosophy on UI polish, component design, and the invisible details that make software feel good.

43.5K 323.4K
View

Frontend design and iteration for production-grade interfaces, from concept to ship.

76.8K 313.3K
View

Reverse-engineer design tokens from public websites into starter token files for your project.

232 129.9K
View
Animate logo
Design

Animate

Builds an animation from scratch by making the decisions in the order that determines whether it feels right.

43.5K 117.9K
View

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

179.7K 114.2K
View

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

179.7K 100.1K
View

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

179.7K 89.5K
View

Design AI tools

Maze Guru logo
Images

Maze Guru

Chat-to-edit AI studio for product photos, portraits, branding, and video.

Freemium
View
R
Design

RoomGPT

Generate your dream room in seconds.

Paid
View

Redesign your interior in seconds using AI

Paid
View
Reroom logo
Design

Reroom

Transform rooms with AI-generated designs.

Freemium
View
Jife logo
Design

Jife

Transform Your Space with AI-Powered Japanese Interior Designs by Jife

Paid
View
Visily logo
Design

Visily

AI-powered wireframes for non-designers.

Free
View

Revolutionize Property Viewing with AI-Generated Floor Plans and Virtual Tours

Paid
View
Archsynth logo
Design

Archsynth

Transform sketches into stunning architectural renders with AI.

Paid
View