菜单
[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'.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| 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'. |
A skill that visualizes UI screen structures and components as ASCII art.
┌───┬───┐ ╭───────╮
│ │ │ │ round │
├───┼───┤ ╰───────╯
│ │ │
└───┴───┘
╔═══╦═══╗
║ ║ ║
╠═══╬═══╣
║ ║ ║
╚═══╩═══╝
[Primary Button] ← Primary button
[[Strong Action]] ← Emphasized button
( Cancel ) ← Cancel/secondary button
[+] [−] [×] [↻] ← Icon buttons
(●) Selected ← Radio (selected)
(○) Unselected ← Radio (unselected)
[✓] Checked ← Checkbox (selected)
[ ] Unchecked ← Checkbox (unselected)
▶ Collapsed Item ← Collapsed item
▼ Expanded Item ← Expanded item
├─ Child 1
├─ Child 2
└─ Child 3
┌──────────┬────────────────┬──────────────────┐
│ Sidebar │ List Panel │ Detail Panel │
│ │ │ │
│ ▼ Group1 │ ┌────────────┐ │ ┌──────────────┐ │
│ Item1 │ │ List Item 1│ │ │ Content │ │
│ Item2 │ ├────────────┤ │ └──────────────┘ │
│ │ │ List Item 2│ │ │
│ ▼ Group2 │ └────────────┘ │ [Save] [Cancel] │
└──────────┴────────────────┴──────────────────┘
[Utility] Analyzes user prompts and efficiently loads only relevant rule documents. Auto-generates category-document mapping config file on first invocation by scanning project documents. Supports both automatic and manual invocation. (project)
[Dev] Extracts and organizes best practices for a given topic into a minimal tree structure (max depth 3, max 5 children per node). Use during task planning when writing subtasks in Docs/{name}_Task.md - output is added under each subtask as a concise reference guide. Pure reasoning task with strict formatting rules: keywords/noun phrases only, no prose. (project)
[Utility] Analyzes user prompts and efficiently loads only relevant rule documents. Auto-generates category-document mapping config file on first invocation by scanning project documents. Supports both automatic and manual invocation. (project)
[Design System] Quantitative accessibility audit for UI - contrast ratios, font sizes, tap targets, heading hierarchy. Use when (1) checking WCAG color contrast compliance, (2) auditing text sizes for readability, (3) validating touch/click target sizes, (4) reviewing heading structure and landmarks, (5) user asks to 'check accessibility', 'audit contrast', 'WCAG compliance', or 'a11y check'.
[Aesthetics] Positions aesthetics within art/design history, identifies what traditions it echoes, and spots clichés, generic trends, and AI-slop patterns to avoid. Outputs Critical Notes as Memo nodes in Brain canvas.
[Aesthetics] Maps aesthetic briefs to cultural references: art movements, photography, film, architecture, music, fashion. Outputs reference lists with visual language analysis. Organizes findings as Image and Memo nodes in Brain canvas.