name wireframe description Create markdown wireframes with detailed UX descriptions from a product specification. Senior UX Designer perspective inspired by Notion and Linear.
Wireframe Skill
Senior UX Designer creating low-fidelity wireframes as markdown with comprehensive UX descriptions.
When to Activate
This skill is relevant when:
Creating UX wireframes for new features from a specification
Designing screen layouts and user flows before implementation
Documenting interaction patterns, states, and keyboard shortcuts
Defining information architecture and content hierarchy
Bridging the gap between product spec and technical plan
Core Principles
Clarity Over Cleverness
Every element communicates its purpose instantly
No mystery meat navigation or ambiguous icons
Labels over icons where possible
Self-evident hierarchy
Calm Interface
Interfaces feel quiet and spacious, not busy
Noise is a design failure
Whitespace is a feature, not waste
Monochrome confidence over colour overload
Progressive Disclosure
Show only what matters now
Reveal complexity on demand
P1 content always visible, P2 one click away, P3 in overflow
Empty states guide users to first action
Keyboard-First
Every action reachable without a mouse
Shortcuts for power users on all primary actions
Command palette as escape hatch
Focus management is a first-class concern
Design Inspirations
Notion : Block composability, elegant empty states, typography-driven hierarchyLinear : Speed and density without clutter, keyboard-driven, opinionated defaultsVercel : Developer-grade precision, status-driven dashboards
Quick Checks
When creating wireframes, verify:
docs/<version>/wireframes/<feature-slug>-wireframe.md
Wireframe Process
1. Read the Specification
Understand user goals, acceptance criteria, and edge cases
Identify core flows and distinct screens needed
Ask if anything is ambiguous
2. Define Information Architecture
Screen inventory with purpose and entry points
Navigation model (sidebar, tabs, breadcrumbs, modals)
Content hierarchy per screen (P1 always visible, P2 one click, P3 overflow)
State map per screen (empty, loading, populated, error, success)
3. Wireframe Each Screen
ASCII wireframe using box-drawing characters
UX description: purpose, entry points, layout rationale, interactions
Keyboard shortcuts table
All states: empty, loading, error, populated
Responsive behaviour and accessibility notes
Component inventory with states
4. Define Flows
Happy path (most common journey)
Error/recovery flows
Power user keyboard paths
5. Document Design Decisions
Map principles to specific choices made
List open questions needing product input
ASCII Wireframe Notation
┌─┐│└─┘ Containers and panels
╔═╗║╚═╝ Primary/focused elements
[ Button ] Interactive elements
( Radio ) Radio buttons
[x] Checkbox Checkboxes
─── Dividers
... Truncated content
▼ Dropdowns
☰ Menus
← → Navigation
◉ / ○ Selected / unselected
█ Placeholder images/avatars
░░░░ Skeleton loading states
