terminal-ui-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Terminal UI Design

终端UI设计

Create distinctive, production-grade terminal interfaces with intentional aesthetics. Don't just print text—craft an experience.

打造风格独特、生产级的终端界面，兼具精心设计的美学效果。不要只是打印文本——要打磨出完整的使用体验。

Quick Start

快速开始

Before coding, choose a bold aesthetic direction:

Style	Vibe	Colors	Borders
Cyberpunk	Neon, futuristic	Hot pink #ff00ff, cyan #00ffff, purple #1a0a2e	Block █▀▄
Amber Terminal	Vintage CRT	#ffb000 on black	Double ╔═╗
Minimalist Zen	Clean, focused	Nord palette, cool blues	Rounded ╭─╮
Retro Mainframe	Corporate, formal	Green on black	ASCII-only +-+
Synthwave	80s nostalgia	Purple, pink gradients	Heavy ┏━┓
Monochrome Brutalist	Stark, bold	Single color + intensity	Heavy ┏━┓

Pick ONE direction and execute it with precision.

编码之前，先选择一个鲜明的美学方向：

风格	氛围	配色	边框
赛博朋克	霓虹、未来感	亮粉色 #ff00ff、青色 #00ffff、紫色 #1a0a2e	方块 █▀▄
琥珀终端	复古CRT感	黑色背景配 #ffb000	双线 ╔═╗
极简禅风	干净、聚焦	Nord配色、冷调蓝色	圆角 ╭─╮
复古大型机	正式、企业感	黑底绿字	纯ASCII +-+
合成波	80年代怀旧感	紫粉渐变	粗线 ┏━┓
单色野兽派	硬朗、鲜明	单色+明暗变化	粗线 ┏━┓

选择一个方向并精准落地。

Design Thinking Checklist

设计思维检查清单

Question	Decision Point
Purpose	What problem? Who uses it? What workflow?
Tone	Pick extreme: cyberpunk, zen, retro, maximalist, playful
Constraints	Python Rich, Go bubbletea, Rust ratatui, ANSI codes?
Differentiation	What makes this UNFORGETTABLE?

问题	决策点
核心用途	解决什么问题？目标用户是谁？适配什么工作流？
整体调性	选择极致风格：赛博朋克、禅风、复古、极繁、 playful
技术约束	用Python Rich、Go bubbletea、Rust ratatui还是原生ANSI码？
差异化	什么特性会让这个工具让人过目不忘？

Box Drawing & Borders

框绘字符与边框

Choose borders that match your aesthetic:

Single:     ┌─────┐ │   └─────┘  Clean, modern
Double:     ╔═════╗ ║   ╚═════╝  Bold, formal, retro
Rounded:    ╭─────╮ │   ╰─────╯  Soft, friendly
Heavy:      ┏─────┓ ┃   ┗─────┛  Strong, industrial
Dashed:     ┄┄┄┄┄┄ ┆              Light, airy
ASCII:      +-----+ |   +-----+  Retro, universal
Block:      █▀▀▀▀█ ▄   ▀▀▀▀▀    Chunky, brutalist

Pro tip: Use decorative corners: ◆ ◈ ✦ ⬡ ◢◣◤◥

选择和美学风格匹配的边框：

Single:     ┌─────┐ │   └─────┘  Clean, modern
Double:     ╔═════╗ ║   ╚═════╝  Bold, formal, retro
Rounded:    ╭─────╮ │   ╰─────╯  Soft, friendly
Heavy:      ┏─────┓ ┃   ┗─────┛  Strong, industrial
Dashed:     ┄┄┄┄┄┄ ┆              Light, airy
ASCII:      +-----+ |   +-----+  Retro, universal
Block:      █▀▀▀▀█ ▄   ▀▀▀▀▀    Chunky, brutalist

专业提示：可以使用装饰性角标：◆ ◈ ✦ ⬡ ◢◣◤◥

Color Strategies

配色策略

Strategy	When to Use	Technique
ANSI 16	Universal compatibility	Classic palette, craft unique combos
256-color	Rich but portable	Gradients, subtle variations
True color	Modern terminals	Full spectrum, smooth transitions
Monochrome	Elegant constraint	Single color, vary intensity

