关于 terminal-ui-design
terminal-ui-design 是面向 CLI 工具、TUI 应用和终端界面的设计技能,帮助开发者在实现前确定视觉方向,并规划布局、色彩、文字与动态效果。
主要功能
- 01先确定界面的用途与风格
- 02规划边框、色彩和文字层级
- 03设计终端布局与数据呈现
- 04提供动画与装饰元素建议
- 05提示匹配技术实现复杂度
适用场景
- 01设计 CLI 工具的输出界面
- 02构建 TUI 应用的仪表盘
- 03为终端向导规划视觉层次
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ eddiebe147/ claude-settings --skill terminal-ui-design安装后在 Claude Code 中输入/terminal-ui-design确认已加载。
详细介绍
打造独具特色、可用于生产环境且设计品质出众的终端用户界面。构建 CLI 工具、TUI 应用或基于终端的界面时,请使用此技能。生成富有创意、精致完善的代码,避免千篇一律的终端风格。
设计思路
编码前,先了解使用场景,并确定一个大胆的美学方向:
1- 用途:此界面要解决什么问题?谁会使用?工作流程是什么? 2- 调性:选择一种极致风格:黑客/赛博朋克、复古计算机(80/90 年代)、极简禅意、极繁仪表盘、合成波霓虹、单色粗野主义、企业大型机、活泼/奇趣、黑客帝国风格、蒸汽朋克终端、蒸汽波、军事/战术、装饰艺术、怀旧纸带 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 显示器
- 北欧风格:深蓝灰底上的冷蓝色和低饱和度绿色
- 热狗摊:故意使用刺眼的黄/红配色(适合活泼/反讽风格的界面)
字体与文本样式
终端的核心全在排版。让排版发挥作用:
- ASCII 艺术标题:使用 figlet 风格横幅、自定义字形或 Unicode 图案
- 文本粗细:粗体、暗淡、常规——构建视觉层级
- 文本装饰:下划线、删除线、斜体(视支持情况而定)
- 字母间距:通过标题中的空格模拟:H E A D E R
- 大小写:标题使用全大写,正文使用小写,重点内容混合使用
- Unicode 符号:用 → • ◆ ★ ⚡ λ ∴ ≡ ⌘ 丰富文本
- 自定义项目符号:将 - 替换为 ▸ ◉ ✓ ⬢ › 或主题符号
ASCII 艺术风格: 块状: ███████╗██╗██╗ ███████╗ 倾斜: /___ / / // / / ____/ 小号: ╔═╗┌─┐┌─┐ 极简: [ HEADER ]
布局与空间构成
摆脱单列输出的限制:
- 面板与窗口:用边框创建不同区域
- 分栏:通过恰当的间距并排展示信息
- 表格:有意义地对齐数据,使用 Unicode 表格字符
- 留白:面板内留出充足边距,各区块之间留有呼吸空间
- 密度:根据用途调整——仪表板可以密集,向导则应简洁
- 层次:清晰区分主要内容、次要信息和界面装饰
- 非对称:偏离中心的标题、有权重的布局、出人意料的对齐方式
动效与动画
终端支持动态内容:
- 加载动画:不止基础的 |/-。可使用 Braille 图案 ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏、点阵 ⣾⣽⣻⢿⡿⣟⣯⣷ 或自定义序列
- 进度条:▓░、█▒、[=====> ],或 ◐◓◑◒ 等创意形式
- 打字效果:逐字显示文本,营造戏剧效果
- 转场:擦除效果、通过颜色强度实现淡入/淡出
- 实时更新:流式数据、实时图表
数据展示
- 迷你图:用于行内小图表的 ▁▂▃▄▅▆▇█
- 条形图:使用块字符绘制水平条形图
- 表格:智能调整列宽、交替行颜色、对齐数字
- 树形结构:使用 ├── └── │ 展示层级
- 状态指示器:● 绿色、○ 空、◐ 部分完成、✓ 已完成、✗ 失败
- 仪表盘:使用 [████████░░] 显示百分比
装饰元素
- 增添个性,但避免杂乱:
- 分隔线:───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋
- 区块标记:▶ 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 则需要克制、精准和完美的对齐。优雅源于出色地实现构想。