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显示器
  • Nord风格：冷蓝色与暗绿色搭配深蓝灰色背景
  • 热狗摊风格：刻意使用扎眼的黄/红配色（用于趣味/讽刺类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: 󰊢
  • 增添特色但避免杂乱：
  • 分隔线：─────、═════、••••••、░░░░░░、≋≋≋≋≋≋
  • 区块标记：▶ 区块名称、[ 区块名称 ]、──── 区块名称 ────、◆ 区块名称
  • 背景纹理：用·、∙、░这类浅色字符打造图案
  • 图标：若支持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则需要克制、精准和完美的对齐。优雅源于对愿景的出色执行。",