majiayu000 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)
┌───┬───┐ ╭───────╮
│ │ │ │ round │
├───┼───┤ ╰───────╯
│ │ │
└───┴───┘
Emphasis Box (Double Line)
╔═══╦═══╗
║ ║ ║
╠═══╬═══╣
║ ║ ║
╚═══╩═══╝
UI Component Symbols
Buttons
[Primary Button] ← Primary button
[[Strong Action]] ← Emphasized button
( Cancel ) ← Cancel/secondary button
[+] [−] [×] [↻] ← Icon buttons
Selection Controls
(●) Selected ← Radio (selected)
(○) Unselected ← Radio (unselected)
[✓] Checked ← Checkbox (selected)
[ ] Unchecked ← Checkbox (unselected)
List & Tree
▶ Collapsed Item ← Collapsed item
▼ Expanded Item ← Expanded item
├─ Child 1
├─ Child 2
└─ Child 3
Layout Patterns
3-Column Layout (Archon Style)
┌──────────┬────────────────┬──────────────────┐
│ 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