UX ASCII Visualizer
A skill that visualizes UI screen structures and components as ASCII art.
When to Use
- •Visualizing screen layouts as text
- •Quick wireframe sketching
- •Documenting UI component structures
- •Creating visual materials for design reviews
Box Drawing Character Set
Basic Box (Single Line)
code
┌───┬───┐ ╭───────╮ │ │ │ │ round │ ├───┼───┤ ╰───────╯ │ │ │ └───┴───┘
Emphasis Box (Double Line)
code
╔═══╦═══╗ ║ ║ ║ ╠═══╬═══╣ ║ ║ ║ ╚═══╩═══╝
UI Component Symbols
Buttons
code
[Primary Button] ← Primary button [[Strong Action]] ← Emphasized button ( Cancel ) ← Cancel/secondary button [+] [−] [×] [↻] ← Icon buttons
Selection Controls
code
(●) Selected ← Radio (selected) (○) Unselected ← Radio (unselected) [✓] Checked ← Checkbox (selected) [ ] Unchecked ← Checkbox (unselected)
List & Tree
code
▶ Collapsed Item ← Collapsed item ▼ Expanded Item ← Expanded item ├─ Child 1 ├─ Child 2 └─ Child 3
Layout Patterns
3-Column Layout (Archon Style)
code
┌──────────┬────────────────┬──────────────────┐ │ Sidebar │ List Panel │ Detail Panel │ │ │ │ │ │ ▼ Group1 │ ┌────────────┐ │ ┌──────────────┐ │ │ Item1 │ │ List Item 1│ │ │ Content │ │ │ Item2 │ ├────────────┤ │ └──────────────┘ │ │ │ │ List Item 2│ │ │ │ ▼ Group2 │ └────────────┘ │ [Save] [Cancel] │ └──────────┴────────────────┴──────────────────┘
Constraints
- •Width should not exceed 80 characters (terminal compatibility)
- •Consider CJK characters occupy 2 spaces for alignment
- •Split complex screens into multiple diagrams