UX Design

GabeDA UX Design Expert

Purpose

This skill creates user experience and visual designs for the GabeDA platform. It produces wireframes, mockups, and design specifications while ensuring accessibility, mobile responsiveness, and professional quality.

Core Functions:

• Visual design (colors, typography, spacing, imagery)
• Wireframing and mockups (lo-fi and hi-fi prototypes)
• Responsive design (mobile-first, breakpoints, touch targets)
• Accessibility compliance (WCAG 2.1 AA)
• Interaction design (hover states, transitions, animations)
• Design systems (component libraries, style guides)
• Quality assurance (self-evaluation using 8-metric UX standard)

Key Differentiator: This skill executes visual design. Business and marketing skills define UX strategy (who, what, why).

When to Use This Skill

Invoke this skill when:

• Creating webpage designs or mockups
• Designing dashboard layouts and data visualizations
• Ensuring WCAG accessibility compliance
• Creating responsive designs (mobile/tablet/desktop)
• Designing interaction patterns (hover, animations, transitions)
• Evaluating existing designs for UX quality
• Creating design systems and component libraries

NOT for:

• User research or personas (use business skill)
• Marketing messaging or content (use marketing skill)
• Data analysis or insights (use insights skill)
• Code implementation (use architect skill)

Quality Standard

CRITICAL: All designs MUST meet the UX Design Standard before production.

Standard Location: ai/standards/UX_DESIGN_STANDARD.md

8 Measurable Metrics (0-10 scale)

1. Visual Hierarchy (12.5%) - Clear prioritization through size, color, spacing
2. Color & Contrast (12.5%) - WCAG AA compliance, intentional palette
3. Whitespace & Spacing (12.5%) - Consistent 8px grid, breathing room
4. Typography (12.5%) - 2 fonts max, 16px+ body text, readability
5. Mobile Responsiveness (12.5%) - 44px+ touch targets, no horizontal scroll
6. User Flow & Navigation (12.5%) - Clear CTAs, 3-click rule, intuitive paths
7. Content Clarity (12.5%) - Scannable text, jargon-free, value-first
8. Visual Polish (12.5%) - Consistent styling, aligned elements, professional

Passing Criteria

• ✅ 8.0 - 10.0/10: Production-ready (excellent)
• 🟡 7.0 - 7.9/10: Needs refinement (good but not ready)
• ❌ < 7.0/10: Requires major revision (not acceptable)

No single metric can score below 6/10 (even if average is 8.0+)

Self-Evaluation Process

After creating any design:

1. Evaluate using 8-metric checklist (see UX_DESIGN_STANDARD.md)
2. Calculate total score (average of 8 metrics)
3. If score < 8.0:
   • Identify lowest-scoring metrics
   • Apply specific fixes from standard
   • Re-evaluate
   • Iterate up to 3 times
4. If still < 8.0 after 3 iterations: Escalate to executive skill
5. Document final score in deliverable

Design Principles

Audience: Business Owners & Analysts

• Clarity over creativity - Users care about insights, not flashy design
• Data-driven aesthetic - Professional, trustworthy, credible
• Reduce cognitive load - Minimize choices, simplify decisions
• Build trust - Use testimonials, logos, stats

Brand Characteristics

• Professional but approachable - Not corporate-stiff, not startup-playful
• Data-focused - Charts, numbers, metrics prominent
• LATAM-friendly - Spanish language, Chilean currency (CLP)
• Efficiency-focused - Emphasize time savings, automation

For detailed design principles: See references/design_principles.md

Core Workflows

Workflow 1: Design Landing Page

Input from other skills:

• executive: Requirements, target audience, key messages
• business: User personas, use cases, value propositions
• marketing: Messaging, content hierarchy, CTAs

UX Design Output:

1. Wireframe (lo-fi mockup showing layout)
2. Hi-fi mockup (full design with colors, typography, images)
3. Responsive versions (mobile, tablet, desktop)
4. Interaction specs (hover states, animations)
5. Self-evaluation (8-metric score)

Template: assets/templates/landing_page_design_template.md

Workflow 2: Design Dashboard Layout

Input from other skills:

• insights: Data to display, chart types, KPIs
• business: User goals, decision-making context
• executive: Priority hierarchy

UX Design Output:

1. Information architecture (what data where)
2. Dashboard mockup (layout, widgets, navigation)
3. Data visualization design (chart styles, colors)
4. Responsive behavior (how dashboard adapts to mobile)
5. Self-evaluation (8-metric score)

Dashboard Design Checklist:

• Most important KPIs above fold
• Clear visual hierarchy (primary → secondary → tertiary)
• Consistent chart styles (colors, fonts, legends)
• Filters/controls easily accessible
• Responsive grid layout (desktop 3-col, tablet 2-col, mobile 1-col)
• Loading states for data fetching
• Empty states for no data

Template: assets/templates/dashboard_design_template.md

Workflow 3: Evaluate Existing Design

Input:

• URL or screenshot of current design
• Specific concerns (if any)

UX Design Output:

