Terminal UI Design

Terminal UI Design Skill

Create distinctive, production-grade terminal user interfaces with high design quality. Generate creative, polished code that avoids generic terminal aesthetics.

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 aesthetic from the palette below
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.

Aesthetic Palette

Choose ONE and commit fully:

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
                ┃         ┃
                ┗━━━━━━━━━┛

ASCII only:     +---------+    Retro, universal compatibility
                |         |
                +---------+

Block chars:    █▀▀▀▀▀▀▀▀█    Chunky, bold, brutalist
                █         █
                █▄▄▄▄▄▄▄▄█

Advanced techniques:

• Asymmetric borders (double top, single sides)
• Decorative corners: ◆ ◈ ✦ ⬡ ● ◢ ◣
• Mixed styles for hierarchy (heavy for primary, light for secondary)

Color & Theme Implementation

ANSI 16 (Universal)

Black   Red     Green   Yellow  Blue    Magenta Cyan    White
\x1b[30m \x1b[31m \x1b[32m \x1b[33m \x1b[34m \x1b[35m \x1b[36m \x1b[37m
Bright: \x1b[90m through \x1b[97m

True Color (24-bit)

Foreground: \x1b[38;2;R;G;Bm
Background: \x1b[48;2;R;G;Bm

Signature Palettes

Cyberpunk:

Background: #1a0a2e (deep purple)
Primary:    #ff00ff (hot pink)
Secondary:  #00ffff (electric cyan)
Accent:     #ff6b6b (coral warning)

Amber Terminal:

Background: #000000
Primary:    #ffb000 (warm amber)
Dim:        #805800 (dark amber)
Bright:     #ffd966 (light amber)

Nord-Inspired:

Background: #2e3440 (polar night)
Primary:    #88c0d0 (frost blue)
Secondary:  #a3be8c (aurora green)
Accent:     #bf616a (aurora red)

Gradient Fills

Use block characters for gradients:

░▒▓█ — Light to solid
▁▂▃▄▅▆▇█ — Height progression (for charts)

Typography & Text Styling

Text Decorations

Bold:          \x1b[1m
Dim:           \x1b[2m
Italic:        \x1b[3m
Underline:     \x1b[4m
Strikethrough: \x1b[9m
Reverse:       \x1b[7m
Reset:         \x1b[0m

Header Styles

Block ASCII (figlet-style):

███████╗██╗██╗     ███████╗███████╗
██╔════╝██║██║     ██╔════╝██╔════╝
█████╗  ██║██║     █████╗  ███████╗
██╔══╝  ██║██║     ██╔══╝  ╚════██║
██║     ██║███████╗███████╗███████║
╚═╝     ╚═╝╚══════╝╚══════╝╚══════╝

Letter Spacing:

S T A T U S    R E P O R T

Section Markers:

▶ SECTION NAME
[ SECTION ]
─── SECTION ───────────────────
◆ SECTION ◆
═══ SECTION ═══════════════════

Unicode Enhancement

Replace boring characters with styled alternatives:

Layout & Spatial Composition

Panel Layout Example

╭─── SYSTEM MONITOR ──────────────────────────────╮
│                                                  │
│  CPU  [████████████░░░░░░░░]  67%               │
│  MEM  [██████████████░░░░░░]  74%               │
│  DSK  [████░░░░░░░░░░░░░░░░]  23%               │
│                                                  │
├──────────────────────────────────────────────────┤
│  ▸ Process count: 847                            │
│  ▸ Uptime: 14d 7h 23m                            │
│  ▸ Load avg: 2.34 1.89 1.67                      │
│                                                  │
╰──────────────────────────────────────────────────╯

Column Layout

┌─ SERVERS ────────┐  ┌─ ALERTS ─────────┐
│                  │  │                  │
│ ● web-prod-1     │  │ ⚠ High CPU       │
│ ● web-prod-2     │  │ ✓ All healthy    │
│ ○ web-staging    │  │                  │
│                  │  │                  │
└──────────────────┘  └──────────────────┘

Hierarchy Principles

• Primary: Bold, high contrast, prominent position
• Secondary: Normal weight, slightly dimmed
• Tertiary: Dim text, small, peripheral
• Chrome: Borders, labels, decorations—should not compete with content

Motion & Animation

Spinners

# Braille dots
frames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']

# Orbital
frames = ['◐', '◓', '◑', '◒']

# Line
frames = ['|', '/', '-', '']

# Dots
frames = ['⣾', '⣽', '⣻', '⢿', '⡿', '⣟', '⣯', '⣷']

# Moon phases
frames = ['🌑', '🌒', '🌓', '🌔', '🌕', '🌖', '🌗', '🌘']

Progress Bars

Standard:   [████████████░░░░░░░░]  60%
Minimal:    ████████████▒▒▒▒▒▒▒▒  60%
Fancy:      ⟨▰▰▰▰▰▰▱▱▱▱⟩  60%
Blocks:     █████████████░░░░░░░░  60%

Transitions

# Typing effect
for char in text:
    print(char, end='', flush=True)
    time.sleep(0.03)

# Wipe reveal (character by character per line)
for i, line in enumerate(lines):
    print(f"\x1b[{i+1};1H{line}")
    time.sleep(0.05)

Data Visualization

Sparklines

Inline chart: ▁▂▃▄▅▆▇█▇▆▅▄▃▂▁
Usage trend:  CPU ▂▃▅▇▆▃▂▁▂▄▆▇▅▃

Status Indicators

● Online     ○ Offline    ◐ Partial
✓ Success    ✗ Failed     ⟳ Pending
▲ Critical   ▼ Low        ● Normal

Tree Structure

├── src/
│   ├── main.py
│   ├── utils/
│   │   ├── helpers.py
│   │   └── config.py
│   └── tests/
│       └── test_main.py
└── README.md

Tables

┌──────────────┬─────────┬──────────┐
│ SERVICE      │ STATUS  │ LATENCY  │
├──────────────┼─────────┼──────────┤
│ api-gateway  │ ● UP    │   12ms   │
│ auth-service │ ● UP    │    8ms   │
│ db-primary   │ ○ DOWN  │    --    │
└──────────────┴─────────┴──────────┘

Library Quick Reference

Python: Rich

from rich.console import Console
from rich.panel import Panel
from rich.table import Table
from rich.progress import Progress
from rich.live import Live

console = Console()
console.print("[bold magenta]Hello[/] [cyan]World[/]")
console.print(Panel("Content", title="Title", border_style="green"))

Python: Textual (TUI Framework)

from textual.app import App
from textual.widgets import Header, Footer, Static

class MyApp(App):
    CSS = """
    Screen {
        background: #1a0a2e;
    }
    """
    def compose(self):
        yield Header()
        yield Static("Hello, World!")
        yield Footer()

Go: Bubbletea + Lipgloss

import (
    "github.com/charmbracelet/lipgloss"
    tea "github.com/charmbracelet/bubbletea"
)

var style = lipgloss.NewStyle().
    Bold(true).
    Foreground(lipgloss.Color("#FF00FF")).
    Background(lipgloss.Color("#1a0a2e")).
    Padding(1, 2)

Rust: Ratatui

use ratatui::{
    prelude::*,
    widgets::{Block, Borders, Paragraph},
};

let block = Block::default()
    .title("Title")
    .borders(Borders::ALL)
    .border_style(Style::default().fg(Color::Cyan));

Node.js: Ink (React for CLI)

import { render, Box, Text } from "ink";

const App = () => (
  <Box flexDirection="column" padding={1}>
    <Text bold color="magenta">
      Hello
    </Text>
    <Text color="cyan">World</Text>
  </Box>
);

render(<App />);

Pure ANSI Escape Codes

# Colors
print("\x1b[38;2;255;0;255mHot Pink\x1b[0m")
print("\x1b[48;2;26;10;46m\x1b[38;2;0;255;255mCyan on Purple\x1b[0m")

# Cursor control
print("\x1b[2J")         # Clear screen
print("\x1b[H")          # Home position
print("\x1b[5;10H")      # Move to row 5, col 10
print("\x1b[?25l")       # Hide cursor
print("\x1b[?25h")       # Show cursor

Anti-Patterns to Avoid

NEVER produce generic terminal output 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
❌ Mixed border styles without purpose
❌ Color vomit (too many colors without hierarchy)

Design Checklist

Before finalizing any terminal UI:

• Aesthetic chosen: One clear direction, executed fully
• Color palette: Cohesive, 3-5 colors max
• Typography hierarchy: Primary, secondary, tertiary distinction
• Borders: Consistent style matching the aesthetic
• Spacing: Intentional padding and margins
• Status indicators: Styled, not default text
• Loading states: Animated, themed spinners/progress
• Error states: Styled, not generic red text
• Empty states: Designed, not blank

Example: Complete Themed Interface

Cyberpunk System Monitor:

╔══════════════════════════════════════════════════════════════╗
║  ▓▓▓ NEURAL•LINK ▓▓▓  ◢◤ SYSTEM DIAGNOSTIC v2.7 ◢◤         ║
╠══════════════════════════════════════════════════════════════╣
║                                                              ║
║  ⟨ CORE METRICS ⟩                                            ║
║  ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄   ║
║                                                              ║
║  CPU ████████████████████░░░░░░░░░░ 67% ▲ 2.4GHz             ║
║  MEM ██████████████████████████░░░░ 84% ◆ 13.4/16GB          ║
║  NET ▁▂▃▅▆▇▅▃▂▁▂▄▆▇▅▃▂▁▂▃▅ IN: 847 MB/s                      ║
║                                                              ║
║  ⟨ ACTIVE PROCESSES ⟩                            [47 total]  ║
║  ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄   ║
║                                                              ║
║  PID     NAME              CPU    MEM    STATUS              ║
║  ─────────────────────────────────────────────────────       ║
║  1847    chrome            23%    1.2G   ● ACTIVE            ║
║  2394    node              12%    847M   ● ACTIVE            ║
║  0847    postgres           8%    2.1G   ● ACTIVE            ║
║  3721    backup_daemon      0%     47M   ○ IDLE              ║
║                                                              ║
╠══════════════════════════════════════════════════════════════╣
║  ◢ SYS OK ◣  │  ⚡ UPTIME: 14d 7h │  ▼ TEMP: 62°C  │  ⟳ 2.4s ║
╚══════════════════════════════════════════════════════════════╝

The terminal is a canvas with unique constraints and possibilities. Don't just print text—craft an experience.