Back to Details

terminal-ui-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Create distinctive, production-grade terminal user interfaces with high design quality. Use this skill when building CLI tools, TUI applications, or terminal-based interfaces. Generate creative, polished code that avoids generic terminal aesthetics.
创建具有高设计水准、特色鲜明的生产级终端用户界面。在构建CLI工具、TUI应用或基于终端的界面时，可使用此技能。生成富有创意、经过打磨的代码，避免通用的终端美学风格。

Design Thinking

设计思路

Before coding, understand the context and commit to a BOLD aesthetic direction:
1- Purpose: What problem does this interface solve? Who uses it? What's the workflow? 2- Tone: Pick an extreme: hacker/cyberpunk, retro-computing (80s/90s), minimalist zen, maximalist dashboard, synthwave neon, monochrome brutalist, corporate mainframe, playful/whimsical, matrix-style, steampunk terminal, vaporwave, military/tactical, art deco, paper-tape nostalgic 3- Constraints: Technical requirements (Python Rich, Go bubbletea, Rust ratatui, Node.js blessed/ink, pure ANSI escape codes, ncurses) 4- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember about this terminal experience?
Choose a clear conceptual direction and execute it with precision. A dense information dashboard and a zen single-focus interface both work—the key is intentionality, not intensity.
编码前，先了解上下文并确定一个鲜明的美学方向：
1- 用途：该界面解决什么问题？使用者是谁？工作流程是怎样的？ 2- 风格基调：选择一种极致风格：黑客/赛博朋克、复古计算（80/90年代）、极简禅意、极繁仪表盘、合成波霓虹、单色粗野主义、企业大型机、趣味/奇趣、矩阵风格、蒸汽朋克终端、蒸汽波、军事/战术、装饰艺术、纸带怀旧风 3- 约束条件：技术要求（Python Rich、Go bubbletea、Rust ratatui、Node.js blessed/ink、纯ANSI转义码、ncurses） 4- 差异化：是什么让这个界面令人难忘？用户对这次终端体验最深刻的记忆点是什么？
选择清晰的概念方向并精准执行。信息密集的仪表盘和专注单一任务的禅意界面都可行——关键在于目的性，而非强度。

Box Drawing & Borders

方框绘制与边框

Choose border styles that match your aesthetic:
  • Single line: ┌─┐│└┘ — Clean, modern
  • Double line: ╔═╗║╚╝ — Bold, formal, retro-mainframe
  • Rounded: ╭─╮│╰╯ — Soft, friendly, modern
  • Heavy: ┏━┓┃┗┛ — Strong, industrial
  • Dashed/Dotted: ┄┆ — Light, airy, informal
  • ASCII only: +-+| — Retro, universal compatibility
  • Block characters: █▀▄▌▐ — Chunky, bold, brutalist
  • Custom Unicode: Mix symbols like ◢◣◤◥, ●○◐◑, ▲▼◀▶ for unique frames
Avoid defaulting to simple single-line boxes. Consider asymmetric borders, double-thick headers, or decorative corners like ◆, ◈, ✦, ⬡.
选择与美学风格匹配的边框样式：
  • 单线：┌─┐│└┘ — 简洁、现代
  • 双线：╔═╗║╚╝ — 醒目、正式、复古大型机风格
  • 圆角：╭─╮│╰╯ — 柔和、友好、现代
  • 粗线：┏━┓┃┗┛ — 硬朗、工业风
  • 虚线/点线：┄┆ — 轻盈、随性、非正式
  • 仅ASCII：+-+| — 复古、兼容性强
  • 块字符：█▀▄▌▐ — 厚重、醒目、粗野主义
  • 自定义Unicode：混合◢◣◤◥、●○◐◑、▲▼◀▶等符号打造独特边框
避免默认使用简单的单线方框。可以考虑不对称边框、加粗的标题栏，或是◆、◈、✦、⬡等装饰性边角。

Color & Theme

色彩与主题

Commit to a cohesive palette. Terminal color strategies:
  • ANSI 16: Classic, universal. Craft distinctive combinations beyond default red/green/blue
  • 256-color: Rich palettes. Use color gradients, subtle background variations
  • True color (24-bit): Full spectrum. Gradient text, smooth color transitions
  • Monochrome: Single color with intensity variations (dim, normal, bold, reverse). Elegant constraint
