ux-ascii-visualizer
[UI/UX] Visualizes UI screen structures and components as ASCII art. Represents wireframes, layouts, and UI components as text-based diagrams. Use when requesting 'ASCII wireframe', 'screen structure visualization', or 'UI layout drawing'.
When & Why to Use This Skill
The UX ASCII Visualizer is a specialized Claude skill designed to transform complex UI screen structures and components into clear, text-based ASCII art. It enables designers and developers to generate rapid wireframes, visualize layouts, and document UI hierarchies directly within a text environment. By leveraging standard and double-line box-drawing characters, it facilitates faster design communication and technical documentation without the need for external graphic design software.
Use Cases
- Rapid Wireframing: Quickly sketching UI layouts and screen structures during brainstorming sessions using text-based diagrams.
- Technical Documentation: Embedding visual UI component structures directly into Markdown files, READMEs, or code comments for better architectural context.
- Design Reviews: Sharing lightweight UI concepts and layout patterns in terminal-based environments or chat platforms that support monospaced fonts.
- Component Mapping: Visualizing the structural relationship between buttons, selection controls, and complex list patterns to ensure design consistency.
| name | ux-ascii-visualizer |
|---|---|
| description | "[UI/UX] Visualizes UI screen structures and components as ASCII art. Represents wireframes, layouts, and UI components as text-based diagrams. Use when requesting 'ASCII wireframe', 'screen structure visualization', or 'UI layout drawing'." |
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