Create atmosphere:

Background color blocks for sections
Gradient fills: ░▒▓█
Semantic color (avoid cliché red=bad, green=good)
Reverse video for emphasis
Dim for secondary, bold for primary

策略	适用场景	技巧
ANSI 16色	需要全兼容性	经典配色，打造独特组合
256色	兼顾丰富度和可移植性	渐变、细微色差
真彩色	现代终端	全色域、平滑过渡
单色	优雅的约束感	单种颜色，通过明暗变化区分层级

营造氛围技巧：

区块使用背景色块区分
渐变填充：░▒▓█
语义化配色（避免俗套的红=错误、绿=正常）
反色高亮强调
次要信息变暗、主要信息加粗

Typography

排版

The terminal is ALL typography:

Technique	Effect	Example
ASCII art headers	Dramatic intro	`figlet` style banners
Text weight	Hierarchy	Bold, dim, normal
Decoration	Emphasis	Underline, italic, strikethrough
Letter spacing	Headers	H E A D E R
Case	Voice	ALL CAPS headers, lowercase body
Unicode symbols	Richness	→ • ◆ ★ ⚡ λ ∴ ≡ ⌘ ✓ ✗
Custom bullets	Personality	▸ ◉ ✓ ⬢ › instead of `-`

Block:    ███████╗██╗██╗     ███████╗
Slant:    /___  / / // /     / ____/
Small:    ╔═╗┌─┐┌─┐
Minimal:  [ HEADER ]

终端的所有内容都属于排版范畴：

技巧	效果	示例
ASCII艺术标题	极具冲击力的开场	`figlet` 风格横幅
字重变化	层级区分	加粗、变暗、常规
装饰效果	强调内容	下划线、斜体、删除线
字间距调整	标题效果	H E A D E R
大小写	传递语气	全大写标题、小写正文
Unicode符号	丰富表现力	→ • ◆ ★ ⚡ λ ∴ ≡ ⌘ ✓ ✗
自定义项目符号	凸显个性	用 ▸ ◉ ✓ ⬢ › 代替 `-`

Block:    ███████╗██╗██╗     ███████╗
Slant:    /___  / / // /     / ____/
Small:    ╔═╗┌─┐┌─┐
Minimal:  [ HEADER ]

Layout & Spatial Composition

布局与空间构成

Break free from single-column output:

Element	Usage
Panels & Windows	Distinct regions with borders
Columns	Side-by-side information
Tables	Aligned data, Unicode table chars
Whitespace	Generous padding, breathing room
Density	Match purpose—dense dashboards, sparse wizards
Hierarchy	Visual distinction: primary, secondary, chrome
Asymmetry	Off-center titles, weighted layouts

摆脱单栏输出的限制：

元素	用法
面板与窗口	带边框的独立区域
多栏布局	并排展示信息
表格	对齐展示数据，使用Unicode表格字符
留白	充足的内边距，留出呼吸空间
信息密度	匹配使用场景：高密度仪表盘、低密度引导流程
层级	视觉区分：主要内容、次要内容、框架元素
非对称布局	偏置标题、权重倾斜的布局

Motion & Animation

动效与动画

Element	Examples
Spinners	⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏, ⣾⣽⣻⢿⡿⣟⣯⣷
Progress bars	▓░, █▒, [=====> ], ◐◓◑◒
Typing effects	Character-by-character reveal
Transitions	Wipe effects, fade with color intensity
Live updates	Streaming data, real-time charts

元素	示例
加载动画	⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏, ⣾⣽⣻⢿⡿⣟⣯⣷
进度条	▓░, █▒, [=====> ], ◐◓◑◒
打字效果	逐字符显示内容
转场效果	擦除效果、通过颜色明暗实现淡入淡出
实时更新	流式数据、实时图表

Data Display

数据展示

Type	Technique
Sparklines	▁▂▃▄▅▆▇█ inline mini-charts
Bar charts	Horizontal bars with block chars
Tables	Smart sizing, alternating rows, aligned nums
Trees	├── └── │ hierarchies
Status	● green, ○ empty, ◐ partial, ✓ complete
Gauges	[████████░░] with percentage

