Faion UX UI Designer

Entry point: /faion-net — invoke this skill for automatic routing to the appropriate domain.

UX/UI Designer Orchestrator

Communication: User's language | Docs/code: English

Purpose

Orchestrates UX/UI design activities by coordinating specialized sub-skills. Routes tasks to appropriate specialists for research, design, or accessibility work.

Philosophy: "Design is not just what it looks like. Design is how it works." — Steve Jobs

Context Discovery

Auto-Investigation

Check for existing design artifacts and UI setup:

Read existing assets:

• Check existing components for design patterns
• Read Storybook stories for component API
• Review tailwind.config for design tokens

Discovery Questions

Use AskUserQuestion to understand UX/UI needs.

Q1: Design Phase

question: "What phase of design work are you in?"
header: "Phase"
multiSelect: false
options:
  - label: "Research (understand users)"
    description: "User interviews, testing, personas"
  - label: "Design (create solutions)"
    description: "Wireframes, prototypes, visual design"
  - label: "Evaluate (test designs)"
    description: "Usability testing, heuristic evaluation"
  - label: "Accessibility audit"
    description: "WCAG compliance, a11y improvements"

Routing:

• "Research" → Skill(faion-ux-researcher)
• "Design" → Skill(faion-ui-designer)
• "Evaluate" → Skill(faion-ux-researcher) → usability-testing
• "Accessibility" → Skill(faion-accessibility-specialist)

Q2: Design Fidelity (if Design phase)

question: "What fidelity of design do you need?"
header: "Fidelity"
multiSelect: false
options:
  - label: "Low-fi (wireframes, structure)"
    description: "Layout and flow, not visuals"
  - label: "High-fi (visual design)"
    description: "Colors, typography, polished UI"
  - label: "Design system / components"
    description: "Reusable component library"
  - label: "Code implementation"
    description: "Turn designs into working UI"

Routing:

• "Low-fi" → wireframing, information-architecture
• "High-fi" → visual-design, prototyping
• "Design system" → design-tokens, component-library
• "Code" → Coordinate with Skill(faion-frontend-developer)

Q3: User Access (if Research phase)

question: "Do you have access to real users?"
header: "Users"
multiSelect: false
options:
  - label: "Yes, can recruit users easily"
    description: "Have user base or recruitment budget"
  - label: "Limited (internal team, friends)"
    description: "Can do guerrilla testing"
  - label: "No user access"
    description: "Need proxy methods"

Context impact:

• "Easy access" → Full user interviews, usability testing
• "Limited" → Guerrilla testing, shorter sessions
• "No access" → Heuristic evaluation, competitor analysis, personas from research

Q4: Platform (affects design patterns)

question: "What platform are you designing for?"
header: "Platform"
multiSelect: true
options:
  - label: "Web (desktop)"
    description: "Desktop browser experience"
  - label: "Web (mobile responsive)"
    description: "Mobile-first or responsive"
  - label: "Native mobile app"
    description: "iOS or Android native"
  - label: "Voice UI"
    description: "Voice assistants, conversational"

Context impact:

• "Desktop" → Standard web patterns, larger screens
• "Mobile responsive" → Mobile-first, touch targets, responsive
• "Native mobile" → Platform guidelines (HIG, Material)
• "Voice UI" → VUI methodologies, conversation design

Architecture

faion-ux-ui-designer (orchestrator)
├── faion-ux-researcher (30 methodologies)
│   └── Research, testing, personas, journey mapping
├── faion-ui-designer (30 methodologies)
│   └── Wireframes, prototypes, design systems, VUI, spatial
└── faion-accessibility-specialist (22 methodologies)
    └── WCAG, ADA, a11y testing, heuristics

Total: 82 methodologies

Sub-Skills

Quick Decision Guide

Common Workflows

Discovery Phase

1. faion-ux-researcher: User interviews
2. faion-ux-researcher: Competitive analysis
3. faion-ux-researcher: Personas
4. faion-ux-researcher: Journey mapping

Design Phase

1. faion-ui-designer: Wireframing
2. faion-ui-designer: Prototyping
3. faion-ui-designer: Design systems (if needed)

Validation Phase

1. faion-accessibility-specialist: Heuristic evaluation
2. faion-ux-researcher: Usability testing
3. faion-accessibility-specialist: WCAG audit

Full Cycle

1. faion-ux-researcher: Discovery
2. faion-ui-designer: Design
3. faion-accessibility-specialist: A11y validation
4. faion-ux-researcher: User testing
5. Iterate

Execution Protocol

Task Analysis

1. Identify task domain (research, design, or a11y)
2. Determine if single or multi-domain task
3. Route to appropriate sub-skill(s)

Single-Domain Tasks

Task → Identify domain → Invoke sub-skill → Return results

Multi-Domain Tasks

Task → Break into phases → Invoke sub-skills sequentially → Synthesize results

Coordination

• Pass research findings from ux-researcher to ui-designer
• Send designs from ui-designer to accessibility-specialist for validation
• Loop back to ux-researcher for user testing validation
• Maintain consistent artifacts across sub-skills

Integration Points

Output Formats

Orchestrator outputs depend on sub-skills invoked:

From faion-ux-researcher

• Research reports
• Personas
• Journey maps
• Usability test results
• Competitive analysis matrices

From faion-ui-designer

• Wireframes and prototypes
• Design system documentation
• Design tokens (JSON/YAML)
• VUI conversation flows
• Spatial UI mockups

From faion-accessibility-specialist

• WCAG audit reports
• ADA compliance documentation
• Heuristic evaluation reports
• Assistive technology test results
• VPAT documents

Navigation

For detailed methodologies, see sub-skill documentation:

• faion-ux-researcher SKILL.md - Research methodologies
• faion-ui-designer SKILL.md - Design methodologies
• faion-accessibility-specialist SKILL.md - Accessibility methodologies

Sources

• Nielsen Norman Group - 10 Usability Heuristics
• IDEO Design Kit - Human-Centered Design
• WCAG 2.2 - Accessibility
• Material Design - Google Design System
• Human Interface Guidelines - Apple Design

UX/UI Designer Orchestrator v3.0 82 Methodologies | 3 Sub-Skills | Specialized Routing