# Terminal UI Design > Create distinctive, production-grade terminal user interfaces with high design quality. Use this skill when the user asks to build CLI tools, TUI applications, or terminal-based interfaces. Generates creative, polished code that avoids generic terminal aesthetics. - Skill: `duyet/terminal-ui-design` (Agent Skill) - Install (CLI): `npx skillmds@latest add duyet/terminal-ui-design` - Raw SKILL.md: https://api.skillmd.com/api/skills/duyet/terminal-ui-design/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: duyet (https://skillmd.com/u/duyet) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/duyet/terminal-ui-design --- # Terminal UI Design 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. ## 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. ## 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 ◆, ◈, ✦, ⬡. ## 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) ## 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 ] ``` ## 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 ## 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: 󰊢 󰂽 󰃻 󰃽 󰮍 󰈔 ## 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.