类型	技巧
迷你走势图	▁▂▃▄▅▆▇█ 行内迷你图表
条形图	用块字符实现的横向条形
表格	智能适配宽度、隔行变色、数值右对齐
树形结构	├── └── │ 层级结构
状态标识 ● 绿色（正常）、○ 空置、◐ 部分完成、✓ 完成
仪表盘	[████████░░] 搭配百分比

Decorative Elements

装饰元素

Dividers:   ───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋
Sections:   ▶ SECTION, [ SECTION ], ─── SECTION ───, ◆ SECTION
Textures:   · ∙ ░ patterns for backgrounds
Icons:       (if Nerd Fonts available)

Dividers:   ───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋
Sections:   ▶ SECTION, [ SECTION ], ─── SECTION ───, ◆ SECTION
Textures:   · ∙ ░ patterns for backgrounds
Icons:       (if Nerd Fonts available)

Anti-Patterns to Avoid

需要避免的反模式

❌ Avoid	✅ Instead
Plain unformatted text	Styled output with intent
Default colors	Cohesive palette
Generic [INFO] prefixes	Styled prefixes with icons
Simple ---- dividers	Unicode dividers ───── ═════
Walls of text	Structured panels and sections
Generic progress	Creative spinners and bars
Boring help	Formatted, aligned help text
Inconsistent spacing	Precise alignment

❌ 避免	✅ 推荐做法
无格式的纯文本输出	有明确设计意图的样式化输出
默认配色	统一协调的调色板
通用的 [INFO] 前缀	带图标的样式化前缀
简单的 ---- 分隔线	Unicode分隔线 ───── ═════
大段无结构文本	结构化的面板和区块
通用进度提示	有创意的加载动画和进度条
枯燥的帮助信息	格式化、对齐的帮助文本
不一致的间距	精准的对齐

Library Quick Reference

库快速参考

Language	Libraries
Python	Rich, Textual, curses, prompt_toolkit
Go	Bubbletea, Lipgloss
Rust	Ratatui
Node.js	Ink, Blessed, cliui
Pure	ANSI escape codes

语言	相关库
Python	Rich, Textual, curses, prompt_toolkit
Go	Bubbletea, Lipgloss
Rust	Ratatui
Node.js	Ink, Blessed, cliui
原生实现	ANSI转义码

ANSI Escape Codes

ANSI转义码

\x1b[1m       Bold
\x1b[3m       Italic
\x1b[4m       Underline
\x1b[31m      Red foreground
\x1b[38;2;R;G;Bm  True color (RGB)
\x1b[2J       Clear screen
\x1b[H        Cursor home

\x1b[1m       Bold
\x1b[3m       Italic
\x1b[4m       Underline
\x1b[31m      Red foreground
\x1b[38;2;R;G;Bm  True color (RGB)
\x1b[2J       Clear screen
\x1b[H        Cursor home

Implementation Pattern

实现模式

Choose aesthetic first (cyberpunk, zen, retro, etc.)
Define palette (2-3 colors + background)
Select border style (single, double, rounded, block)
Create reusable components (panel, table, status)
Apply consistently across all output

首先确定美学风格（赛博朋克、禅风、复古等）
定义调色板（2-3种主色+背景色）
选择边框样式（单线、双线、圆角、块边框）
创建可复用组件（面板、表格、状态提示）
在所有输出中保持风格一致

Resources

资源

File	When to Load
references/box-drawing.md	Need border character reference
references/ansi-codes.md	Need escape code reference
references/color-palettes.md	Need pre-defined palettes

文件	加载场景
references/box-drawing.md	需要框绘字符参考时
references/ansi-codes.md	需要转义码参考时
references/color-palettes.md	需要预定义调色板时

Exit Criteria (Code Verified)

退出标准（代码已验证）

Output has intentional aesthetic (not generic)
Cohesive color palette used throughout
Borders and typography match chosen style
No plain text without formatting
Anti-patterns avoided

输出有明确的美学设计（不是通用默认样式）
全程使用统一协调的调色板
边框和排版和选定的风格匹配
没有无格式的纯文本内容
规避了所有反模式