TUI Design
Create distinctive, production-grade terminal user interfaces with high design quality. Use this skill when building TUI components, CLI tools, or terminal-based interfaces. Generate creative, polished code that avoids generic terminal aesthetics.
gwt Technology Context
- Primary TUI framework: Rust ratatui (gwt-core TUI migration target)
- Terminal emulation: xterm.js v6 (gwt-gui, rendered in Tauri WebView)
- Design principle: シンプルさの極限を追求しつつ、ユーザビリティと開発者体験の品質は妥協しない (CLAUDE.md)
- Scope: TUI/CLI/terminal rendering — Web UI components use
frontend-design skill instead
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it? What's the workflow?
- 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
- Constraints: Technical requirements (Rust ratatui, xterm.js, pure ANSI escape codes)
- 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
| Framework |
Language |
Notes |
| ratatui |
Rust |
gwt primary TUI framework |
| xterm.js v6 |
TypeScript |
gwt-gui terminal emulation (Tauri WebView) |
| Rich, Textual |
Python |
General purpose |
| Bubbletea, Lipgloss |
Go |
General purpose |
| Ink, Blessed |
Node.js |
General purpose |
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
Guiding Principle
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.
1---2name: tui-design3description: Create distinctive, production-grade terminal user interfaces. Use when building TUI components with ratatui, CLI output styling, or xterm.js terminal rendering. Triggers: 'design TUI', 'terminal UI', 'TUIデザイン', 'ターミナルUI', 'ratatui widget'4---56# TUI Design78Create distinctive, production-grade terminal user interfaces with high design quality. Use this skill when building TUI components, CLI tools, or terminal-based interfaces. Generate creative, polished code that avoids generic terminal aesthetics.910## gwt Technology Context1112- **Primary TUI framework:** Rust ratatui (gwt-core TUI migration target)13- **Terminal emulation:** xterm.js v6 (gwt-gui, rendered in Tauri WebView)14- **Design principle:** シンプルさの極限を追求しつつ、ユーザビリティと開発者体験の品質は妥協しない (CLAUDE.md)15- **Scope:** TUI/CLI/terminal rendering — Web UI components use `frontend-design` skill instead1617## Design Thinking1819Before coding, understand the context and commit to a BOLD aesthetic direction:20211. **Purpose:** What problem does this interface solve? Who uses it? What's the workflow?222. **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 nostalgic233. **Constraints:** Technical requirements (Rust ratatui, xterm.js, pure ANSI escape codes)244. **Differentiation:** What makes this UNFORGETTABLE? What's the one thing someone will remember about this terminal experience?2526Choose 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.2728## Box Drawing & Borders2930Choose border styles that match your aesthetic:3132- Single line: `┌─┐│└┘` — Clean, modern33- Double line: `╔═╗║╚╝` — Bold, formal, retro-mainframe34- Rounded: `╭─╮│╰╯` — Soft, friendly, modern35- Heavy: `┏━┓┃┗┛` — Strong, industrial36- Dashed/Dotted: `┄┆` — Light, airy, informal37- ASCII only: `+-+|` — Retro, universal compatibility38- Block characters: `█▀▄▌▐` — Chunky, bold, brutalist39- Custom Unicode: Mix symbols like `◢◣◤◥`, `●○◐◑`, `▲▼◀▶` for unique frames4041Avoid defaulting to simple single-line boxes. Consider asymmetric borders, double-thick headers, or decorative corners like `◆`, `◈`, `✦`, `⬡`.4243## Color & Theme4445Commit to a cohesive palette. Terminal color strategies:4647- **ANSI 16:** Classic, universal. Craft distinctive combinations beyond default red/green/blue48- **256-color:** Rich palettes. Use color gradients, subtle background variations49- **True color (24-bit):** Full spectrum. Gradient text, smooth color transitions50- **Monochrome:** Single color with intensity variations (dim, normal, bold, reverse). Elegant constraint5152Create atmosphere with:5354- Background color blocks for sections55- Gradient fills using block characters `░▒▓█`56- Color-coded semantic meaning (but avoid cliché red=bad, green=good)57- Inverted/reverse video for emphasis58- Dim text for secondary information, bold for primary5960Palette examples (invent your own):6162- **Cyberpunk:** Hot pink `#ff00ff`, electric cyan `#00ffff`, deep purple `#1a0a2e` background63- **Amber terminal:** `#ffb000` on black, like vintage CRTs64- **Nord-inspired:** Cool blues and muted greens on dark blue-gray65- **Hot Dog Stand:** Intentionally garish yellow/red (for playful/ironic UIs)6667## Typography & Text Styling6869The terminal is ALL typography. Make it count:7071- **ASCII art headers:** Use figlet-style banners, custom letterforms, or Unicode art72- **Text weight:** Bold, dim, normal — create visual hierarchy73- **Text decoration:** Underline, strikethrough, italic (where supported)74- **Letter spacing:** Simulate with spaces for headers: `H E A D E R`75- **Case:** ALL CAPS for headers, lowercase for body, mixed for emphasis76- **Unicode symbols:** Enrich text with `→ • ◆ ★ ⚡ λ ∴ ≡ ⌘`77- **Custom bullets:** Replace `-` with `▸ ◉ ✓ ⬢ ›` or themed symbols7879ASCII Art Styles:8081```text82Block: ███████╗██╗██╗ ███████╗83Slant: /___ / / // / / ____/84Small: ╔═╗┌─┐┌─┐85Minimal: [ HEADER ]86```8788## Layout & Spatial Composition8990Break free from single-column output:9192- **Panels & Windows:** Create distinct regions with borders93- **Columns:** Side-by-side information using careful spacing94- **Tables:** Align data meaningfully, use Unicode table characters95- **Whitespace:** Generous padding inside panels, breathing room between sections96- **Density:** Match to purpose — dashboards can be dense, wizards should be sparse97- **Hierarchy:** Clear visual distinction between primary content, secondary info, and chrome98- **Asymmetry:** Off-center titles, weighted layouts, unexpected alignments99100## Motion & Animation101102Terminals support dynamic content:103104- **Spinners:** Beyond basic `|/-\`. Use Braille patterns `⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏`, dots `⣾⣽⣻⢿⡿⣟⣯⣷`, custom sequences105- **Progress bars:** `▓░`, `█▒`, `[=====> ]`, or creative alternatives like `◐◓◑◒`106- **Typing effects:** Reveal text character-by-character for drama107- **Transitions:** Wipe effects, fade in/out with color intensity108- **Live updates:** Streaming data, real-time charts109110## Data Display111112- **Sparklines:** `▁▂▃▄▅▆▇█` for inline mini-charts113- **Bar charts:** Horizontal bars with block characters114- **Tables:** Smart column sizing, alternating row colors, aligned numbers115- **Trees:** `├── └── │` for hierarchies116- **Status indicators:** `●` green, `○` empty, `◐` partial, `✓` complete, `✗` failed117- **Gauges:** `[████████░░]` with percentage118119## Decorative Elements120121Add character without clutter:122123- **Dividers:** `───── ═════ •••••• ░░░░░░ ≋≋≋≋≋≋`124- **Section markers:** `▶ SECTION`, `[ SECTION ]`, `─── SECTION ───`, `◆ SECTION`125- **Background textures:** Patterns using light characters like `· ∙ ░`126- **Icons:** Nerd Font icons if available: ``127128## Anti-Patterns to Avoid129130NEVER use generic terminal aesthetics like:131132- Plain unformatted text output133- Default colors without intentional palette134- Basic `[INFO]`, `[ERROR]` prefixes without styling135- Simple `----` dividers136- Walls of unstructured text137- Generic progress bars without personality138- Boring help text formatting139- Inconsistent spacing and alignment140141## Library Quick Reference142143| Framework | Language | Notes |144|-----------|----------|-------|145| **ratatui** | **Rust** | **gwt primary TUI framework** |146| xterm.js v6 | TypeScript | gwt-gui terminal emulation (Tauri WebView) |147| Rich, Textual | Python | General purpose |148| Bubbletea, Lipgloss | Go | General purpose |149| Ink, Blessed | Node.js | General purpose |150151### ANSI Escape Codes152153```text154\x1b[1m Bold155\x1b[3m Italic156\x1b[4m Underline157\x1b[31m Red foreground158\x1b[38;2;R;G;Bm True color159\x1b[2J Clear screen160```161162## Guiding Principle163164The terminal is a canvas with unique constraints and possibilities. Don't just print text — craft an experience.165166Match 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.
akiojin