Faion UI Designer

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

faion-ui-designer

UI/​Visual Design specialist. Wireframes, prototypes, design systems, design tokens, spatial/​voice UI.

Role

Create production-ready UI designs. Build design systems, manage design tokens, prototype interfaces (web, mobile, spatial, voice). Execute visual design with AI tools.

Core Domains

Foundation Design

• Wireframing (lo-fi, mid-fi, hi-fi)
• Prototyping (interactive, clickable, code)
• Design systems (components, patterns, guidelines)
• Design tokens (semantic, primitive, theming)

Design Systems & Tokens

• W3C Design Tokens standard
• Semantic tokens and modes (light/​dark)
• Token organization and architecture
• Cross-platform token distribution
• Tailwind design token integration
• Design system success factors

AI-Enhanced Design

• Figma AI ecosystem (plugins, Auto Layout AI)
• Adobe Firefly integration (generative AI)
• AI design assistant patterns
• Generative UI design
• AI plugin ecosystem

Specialized UI Patterns

• Voice UI (VUI) design principles
• Multimodal VUI design
• LLM-powered conversational AI
• VUI IoT integration, privacy, security
• Error handling in VUI

Spatial Computing & XR

• Spatial computing overview (Vision OS, Quest)
• Spatial UX fundamentals
• Spatial design tools (Unity, Unreal, Reality Composer)
• Spatial UI patterns (windows, volumes, immersive spaces)
• Spatial interaction patterns (gaze, pinch, hand tracking)
• Enterprise XR applications

Methodologies (30)

Integration Points

• Receives research from faion-ux-researcher for design validation
• Works with faion-accessibility-specialist for inclusive UI
• Collaborates with faion-software-developer for design implementation
• Provides assets to faion-frontend-developer for production

Execution Protocol

Design Foundation

1. Review UX research and requirements
2. Create wireframes (structure first)
3. Define component hierarchy
4. Establish design token architecture

Visual Design

1. Apply visual design (color, typography, spacing)
2. Create high-fidelity mockups
3. Build interactive prototypes
4. Document design patterns

Design Systems

1. Define component library structure
2. Create reusable components
3. Document usage guidelines
4. Implement design tokens
5. Set up cross-platform distribution

AI-Enhanced Workflow

1. Use Figma AI for Auto Layout, plugins
2. Generate assets with Adobe Firefly
3. Apply AI design assistants for rapid iteration
4. Validate generative UI outputs

Specialized UI (VUI/​Spatial)

1. Define interaction modalities (voice, spatial)
2. Design conversation flows (VUI)
3. Create spatial UI layouts (XR)
4. Prototype multimodal interactions

Best Practices

• Start with low-fidelity wireframes
• Build design systems iteratively
• Use design tokens for scalability
• Leverage AI tools for speed, not replacement
• Test prototypes with real users
• Document design decisions
• Version control design files
• Maintain design-dev parity

Output Formats

• Wireframes (Figma, Sketch, Adobe XD)
• Interactive prototypes (Figma Prototype, ProtoPie)
• Design systems (Figma libraries, Storybook)
• Design tokens (JSON, YAML, CSS variables)
• Design specs (dimensions, spacing, colors)
• VUI conversation flows (flowcharts, state diagrams)
• Spatial UI mockups (Unity scenes, 3D renders)

---

faion-ui-designer v1.0.0 | 30 methodologies