Create atmosphere with:
  • Background color blocks for sections
  • Gradient fills using block characters ░▒▓█
  • Color-coded semantic meaning (but avoid cliché red=bad, green=good)
  • Inverted/reverse video for emphasis
  • Dim text for secondary information, bold for primary
Palette examples (invent your own):
  • Cyberpunk: Hot pink #ff00ff, electric cyan #00ffff, deep purple #1a0a2e background
  • Amber terminal: #ffb000 on black, like vintage CRTs
  • Nord-inspired: Cool blues and muted greens on dark blue-gray
  • Hot Dog Stand: Intentionally garish yellow/red (for playful/ironic UIs)
确定一套协调的配色方案。终端色彩策略：
  • ANSI 16色：经典、通用。打造超越默认红/绿/蓝的独特组合
  • 256色：丰富的调色板。使用渐变色、细微的背景变化
  • 真彩色（24位）：全光谱。渐变文字、平滑的色彩过渡
  • 单色：单一色彩搭配不同亮度（暗、正常、粗体、反色）。优雅的约束
通过以下方式营造氛围：
  • 为不同区块设置背景色块
  • 使用░▒▓█等块字符实现渐变填充
  • 为语义赋予颜色编码（但避免落入红=错误、绿=成功的俗套）
  • 使用反色/反转视频强调重点
  • 次要信息用暗淡文本，主要信息用粗体
配色示例（可自行创作）：
  • 赛博朋克：亮粉色#ff00ff、电青色#00ffff、深紫色#1a0a2e背景
  • 琥珀色终端：黑色背景配#ffb000，类似老式CRT显示器
  • 北欧风格：深蓝灰色背景搭配冷蓝色和柔和绿色
  • 热狗摊：刻意使用扎眼的黄/红配色（适用于趣味/讽刺风格的UI）

Typography & Text Styling

排版与文本样式

The terminal is ALL typography. Make it count:
  • ASCII art headers: Use figlet-style banners, custom letterforms, or Unicode art
  • Text weight: Bold, dim, normal — create visual hierarchy
  • Text decoration: Underline, strikethrough, italic (where supported)
  • Letter spacing: Simulate with spaces for headers: H E A D E R
  • Case: ALL CAPS for headers, lowercase for body, mixed for emphasis
  • Unicode symbols: Enrich text with → • ◆ ★ ⚡ λ ∴ ≡ ⌘
  • Custom bullets: Replace - with ▸ ◉ ✓ ⬢ › or themed symbols
ASCII Art Styles: Block: ███████╗██╗██╗ ███████╗ Slant: /___ / / // / / ____/ Small: ╔═╗┌─┐┌─┐ Minimal: [ HEADER ]
终端完全依赖排版。要充分利用：
  • ASCII艺术标题：使用figlet风格的横幅、自定义字体或Unicode艺术字
  • 文本粗细：粗体、暗淡、正常——构建视觉层次
  • 文本装饰：下划线、删除线、斜体（在支持的终端中）
  • 字母间距：在标题中用空格模拟：H E A D E R
  • 大小写：标题用全大写，正文用小写，混合使用以强调重点
  • Unicode符号：用→ • ◆ ★ ⚡ λ ∴ ≡ ⌘等符号丰富文本
  • 自定义项目符号：用▸ ◉ ✓ ⬢ ›或主题符号替换-
ASCII艺术风格： Block: ███████╗██╗██╗ ███████╗ Slant: /___ / / // / / ____/ Small: ╔═╗┌─┐┌─┐ Minimal: [ HEADER ]

Layout & Spatial Composition

布局与空间构图

Break free from single-column output:
  • Panels & Windows: Create distinct regions with borders
  • Columns: Side-by-side information using careful spacing
  • Tables: Align data meaningfully, use Unicode table characters
  • Whitespace: Generous padding inside panels, breathing room between sections
  • Density: Match to purpose — dashboards can be dense, wizards should be sparse
  • Hierarchy: Clear visual distinction between primary content, secondary info, and chrome
  • Asymmetry: Off-center titles, weighted layouts, unexpected alignments
