faion-ui-designer

name	faion-ui-designer
description	UI design: wireframes, prototypes, design systems, visual design.
user-invocable	false

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)

Method	Use Case	Output
Wireframing	Structure definition	Lo-fi/hi-fi wireframes
Prototyping	Interaction validation	Interactive prototypes
Design tokens	Scalable theming	Token files (JSON/YAML)
Design systems	Component library	Design system docs, Figma lib
Figma AI ecosystem	AI-assisted design	AI-enhanced designs
Adobe Firefly	Generative assets	AI-generated images/graphics
Voice UI basics	VUI foundation	VUI design specs
Spatial UX fundamentals	XR foundation	Spatial design guidelines
Semantic tokens	Theme architecture	Semantic token structure
Cross-platform tokens	Multi-platform design	Platform-specific tokens
Tailwind tokens	Utility-first design	Tailwind config with tokens
W3C tokens standard	Standards compliance	Standard-compliant tokens
AI design assistants	Rapid iteration	AI-assisted mockups
Generative UI	Automated UI generation	Generated UI components
Multimodal VUI	Multi-input interfaces	Multimodal VUI flows
LLM conversational AI	AI chat interfaces	Conversational UI patterns
Spatial design tools	XR authoring	3D UI scenes
Spatial UI patterns	XR interface design	Spatial components
Enterprise XR apps	Business XR solutions	XR app designs
VUI IoT integration	Smart device UIs	IoT VUI patterns

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