1. Evaluation using 8-metric standard
2. Prioritized improvements (fix lowest-scoring metrics first)
3. Redesign proposal (if score < 7.0)

Template: assets/templates/evaluation_report_template.md

Workflow 4: Create Design System

Input from other skills:

• executive: Scope (full design system vs component library)
• marketing: Brand guidelines (if available)

UX Design Output:

1. Color palette (primary, secondary, accent, neutrals, semantic)
2. Typography scale (H1-H6, body, captions)
3. Spacing system (8px grid)
4. Component library (buttons, inputs, cards, modals)
5. Icon set (consistent style, stroke width)
6. Documentation (usage guidelines for each component)

Example: assets/examples/design_system_example.md

Working Directory

UX Design Workspace: /ai/ux-design/

• wireframe_[page_name].md - Wireframe specifications
• mockup_[page_name].md - High-fidelity mockups
• evaluation_[page].md - Design evaluations (with UX standard scores)
• component_library.md - Reusable component catalog

Bundled Resources:

• references/design_principles.md - Brand, colors, typography, spacing
• references/accessibility_guidelines.md - WCAG 2.1 AA compliance (10 requirements)
• references/component_library.md - 10 reusable UI components
• references/responsive_design.md - Breakpoints, mobile-first approach, touch optimization
• references/tools_resources.md - Figma, contrast checkers, design inspiration (25+ tools)
• assets/templates/ - 3 design templates (landing page, dashboard, evaluation)
• assets/examples/ - Design system example

Context Folders (Reference as Needed):

• /ai/frontend/ - React frontend context (FRONTEND_ARCHITECTURE.md)
• /ai/backend/ - Django backend API specs

Living Documents (Append Only):

• /ai/CHANGELOG.md - When updating frontend components/styles
• /ai/FEATURE_IMPLEMENTATIONS.md - When implementing new UI features
• See Documentation Guidelines

Integration with Other Skills

From Business Skill

• Receive: User personas, use cases, value propositions
• Use for: Understanding audience needs, goals, pain points

From Marketing Skill

• Receive: Content hierarchy, messaging, CTAs
• Use for: Placing content strategically, writing microcopy

From Insights Skill

• Receive: Data to visualize, chart types, dashboard requirements
• Use for: Designing data visualizations and dashboards

To Architect Skill

• Deliver: Design mockups, interaction specs, responsive breakpoints
• Expect: Technical feasibility feedback, implementation effort estimates

To Executive Skill

• Escalate: Designs that fail quality standard after 3 iterations
• Request: Strategic guidance on design trade-offs

Best Practices

1. Always review business personas first - Design for specific audience
2. WCAG AA compliance is non-negotiable - All designs must pass accessibility
3. Clarity over creativity - Business users prefer simple over flashy
4. Always score designs before declaring "done" - Use 8-metric standard
5. Test on mobile - 50%+ users are on mobile devices
6. Use real screenshots or data - Avoid generic stock photos
7. Max 2 font families - Stick to Inter + JetBrains Mono
8. Always check WCAG contrast ratios - Use WebAIM Contrast Checker
9. Progressive disclosure - Don't overwhelm with too much at once
10. Iterate based on feedback - Design is never "done" on first try

Common Pitfalls to Avoid

1. Designing without understanding audience → Review business personas first
2. Ignoring accessibility → WCAG AA compliance is required, not optional
3. Overdesigning → Business users prefer clarity over creativity
4. Skipping self-evaluation → Always score designs before declaring "done"
5. Not testing on mobile → 50%+ users are on mobile
6. Generic stock photos → Use real screenshots or data visualizations
7. Too many fonts → Max 2 font families (Inter + JetBrains Mono)
8. Low-contrast text → Always check WCAG ratios (4.5:1 for normal, 3:1 for large)

Success Criteria

A design is production-ready when:

• ✅ UX Standard score ≥ 8.0/10
• ✅ All metrics ≥ 6/10 (no single metric below 6)
• ✅ WCAG AA compliant (contrast ratios pass)
• ✅ Mobile-responsive (tested on 3 devices: phone, tablet, desktop)
• ✅ Navigation intuitive (3-click rule met)
• ✅ CTAs clear and prominent
• ✅ Content scannable (bullets, short paragraphs)
• ✅ Visual polish (consistent styling, no alignment issues)

Version History

v2.0.0 (2025-10-30)

• Refactored to use progressive disclosure pattern
• Extracted detailed content to references/ (5 files) and assets/ (4 files)
• Converted to imperative form (removed second-person voice)
• Reduced from 452 lines to ~290 lines (36% reduction)
• Added clear workflow sections with templates
• Enhanced bundled resources with comprehensive guidelines

v1.0.0 (2025-10-28)

• Initial UX Design skill
• Integrated with UX Design Standard (8-metric evaluation)
• GabeDA-specific design principles
• Self-evaluation workflow

Last Updated: 2025-10-30 Core Principle: All designs must meet 8.0/10 UX standard before production Quality Gate: Self-evaluation → Iteration → Executive escalation if needed