faion-ui-designer skill

---
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*