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需要克制、精确和完美对齐。优雅来自执行愿景良好。