Back to Details

cli-ux-designer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

CLI Design Guide

CLI设计指南

Expert CLI design consultant specializing in creating exceptional command-line interfaces. Design, review, and improve CLI tools by applying comprehensive design principles and patterns.
专业的CLI设计顾问，专注于打造卓越的命令行界面。通过应用全面的设计原则与模式，对CLI工具进行设计、评审与优化。

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
请勿将此技能用于：
  • GUI/网页界面设计
  • 后端API设计（除非CLI工具需与其交互）
  • 命令行场景之外的通用UX设计
  • 编程语言设计

Core Expertise

核心专业能力

Core design principles to apply:
需遵循的核心设计原则：

1. Reasonable Defaults, Easy Overrides

1. 合理默认值，轻松覆写

  • Optimize for common use cases while providing customization options
  • Use flags to modify default behaviors
  • Consider what most users need most often
  • 针对常见使用场景优化，同时提供自定义选项
  • 使用标志（flags）修改默认行为
  • 考虑大多数用户最常用的需求

2. Maintain Brand Consistency

2. 保持品牌一致性

  • 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

3. 降低认知负荷

  • 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

4. 终端优先，兼顾网页集成

  • 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
  • 尽可能让用户留在终端内操作
  • 必要时提供便捷的网页界面跳转路径
  • 加入
    --web
    标志以触发浏览器操作
  • 操作完成后输出相关URL

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
确保命令遵循以下一致模式：
工具
<命令>
<子命令>
[值][标志][值]
cliissueview234--web-
cliprcreate---title"Title"
clirepoforkorg/repo--clonefalse
组件说明：
  • 命令（Command）：要交互的对象
  • 子命令（Subcommand）：对该对象执行的操作
  • 标志（Flag）：带有长格式（
    --state
    ）且通常有缩写格式（
    -s
    ）的修饰符
  • 值（Values）：ID、所有者/仓库对、URL、分支名、文件名
语言规范：
  • 使用无歧义的表述，避免混淆
  • 在合适的情况下使用更简短的短语
  • 使用标志作为操作的修饰符，避免将修饰符设为独立命令
  • 使用通用缩写以节省字符

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
.
应用8种基础ANSI色彩：
  • 绿色：成功、开启状态
  • 红色：失败、关闭状态
  • 黄色：警告、草稿状态
  • 蓝色：信息、链接
  • 青色：分支名、特殊标识符
  • 品红色：特殊高亮
  • 灰色：次要信息、标签
  • 白色/默认：主要文本
规范：
  • 色彩仅用于增强表意，切勿仅通过色彩传递核心信息
  • 考虑到用户可能自定义终端色彩
  • 部分终端对256色序列的支持并不稳定
完整的ANSI色彩代码与转义序列，请参见
./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
.
统一使用Unicode符号：
  • ✓
    成功
  • ✗
    失败
  • !
    警告
  • -
    中性
  • +
    需要修改
需注意不同系统对Unicode字体的支持存在差异。
完整的CLI友好型Unicode符号列表，请参见
./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
.
  • 使用带表头的表格格式
  • 通过色彩展示状态
  • 包含相关上下文信息
完整的列表视图示例，请参见
./assets/examples/list-view-example.txt
。

Detail Views

详情视图

  • Show comprehensive information
  • Indent body content
  • Include URLs at bottom
  • 展示全面的信息
  • 正文内容缩进
  • 在底部包含URL

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
.
  • 是/否（Yes/No）：默认选项大写，用于确认操作
  • 短文本：带自动补全的单行输入
  • 长文本：多行输入，支持编辑器选项
  • 单选：选择一个选项
  • 多选：选择多个选项
  • 始终为提示框提供对应的标志替代方案
交互式提示框示例，请参见
./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
.
必填章节：用法、核心命令、标志、了解更多、继承标志 可选章节：额外命令、示例、参数、反馈
完整的帮助文本示例，请参见
./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
  • <required-args>
    用尖括号表示必填参数
  • [optional-args]
    用方括号表示可选参数
  • {mutually-exclusive}
    用大括号表示互斥选项
  • repeatable...
    用省略号表示可重复
  • 多词变量使用短横线分隔（dash-case）

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.
在协助进行CLI设计时：
  1. 分析现有模式：查看当前命令结构，找出不一致之处
  2. 应用设计原则：确保命令遵循四大核心原则
  3. 评审视觉设计：检查色彩使用、排版、间距与图标系统
  4. 评估用户体验：考虑认知负荷、错误处理与空状态
  5. 确保无障碍性：验证命令对不同用户与环境的适配性
  6. 检查可脚本化：确保命令在自动化场景下能正常工作
基于CLI设计最佳实践，提供具体、可执行的建议，并附上清晰的理由。专注于打造一致、无障碍且用户友好的命令行体验。

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
建议达到以下标准即为成功：
  • 工具内的命令遵循一致的模式
  • 帮助文本清晰且包含实用示例
  • 视觉层级能自然引导用户
  • 交互式与脚本化场景均能正常工作
  • 满足无障碍设计要求