终端UI设计技能Skill terminal-ui-design

此技能专注于设计和实现高质量、独特的终端用户界面,特别适用于命令行工具和TUI应用程序。它强调美学设计、颜色主题、排版样式、布局优化和动态效果,以提供卓越的用户体验并避免通用样式。关键词:终端用户界面、CLI工具、TUI应用、界面设计、用户体验、ANSI代码、颜色方案、排版技术、终端美学、数据可视化。

其他 0 次安装 0 次浏览 更新于 3/9/2026

name: terminal-ui-design description: 创建独特、生产级质量的终端用户界面,具备高设计质量。当用户要求构建CLI工具、TUI应用程序或基于终端的界面时使用此技能。生成创意、精致的代码,避免通用的终端美学。

创建独特、生产级质量的终端用户界面,具备高设计质量。当构建CLI工具、TUI应用程序或基于终端的界面时使用此技能。生成创意、精致的代码,避免通用的终端美学。

设计思考

在编码之前,理解上下文并致力于一个大胆的美学方向:

1- 目的:这个界面解决什么问题?谁使用它?工作流程是什么? 2- 色调:选择一个极端:黑客/赛博朋克、复古计算(80s/90s)、极简禅意、最大主义仪表板、合成波霓虹灯、单色粗野主义、企业主机、有趣/异想天开、矩阵风格、蒸汽朋克终端、蒸汽波、军事/战术、装饰艺术、纸带怀旧 3- 约束:技术要求(Python Rich, Go bubbletea, Rust ratatui, Node.js blessed/ink, 纯ANSI转义码, ncurses) 4- 差异化:什么让这个界面难以忘怀?关于这个终端体验,人们会记住的一件事是什么?

选择一个清晰的概念方向,并以精确执行。密集的信息仪表板和禅意单焦点界面都可以——关键是意图,而不是强度。

方框绘制与边框

选择匹配你美学风格的边框样式:

  • 单线:┌─┐│└┘ — 干净、现代
  • 双线:╔═╗║╚╝ — 粗体、正式、复古主机
  • 圆角:╭─╮│╰╯ — 柔软、友好、现代
  • 粗重:┏━┓┃┗┛ — 强壮、工业
  • 虚线/点线:┄┆ — 轻量、通风、非正式
  • 仅ASCII:±+| — 复古、通用兼容性
  • 块字符:█▀▄▌▐ — 厚重、粗体、粗野主义
  • 自定义Unicode:混合符号如◢◣◤◥, ●○◐◑, ▲▼◀▶用于独特框架

避免默认使用简单的单线方框。考虑不对称边框、双粗标题或装饰性角落如◆, ◈, ✦, ⬡。

颜色与主题

致力于一个连贯的调色板。终端颜色策略:

  • ANSI 16:经典、通用。超越默认红/绿/蓝,打造独特组合
  • 256色:丰富调色板。使用颜色渐变、微妙背景变化
  • 真彩色(24位):全光谱。渐变文本、平滑颜色过渡
  • 单色:单色强度变化(暗淡、正常、粗体、反转)。优雅约束

创建氛围通过:

  • 用于部分的背景颜色块
  • 使用块字符░░▒▒▓▓██的渐变填充
  • 颜色编码的语义含义(但避免陈词滥调红色=坏、绿色=好)
  • 反转/反向视频强调
  • 次要信息用暗淡文本,主要用粗体

调色板示例(发明你自己的):

  • 赛博朋克:热粉色 #ff00ff、电青色 #00ffff、深紫色 #1a0a2e 背景
  • 琥珀终端:#ffb000 在黑上,像复古CRT
  • 灵感来自Nord:冷蓝色和柔和绿色在深蓝灰上
  • 热狗摊:有意花哨的黄/红(用于有趣/讽刺UI)

排版与文本样式

终端全都是排版。让它有意义:

  • ASCII艺术标题:使用figlet风格横幅、自定义字母形式或Unicode艺术
  • 文本权重:粗体、暗淡、正常 — 创建视觉层次
  • 文本装饰:下划线、删除线、斜体(如支持)
  • 字母间距:用空格模拟标题:H E A D E R
  • 大小写:全部大写用于标题,小写用于正文,混合用于强调
  • Unicode符号:用 → • ◆ ★ ⚡ λ ∴ ≡ ⌘ 丰富文本
  • 自定义项目符号:替换 - 为 ▸ ◉ ✓ ⬢ › 或主题符号

ASCII艺术风格: 块: ███████╗██╗██╗ ███████╗ 倾斜: /___ / / // / / ____/ 小: ╔═╗┌─┐┌─┐ 极简: [ HEADER ]

布局与空间组成

摆脱单列输出:

  • 面板与窗口:用边框创建不同区域
  • 列:使用小心间距的并排信息
  • 表格:有意义地对齐数据,使用Unicode表格字符
  • 空白:面板内充分填充,部分间呼吸空间
  • 密度:匹配目的 — 仪表板可以密集,向导应该稀疏
  • 层次结构:主内容、次要信息和框架间的清晰视觉区别
  • 不对称:偏离中心标题、加权布局、意外对齐

运动与动画

终端支持动态内容:

  • 旋转器:超越基本 |/-。使用盲文模式 ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏,点 ⣾⣽⣻⢿⡿⣟⣯⣷,自定义序列
  • 进度条:▓░, █▒, [=====> ],或创意替代品如 ◐◓◑◒
  • 打字效果:为戏剧性逐字符显示文本
  • 过渡:擦除效果,用颜色强度淡入淡出
  • 实时更新:流数据、实时图表

数据展示

  • 火花线:▁▂▃▄▅▆▇█ 用于内联迷你图表
  • 条形图:用块字符的水平条
  • 表格:智能列大小调整、交替行颜色、对齐数字
  • 树:├── └── │ 用于层次结构
  • 状态指示器:● 绿色,○ 空,◐ 部分,✓ 完成,✗ 失败
  • 仪表:[████████░░] 带百分比

装饰元素

  • 添加特色而不杂乱:
  • 分隔符:───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋
  • 部分标记:▶ SECTION, [ SECTION ], ─── SECTION ───, ◆ SECTION
  • 背景纹理:用轻字符模式如 · ∙ ░
  • 图标:如可用的Nerd Font图标: 󰊢

要避免的反模式

永远不要使用通用的终端美学如:

  • 纯未格式化文本输出
  • 无意识调色板的默认颜色
  • 无样式的基本[INFO]、[ERROR]前缀
  • 简单的----分隔符
  • 无结构文本墙
  • 无个性的通用进度条
  • 无聊的帮助文本格式化
  • 不一致的间距和对齐

库快速参考 Python: Rich, Textual Go: Bubbletea, Lipgloss Rust: Ratatui Node.js: Ink, Blessed

ANSI转义码: \x1b[1m 粗体 \x1b[3m 斜体 \x1b[4m 下划线 \x1b[31m 红色前景 \x1b[38;2;R;G;Bm 真彩色 \x1b[2J 清屏

终端是具有独特约束和可能的画布。不要仅仅打印文本—打造一种体验。

匹配实现复杂度到美学愿景。密集监控仪表板需要精心面板和实时更新。最小CLI需要克制、精确和完美对齐。优雅来自执行愿景良好。