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