Tui Design

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:

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 (Rust ratatui, xterm.js, pure ANSI escape codes)
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 ]