摆脱单栏输出的局限：
  • 面板与窗口：用边框创建不同的区域
  • 多列：通过精心排版实现信息并排展示
  • 表格：有意义地对齐数据，使用Unicode表格字符
  • 留白：面板内部留出充足的内边距，区块间留出呼吸空间
  • 密度：与用途匹配——仪表盘可以信息密集，向导类界面则应简洁稀疏
  • 层次：清晰区分主要内容、次要信息和界面框架
  • 不对称：标题居中偏移、侧重布局、意外的对齐方式

Motion & Animation

动态与动画

Terminals support dynamic content:
  • Spinners: Beyond basic |/-. Use Braille patterns ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏, dots ⣾⣽⣻⢿⡿⣟⣯⣷, custom sequences
  • Progress bars: ▓░, █▒, [=====> ], or creative alternatives like ◐◓◑◒
  • Typing effects: Reveal text character-by-character for drama
  • Transitions: Wipe effects, fade in/out with color intensity
  • Live updates: Streaming data, real-time charts
终端支持动态内容：
  • 加载动画：超越基础的|/-. 使用盲文图案⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏、点形⣾⣽⣻⢿⡿⣟⣯⣷或自定义序列
  • 进度条：▓░、█▒、[=====> ]，或是◐◓◑◒等创意替代方案
  • 打字效果：逐字符显示文本以营造戏剧感
  • 过渡效果：擦除效果、通过色彩亮度实现淡入淡出
  • 实时更新：流式数据、实时图表

Data Display

数据展示

  • Sparklines: ▁▂▃▄▅▆▇█ for inline mini-charts
  • Bar charts: Horizontal bars with block characters
  • Tables: Smart column sizing, alternating row colors, aligned numbers
  • Trees: ├── └── │ for hierarchies
  • Status indicators: ● green, ○ empty, ◐ partial, ✓ complete, ✗ failed
  • Gauges: [████████░░] with percentage
  • 迷你折线图：用▁▂▃▄▅▆▇█实现内嵌迷你图表
  • 柱状图：用块字符实现水平柱状图
  • 表格：智能列宽、交替行颜色、数字对齐
  • 树形结构：用├── └── │展示层级关系
  • 状态指示器：● 绿色（正常）、○ 空（未开始）、◐ 部分完成、✓ 完成、✗ 失败
  • 仪表盘：[████████░░] 搭配百分比

Decorative Elements

装饰元素

  • Add character without clutter:
  • Dividers: ───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋
  • Section markers: ▶ SECTION, [ SECTION ], ─── SECTION ───, ◆ SECTION
  • Background textures: Patterns using light characters like · ∙ ░
  • Icons: Nerd Font icons if available: 󰊢
  • 在不造成杂乱的前提下增添特色：
  • 分隔线：───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋
  • 区块标记：▶ SECTION、[ SECTION ]、─── SECTION ───、◆ SECTION
  • 背景纹理：用· ∙ ░等浅色字符打造图案
  • 图标：如果支持，使用Nerd Font图标： 󰊢

Anti-Patterns to Avoid

需避免的反模式

NEVER use generic terminal aesthetics like:
  • Plain unformatted text output
  • Default colors without intentional palette
  • Basic [INFO], [ERROR] prefixes without styling
  • Simple ---- dividers
  • Walls of unstructured text
  • Generic progress bars without personality
  • Boring help text formatting
  • Inconsistent spacing and alignment
Library Quick Reference Python: Rich, Textual Go: Bubbletea, Lipgloss Rust: Ratatui Node.js: Ink, Blessed
ANSI Escape Codes: \x1b[1m Bold \x1b[3m Italic \x1b[4m Underline \x1b[31m Red foreground \x1b[38;2;R;G;Bm True color \x1b[2J Clear screen
The terminal is a canvas with unique constraints and possibilities. Don't just print text—craft an experience.
Match implementation complexity to the aesthetic vision. A dense monitoring dashboard needs elaborate panels and live updates. A minimal CLI needs restraint, precision, and perfect alignment. Elegance comes from executing the vision well.
切勿使用通用的终端美学风格，例如：
  • 纯无格式文本输出
  • 无明确配色方案的默认颜色
  • 未加样式的基础[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则需要克制、精准和完美的对齐。优雅源于对愿景的出色执行。