UX Wireframe Designer by williamzujkowski/cognitive-toolworks

Purpose & When-To-Use

Use this skill when you need to:

Translate user stories into visual wireframes and user flows
Design the structure and navigation of a new application or feature
Communicate interaction patterns to developers and stakeholders
Plan responsive layouts for multi-device experiences
Validate UX design against accessibility standards

Skip this skill if you need high-fidelity visual design (use a design tool like Figma) or interactive prototypes (use frontend-framework-advisor for code-based prototypes).

Pre-Checks

Verify time context: Compute NOW_ET = 2025-10-26T12:00:00-04:00 (accessed via NIST/time.gov semantics)
Validate inputs:
- User stories are clear with actor, action, and goal
- Target platform specified (defaults to responsive web)
- Fidelity level matches project stage (low for discovery, medium for development)
Check design standards (accessed NOW_ET):
- WCAG 2.1 AA guidelines (https://www.w3.org/WAI/WCAG21/quickref/, accessed 2025-10-26)
- Nielsen Norman Group UX heuristics (https://www.nngroup.com/, accessed 2025-10-26)
- Material Design or Human Interface Guidelines (platform-specific)

Procedure

T1: Fast Path (≤2k tokens) - Simple Wireframe

For single-screen layouts or basic user flows (3-5 screens):

Screen inventory (150 tokens):
- List screens/views from user stories
- Identify primary actions per screen
- Note navigation paths
Layout wireframe (300 tokens):
- Define page regions (header, content, sidebar, footer)
- Place primary UI components (buttons, forms, lists)
- Label interactive elements
User flow diagram (250 tokens):
- Map screen transitions
- Show decision points (if/else logic)
- Indicate success and error paths
Basic annotations (100 tokens):
- Component labels (e.g., "Primary CTA Button")
- Interaction notes (e.g., "Click to expand")
- Navigation indicators
Output (≤1.2k tokens):
- Mermaid flowchart for user flow
- ASCII or simple SVG wireframe
- Component list with descriptions

T2: Standard Path (≤6k tokens) - Multi-Screen Mockup

For complex flows with 5-15 screens and responsive requirements:

All T1 steps (800 tokens)
Responsive layouts (800 tokens):
- Define breakpoints (mobile: 320-480px, tablet: 481-1024px, desktop: 1025px+)
- Show layout variations per breakpoint
- Document stacking order and hidden elements
Component specifications (1k tokens):
- Input fields with validation states (default, focus, error, success)
- Button states (default, hover, active, disabled)
- Loading and empty states
- Modal and overlay behaviors
Accessibility markup (600 tokens):
- ARIA labels for screen readers
- Keyboard navigation order (tab index)
- Color contrast ratios (4.5:1 for text, 3:1 for UI)
- Focus indicators and skip links
Interaction specifications (1k tokens):
- User actions and system responses
- State transitions (idle → loading → success/error)
- Animation timing (subtle, 200-300ms)
- Error handling and recovery flows
Documentation (≤2.8k tokens):
- Complete user flow with annotations
- Responsive wireframes for 3 breakpoints
- Accessibility checklist
- Component interaction table

T3: Deep Dive (≤12k tokens) - Full Interactive Prototype Spec

For large applications requiring detailed interaction design and user research validation:

All T2 steps (≤6k tokens)
Advanced interactions (1.5k tokens):
- Gesture support (swipe, pinch, long-press for mobile)
- Drag-and-drop specifications
- Multi-step form flows with progress indicators
- Real-time updates and optimistic UI patterns
Micro-interactions (1k tokens):
- Hover effects and transitions
- Loading skeletons and placeholders
- Toast notifications and alerts
- Contextual help and tooltips
User research integration (800 tokens):
- Usability testing scenarios
- A/B testing variations
- Analytics instrumentation points
- Heatmap and session replay considerations
Design system integration (1k tokens):
- Component mapping to existing design system
- New component specifications if needed
- Typography scale and spacing system
- Color palette and semantic tokens
Comprehensive documentation (≤2.7k tokens):
- Full interactive prototype specification
- User flow with 15+ screens
- Accessibility compliance report
- Developer handoff notes with edge cases

Decision Rules

When to escalate complexity tier:

T1 → T2: More than 5 screens, OR responsive design required, OR accessibility compliance mandatory
T2 → T3: More than 15 screens, OR complex interactions (drag-drop, gestures), OR integration with existing design system

Fidelity level selection:

Low-fidelity (wireframe): Discovery phase, rapid iteration, stakeholder alignment
Medium-fidelity (mockup): Development-ready specs, detailed component behavior
High-fidelity (prototype): User testing, stakeholder demos, marketing materials (skip this skill, use design tools)

When to abort:

User stories are too vague (missing actor/action/goal) → request clarification
Conflicting requirements (e.g., "simple" and "feature-rich") → document trade-offs
Platform not supported → emit TODO: "Add support for [platform]"

Output Contract

Required fields:

wireframe_diagrams: string  # Mermaid flowchart or ASCII/SVG wireframes
interaction_spec: object  # Component behaviors and state transitions
screen_list: array  # Ordered list of screens with descriptions

Optional fields:

responsive_layouts: object  # Breakpoint-specific wireframes
accessibility_notes: array  # WCAG compliance checklist
design_system_components: array  # Mapped or new components
user_flow_diagram: string  # Mermaid flowchart

Format: Markdown document with embedded diagrams, or JSON/YAML with diagram references

Examples

%% User flow: Login and dashboard (T1 example, ≤30 lines)
graph TD
  A[Landing Page] -->|Click Login| B[Login Screen]
  B -->|Enter Credentials| C{Validate}
  C -->|Success| D[Dashboard]
  C -->|Invalid| E[Error Message]
  E -->|Retry| B
  D -->|View Profile| F[Profile Screen]
  D -->|Logout| A

  style A fill:#e1f5ff
  style D fill:#c8e6c9
  style E fill:#ffcdd2

## Login Screen Wireframe
+----------------------------------+
| [Logo]          [Help] [Sign Up] |
+----------------------------------+
|        Welcome Back!             |
|                                  |
|  Email    [..................]   |
|  Password [..................] 👁 |
|                                  |
|  [ ] Remember me  [Forgot?]      |
|  [    Login    ]                 |
+----------------------------------+

Interactions:
- Email/password fields validate on blur, show inline errors
- Eye icon toggles password visibility
- Login button disabled until valid input, shows spinner on click