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:
| Signal | How to Check | What It Tells Us |
|---|---|---|
| Figma links | Grep("figma.com", "**/*.md") | Design files exist |
| Storybook | Glob("**/.storybook/*") | Component library exists |
| Design tokens | Glob("**/tokens.*") | Design system exists |
| Tailwind config | Glob("**/tailwind.config.*") | Tailwind used |
| a11y config | Grep("eslint-plugin-jsx-a11y", "**/package.json") | A11y linting enabled |
| User personas | Glob("**/personas*.md") | User research done |
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
yaml
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)
yaml
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)
yaml
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)
yaml
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
code
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
| Sub-Skill | Focus | Methodologies | Location |
|---|---|---|---|
| faion-ux-researcher | User research, testing, analysis | 30 | ~/.claude/skills/faion-ux-researcher |
| faion-ui-designer | Wireframes, prototypes, design systems, VUI, spatial | 30 | ~/.claude/skills/faion-ui-designer |
| faion-accessibility-specialist | WCAG, ADA, a11y testing, heuristics | 22 | ~/.claude/skills/faion-accessibility-specialist |
Quick Decision Guide
| If you need... | Route to | Examples |
|---|---|---|
| Research & Understanding | faion-ux-researcher | User interviews, surveys, usability testing, personas, journey maps, competitive analysis |
| Design Solutions | faion-ui-designer | Wireframes, prototypes, design systems, design tokens, VUI, spatial UI, Figma/Adobe |
| Accessibility & Compliance | faion-accessibility-specialist | WCAG 2.2, ADA, a11y testing, heuristic evaluation, assistive tech |
| Multi-domain tasks | Multiple sub-skills | Discovery (research → design), validation (design → a11y), full cycle (research → design → a11y) |
Common Workflows
Discovery Phase
code
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
code
1. faion-ui-designer: Wireframing 2. faion-ui-designer: Prototyping 3. faion-ui-designer: Design systems (if needed)
Validation Phase
code
1. faion-accessibility-specialist: Heuristic evaluation 2. faion-ux-researcher: Usability testing 3. faion-accessibility-specialist: WCAG audit
Full Cycle
code
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
- •Identify task domain (research, design, or a11y)
- •Determine if single or multi-domain task
- •Route to appropriate sub-skill(s)
Single-Domain Tasks
code
Task → Identify domain → Invoke sub-skill → Return results
Multi-Domain Tasks
code
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
| External Skill | Collaboration |
|---|---|
| faion-product-manager | Receives product requirements, provides research insights |
| faion-software-developer | Provides design specs, receives implementation questions |
| faion-marketing-manager | Collaborates on landing pages, conversion optimization |
| faion-researcher | Shares market research, personas, competitor insights |
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