faion-ui-designer Skill

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.

Context Discovery

Auto-Investigation

Check these signals before starting design work:

| Signal | Location | What to Check | |--------|----------|---------------| | Design system | Figma library, Storybook | Existing components, patterns | | Design tokens | tokens.json, tailwind.config.js | Current token structure | | Brand guidelines | .aidocs/product_docs/brand/ | Colors, typography, spacing | | UX research | .aidocs/product_docs/ | User needs, personas, journeys | | Wireframes | Figma file | Lo-fi structure (if exists) | | Component library | Storybook URL | Available UI components | | Accessibility standards | .aidocs/constitution.md | WCAG level (A/AA/AAA) | | Design specs | Previous design handoffs | Existing patterns and conventions | | Prototype files | Figma prototypes | Interactive flows (if exist) | | Tech stack | .aidocs/constitution.md | Frontend framework, CSS approach |

Discovery Questions

- question: "What are you designing?"
  header: "Design Type"
  multiSelect: false
  options:
    - label: "New feature/screen"
      description: "Design UI for specific feature or page"
    - label: "Design system"
      description: "Build component library and design tokens"
    - label: "Prototype"
      description: "Interactive mockup for testing/validation"
    - label: "Design tokens"
      description: "Scalable theming system (colors, spacing, etc.)"
    - label: "Voice UI (VUI)"
      description: "Conversational interface design"
    - label: "Spatial UI (XR)"
      description: "3D/immersive interface design"

- question: "Do you have a design system?"
  header: "Design System Status"
  multiSelect: false
  options:
    - label: "Yes, mature design system"
      description: "Established components, tokens, documentation"
    - label: "Partial design system"
      description: "Some components, needs expansion"
    - label: "No design system"
      description: "Starting from scratch"

- question: "What fidelity do you need?"
  header: "Design Fidelity"
  multiSelect: false
  options:
    - label: "Low-fidelity wireframes"
      description: "Structure and layout only, no visual design"
    - label: "Mid-fidelity mockups"
      description: "Some styling, greyscale or basic colors"
    - label: "High-fidelity designs"
      description: "Pixel-perfect, production-ready visuals"
    - label: "Interactive prototype"
      description: "Clickable flows for testing"

- question: "What platform(s) are you targeting?"
  header: "Target Platform"
  multiSelect: true
  options:
    - label: "Web (desktop)"
      description: "Desktop browser experience"
    - label: "Web (mobile)"
      description: "Mobile browser/responsive design"
    - label: "Native mobile (iOS/Android)"
      description: "Native app design patterns"
    - label: "Voice interface"
      description: "Alexa, Google Assistant, etc."
    - label: "Spatial/XR"
      description: "Vision Pro, Quest, AR/VR"

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

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

Agent Skills: faion-ui-designer

Install this agent skill to your local

Skill Files