UX Wireframe Designer

name: UX Wireframe Designer
slug: ux-wireframe-designer
description: Design user experience wireframes, user flows, and interactive mockups for web and mobile applications using industry-standard notation
capabilities:
- Low-fidelity wireframe design for rapid prototyping
- User flow diagrams with decision points and error states
- Interactive mockup specifications with annotations
- Responsive design layouts (mobile, tablet, desktop)
- Accessibility considerations (WCAG 2.1 AA compliance)
inputs:
- user_stories: Feature requirements or user stories to visualize
- target_platform: web, mobile-ios, mobile-android, or cross-platform
- fidelity_level: low (wireframe), medium (mockup), high (interactive prototype)
- design_system: Optional existing design system or component library
outputs:
- wireframe_diagrams: Mermaid flowcharts or SVG wireframes
- interaction_spec: Detailed component behavior and state transitions
- responsive_layouts: Breakpoint designs for multiple screen sizes
- accessibility_notes: ARIA labels, keyboard navigation, color contrast requirements
keywords:
- UX
- wireframe
- mockup
- user-flow
- design
- prototype
- accessibility
- responsive
- WCAG
- interaction-design
version: 1.0.0
owner: cloud.gov OCS
license: Apache-2.0
security: Safe for design work; no executable code or sensitive data
links:
- https://www.nngroup.com/articles/wireflows/
- https://www.w3.org/WAI/WCAG21/quickref/
- https://mermaid.js.org/syntax/flowchart.html

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

1. Verify time context: Compute NOW_ET = 2025-10-26T12:00:00-04:00 (accessed via NIST/time.gov semantics)
2. Validate inputs:
3. User stories are clear with actor, action, and goal
4. Target platform specified (defaults to responsive web)
5. Fidelity level matches project stage (low for discovery, medium for development)
6. Check design standards (accessed NOW_ET):
7. WCAG 2.1 AA guidelines (https://www.w3.org/WAI/WCAG21/quickref/, accessed 2025-10-26)
8. Nielsen Norman Group UX heuristics (https://www.nngroup.com/, accessed 2025-10-26)
9. 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):

1. Screen inventory (150 tokens):
2. List screens/views from user stories
3. Identify primary actions per screen

4. Note navigation paths

5. Layout wireframe (300 tokens):

6. Define page regions (header, content, sidebar, footer)
7. Place primary UI components (buttons, forms, lists)

8. Label interactive elements

9. User flow diagram (250 tokens):

10. Map screen transitions
11. Show decision points (if/else logic)

12. Indicate success and error paths

13. Basic annotations (100 tokens):

14. Component labels (e.g., "Primary CTA Button")
15. Interaction notes (e.g., "Click to expand")

16. Navigation indicators

17. Output (≤1.2k tokens):

18. Mermaid flowchart for user flow
19. ASCII or simple SVG wireframe
20. Component list with descriptions

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

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

1. All T1 steps (800 tokens)

2. Responsive layouts (800 tokens):

3. Define breakpoints (mobile: 320-480px, tablet: 481-1024px, desktop: 1025px+)
4. Show layout variations per breakpoint

5. Document stacking order and hidden elements

6. Component specifications (1k tokens):

7. Input fields with validation states (default, focus, error, success)
8. Button states (default, hover, active, disabled)
9. Loading and empty states

10. Modal and overlay behaviors

11. Accessibility markup (600 tokens):

12. ARIA labels for screen readers
13. Keyboard navigation order (tab index)
14. Color contrast ratios (4.5:1 for text, 3:1 for UI)

15. Focus indicators and skip links

16. Interaction specifications (1k tokens):

17. User actions and system responses
18. State transitions (idle → loading → success/error)
19. Animation timing (subtle, 200-300ms)

20. Error handling and recovery flows

21. Documentation (≤2.8k tokens):

22. Complete user flow with annotations
23. Responsive wireframes for 3 breakpoints
24. Accessibility checklist
25. Component interaction table

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

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

1. All T2 steps (≤6k tokens)

2. Advanced interactions (1.5k tokens):

3. Gesture support (swipe, pinch, long-press for mobile)
4. Drag-and-drop specifications
5. Multi-step form flows with progress indicators

6. Real-time updates and optimistic UI patterns

7. Micro-interactions (1k tokens):

8. Hover effects and transitions
9. Loading skeletons and placeholders
10. Toast notifications and alerts

11. Contextual help and tooltips

12. User research integration (800 tokens):

13. Usability testing scenarios
14. A/B testing variations
15. Analytics instrumentation points

16. Heatmap and session replay considerations

17. Design system integration (1k tokens):

18. Component mapping to existing design system
19. New component specifications if needed
20. Typography scale and spacing system

21. Color palette and semantic tokens

22. Comprehensive documentation (≤2.7k tokens):

23. Full interactive prototype specification
24. User flow with 15+ screens
25. Accessibility compliance report
26. 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

Quality Gates

Token budgets:
- T1: ≤2k tokens (simple flows, 3-5 screens)
- T2: ≤6k tokens (responsive mockups, accessibility)
- T3: ≤12k tokens (interactive prototypes, design systems)

Safety checks:
- [ ] No personal data or real user information in examples
- [ ] Accessibility notes include WCAG 2.1 AA requirements
- [ ] All interactive elements have focus states documented
- [ ] Error states and recovery flows included

Validation:
- [ ] User flows have clear start and end states
- [ ] All screens are reachable from navigation
- [ ] Responsive layouts specify breakpoint behavior
- [ ] Component states cover default, hover, active, disabled, error

Determinism:
- Use Mermaid for flowcharts (consistent rendering)
- Define exact pixel breakpoints (not "small/medium/large")
- Specify color contrast ratios numerically

Resources

UX Best Practices (accessed 2025-10-26):
- Nielsen Norman Group: https://www.nngroup.com/articles/wireflows/
- Wireframing Guide: https://www.usability.gov/how-to-and-tools/methods/wireframing.html
- User Flow Patterns: https://www.uxpin.com/studio/blog/creating-perfect-user-flows/

Accessibility Standards (accessed 2025-10-26):
- WCAG 2.1 Quick Reference: https://www.w3.org/WAI/WCAG21/quickref/
- ARIA Authoring Practices: https://www.w3.org/WAI/ARIA/apg/
- Color Contrast Checker: https://webaim.org/resources/contrastchecker/

Platform Guidelines (accessed 2025-10-26):
- Material Design 3: https://m3.material.io/
- Apple Human Interface: https://developer.apple.com/design/human-interface-guidelines/
- Microsoft Fluent 2: https://fluent2.microsoft.design/

Tools:
- Mermaid diagrams: https://mermaid.js.org/
- Figma (high-fidelity): https://www.figma.com/
- Wireframe.cc (simple wireframes): https://wireframe.cc/

Related Skills:
- frontend-designsystem-validator - Validate against existing design systems
- frontend-framework-advisor - Recommend framework for implementation
- testing-unit-generator - Generate tests for component interactions