SKILL.md
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-researcherfor design validation - Works with
faion-accessibility-specialistfor inclusive UI - Collaborates with
faion-software-developerfor design implementation - Provides assets to
faion-frontend-developerfor production
Execution Protocol
Design Foundation
- Review UX research and requirements
- Create wireframes (structure first)
- Define component hierarchy
- Establish design token architecture
Visual Design
- Apply visual design (color, typography, spacing)
- Create high-fidelity mockups
- Build interactive prototypes
- Document design patterns
Design Systems
- Define component library structure
- Create reusable components
- Document usage guidelines
- Implement design tokens
- Set up cross-platform distribution
AI-Enhanced Workflow
- Use Figma AI for Auto Layout, plugins
- Generate assets with Adobe Firefly
- Apply AI design assistants for rapid iteration
- Validate generative UI outputs
Specialized UI (VUI/Spatial)
- Define interaction modalities (voice, spatial)
- Design conversation flows (VUI)
- Create spatial UI layouts (XR)
- 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