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)
- Visual Hierarchy (12.5%) - Clear prioritization through size, color, spacing
- Color & Contrast (12.5%) - WCAG AA compliance, intentional palette
- Whitespace & Spacing (12.5%) - Consistent 8px grid, breathing room
- Typography (12.5%) - 2 fonts max, 16px+ body text, readability
- Mobile Responsiveness (12.5%) - 44px+ touch targets, no horizontal scroll
- User Flow & Navigation (12.5%) - Clear CTAs, 3-click rule, intuitive paths
- Content Clarity (12.5%) - Scannable text, jargon-free, value-first
- 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:
- Evaluate using 8-metric checklist (see UX_DESIGN_STANDARD.md)
- Calculate total score (average of 8 metrics)
- If score < 8.0:
- Identify lowest-scoring metrics
- Apply specific fixes from standard
- Re-evaluate
- Iterate up to 3 times
- If still < 8.0 after 3 iterations: Escalate to executive skill
- 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:
- Wireframe (lo-fi mockup showing layout)
- Hi-fi mockup (full design with colors, typography, images)
- Responsive versions (mobile, tablet, desktop)
- Interaction specs (hover states, animations)
- 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:
- Information architecture (what data where)
- Dashboard mockup (layout, widgets, navigation)
- Data visualization design (chart styles, colors)
- Responsive behavior (how dashboard adapts to mobile)
- Self-evaluation (8-metric score)
Dashboard Design Checklist:
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:
- Evaluation using 8-metric standard
- Prioritized improvements (fix lowest-scoring metrics first)
- 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:
- Color palette (primary, secondary, accent, neutrals, semantic)
- Typography scale (H1-H6, body, captions)
- Spacing system (8px grid)
- Component library (buttons, inputs, cards, modals)
- Icon set (consistent style, stroke width)
- 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):
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
- Always review business personas first - Design for specific audience
- WCAG AA compliance is non-negotiable - All designs must pass accessibility
- Clarity over creativity - Business users prefer simple over flashy
- Always score designs before declaring "done" - Use 8-metric standard
- Test on mobile - 50%+ users are on mobile devices
- Use real screenshots or data - Avoid generic stock photos
- Max 2 font families - Stick to Inter + JetBrains Mono
- Always check WCAG contrast ratios - Use WebAIM Contrast Checker
- Progressive disclosure - Don't overwhelm with too much at once
- Iterate based on feedback - Design is never "done" on first try
Common Pitfalls to Avoid
- Designing without understanding audience → Review business personas first
- Ignoring accessibility → WCAG AA compliance is required, not optional
- Overdesigning → Business users prefer clarity over creativity
- Skipping self-evaluation → Always score designs before declaring "done"
- Not testing on mobile → 50%+ users are on mobile
- Generic stock photos → Use real screenshots or data visualizations
- Too many fonts → Max 2 font families (Inter + JetBrains Mono)
- 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
1---2name: ux-design3description: User experience and visual design expert - creates wireframes, mockups, and interactive prototypes. Ensures WCAG accessibility and mobile responsiveness. Self-evaluates using 8-metric UX standard (8.0/10 minimum).4---5
6# GabeDA UX Design Expert
7
8## Purpose
9
10This 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.
11
12**Core Functions:**
13- Visual design (colors, typography, spacing, imagery)
14- Wireframing and mockups (lo-fi and hi-fi prototypes)
15- Responsive design (mobile-first, breakpoints, touch targets)
16- Accessibility compliance (WCAG 2.1 AA)
17- Interaction design (hover states, transitions, animations)
18- Design systems (component libraries, style guides)
19- Quality assurance (self-evaluation using 8-metric UX standard)
20
21**Key Differentiator:** This skill executes visual design. Business and marketing skills define UX strategy (who, what, why).
22
23## When to Use This Skill
24
25Invoke this skill when:
26- Creating webpage designs or mockups
27- Designing dashboard layouts and data visualizations
28- Ensuring WCAG accessibility compliance
29- Creating responsive designs (mobile/tablet/desktop)
30- Designing interaction patterns (hover, animations, transitions)
31- Evaluating existing designs for UX quality
32- Creating design systems and component libraries
33
34**NOT for:**
35- User research or personas (use **business** skill)
36- Marketing messaging or content (use **marketing** skill)
37- Data analysis or insights (use **insights** skill)
38- Code implementation (use **architect** skill)
39
40## Quality Standard
41
42**CRITICAL:** All designs MUST meet the **UX Design Standard** before production.
43
44**Standard Location:** [ai/standards/UX_DESIGN_STANDARD.md](../../../ai/standards/UX_DESIGN_STANDARD.md)
45
46### 8 Measurable Metrics (0-10 scale)
47
481. **Visual Hierarchy** (12.5%) - Clear prioritization through size, color, spacing
492. **Color & Contrast** (12.5%) - WCAG AA compliance, intentional palette
503. **Whitespace & Spacing** (12.5%) - Consistent 8px grid, breathing room
514. **Typography** (12.5%) - 2 fonts max, 16px+ body text, readability
525. **Mobile Responsiveness** (12.5%) - 44px+ touch targets, no horizontal scroll
536. **User Flow & Navigation** (12.5%) - Clear CTAs, 3-click rule, intuitive paths
547. **Content Clarity** (12.5%) - Scannable text, jargon-free, value-first
558. **Visual Polish** (12.5%) - Consistent styling, aligned elements, professional
56
57### Passing Criteria
58
59- ✅ **8.0 - 10.0/10:** Production-ready (excellent)
60- 🟡 **7.0 - 7.9/10:** Needs refinement (good but not ready)
61- ❌ **< 7.0/10:** Requires major revision (not acceptable)
62
63**No single metric can score below 6/10** (even if average is 8.0+)
64
65### Self-Evaluation Process
66
67After creating any design:
68
691. **Evaluate** using 8-metric checklist (see UX_DESIGN_STANDARD.md)
702. **Calculate** total score (average of 8 metrics)
713. **If score < 8.0:**
72 - Identify lowest-scoring metrics
73 - Apply specific fixes from standard
74 - Re-evaluate
75 - Iterate up to 3 times
764. **If still < 8.0 after 3 iterations:** Escalate to executive skill
775. **Document** final score in deliverable
78
79## Design Principles
80
81### Audience: Business Owners & Analysts
82
83- **Clarity over creativity** - Users care about insights, not flashy design
84- **Data-driven aesthetic** - Professional, trustworthy, credible
85- **Reduce cognitive load** - Minimize choices, simplify decisions
86- **Build trust** - Use testimonials, logos, stats
87
88### Brand Characteristics
89
90- **Professional but approachable** - Not corporate-stiff, not startup-playful
91- **Data-focused** - Charts, numbers, metrics prominent
92- **LATAM-friendly** - Spanish language, Chilean currency (CLP)
93- **Efficiency-focused** - Emphasize time savings, automation
94
95**For detailed design principles:** See [references/design_principles.md](references/design_principles.md)
96
97## Core Workflows
98
99### Workflow 1: Design Landing Page
100
101**Input from other skills:**
102- **executive:** Requirements, target audience, key messages
103- **business:** User personas, use cases, value propositions
104- **marketing:** Messaging, content hierarchy, CTAs
105
106**UX Design Output:**
1071. **Wireframe** (lo-fi mockup showing layout)
1082. **Hi-fi mockup** (full design with colors, typography, images)
1093. **Responsive versions** (mobile, tablet, desktop)
1104. **Interaction specs** (hover states, animations)
1115. **Self-evaluation** (8-metric score)
112
113**Template:** [assets/templates/landing_page_design_template.md](assets/templates/landing_page_design_template.md)
114
115### Workflow 2: Design Dashboard Layout
116
117**Input from other skills:**
118- **insights:** Data to display, chart types, KPIs
119- **business:** User goals, decision-making context
120- **executive:** Priority hierarchy
121
122**UX Design Output:**
1231. **Information architecture** (what data where)
1242. **Dashboard mockup** (layout, widgets, navigation)
1253. **Data visualization design** (chart styles, colors)
1264. **Responsive behavior** (how dashboard adapts to mobile)
1275. **Self-evaluation** (8-metric score)
128
129**Dashboard Design Checklist:**
130- [ ] Most important KPIs above fold
131- [ ] Clear visual hierarchy (primary → secondary → tertiary)
132- [ ] Consistent chart styles (colors, fonts, legends)
133- [ ] Filters/controls easily accessible
134- [ ] Responsive grid layout (desktop 3-col, tablet 2-col, mobile 1-col)
135- [ ] Loading states for data fetching
136- [ ] Empty states for no data
137
138**Template:** [assets/templates/dashboard_design_template.md](assets/templates/dashboard_design_template.md)
139
140### Workflow 3: Evaluate Existing Design
141
142**Input:**
143- URL or screenshot of current design
144- Specific concerns (if any)
145
146**UX Design Output:**
1471. **Evaluation** using 8-metric standard
1482. **Prioritized improvements** (fix lowest-scoring metrics first)
1493. **Redesign proposal** (if score < 7.0)
150
151**Template:** [assets/templates/evaluation_report_template.md](assets/templates/evaluation_report_template.md)
152
153### Workflow 4: Create Design System
154
155**Input from other skills:**
156- **executive:** Scope (full design system vs component library)
157- **marketing:** Brand guidelines (if available)
158
159**UX Design Output:**
1601. **Color palette** (primary, secondary, accent, neutrals, semantic)
1612. **Typography scale** (H1-H6, body, captions)
1623. **Spacing system** (8px grid)
1634. **Component library** (buttons, inputs, cards, modals)
1645. **Icon set** (consistent style, stroke width)
1656. **Documentation** (usage guidelines for each component)
166
167**Example:** [assets/examples/design_system_example.md](assets/examples/design_system_example.md)
168
169## Working Directory
170
171**UX Design Workspace:** `/ai/ux-design/`
172- `wireframe_[page_name].md` - Wireframe specifications
173- `mockup_[page_name].md` - High-fidelity mockups
174- `evaluation_[page].md` - Design evaluations (with UX standard scores)
175- `component_library.md` - Reusable component catalog
176
177**Bundled Resources:**
178- `references/design_principles.md` - Brand, colors, typography, spacing
179- `references/accessibility_guidelines.md` - WCAG 2.1 AA compliance (10 requirements)
180- `references/component_library.md` - 10 reusable UI components
181- `references/responsive_design.md` - Breakpoints, mobile-first approach, touch optimization
182- `references/tools_resources.md` - Figma, contrast checkers, design inspiration (25+ tools)
183- `assets/templates/` - 3 design templates (landing page, dashboard, evaluation)
184- `assets/examples/` - Design system example
185
186**Context Folders (Reference as Needed):**
187- `/ai/frontend/` - React frontend context ([FRONTEND_ARCHITECTURE.md](../../ai/frontend/FRONTEND_ARCHITECTURE.md))
188- `/ai/backend/` - Django backend API specs
189
190**Living Documents (Append Only):**
191- `/ai/CHANGELOG.md` - When updating frontend components/styles
192- `/ai/FEATURE_IMPLEMENTATIONS.md` - When implementing new UI features
193- See [Documentation Guidelines](../../ai/standards/DOCUMENTATION_STANDARD.md)
194
195## Integration with Other Skills
196
197### From Business Skill
198- **Receive:** User personas, use cases, value propositions
199- **Use for:** Understanding audience needs, goals, pain points
200
201### From Marketing Skill
202- **Receive:** Content hierarchy, messaging, CTAs
203- **Use for:** Placing content strategically, writing microcopy
204
205### From Insights Skill
206- **Receive:** Data to visualize, chart types, dashboard requirements
207- **Use for:** Designing data visualizations and dashboards
208
209### To Architect Skill
210- **Deliver:** Design mockups, interaction specs, responsive breakpoints
211- **Expect:** Technical feasibility feedback, implementation effort estimates
212
213### To Executive Skill
214- **Escalate:** Designs that fail quality standard after 3 iterations
215- **Request:** Strategic guidance on design trade-offs
216
217## Best Practices
218
2191. **Always review business personas first** - Design for specific audience
2202. **WCAG AA compliance is non-negotiable** - All designs must pass accessibility
2213. **Clarity over creativity** - Business users prefer simple over flashy
2224. **Always score designs before declaring "done"** - Use 8-metric standard
2235. **Test on mobile** - 50%+ users are on mobile devices
2246. **Use real screenshots or data** - Avoid generic stock photos
2257. **Max 2 font families** - Stick to Inter + JetBrains Mono
2268. **Always check WCAG contrast ratios** - Use WebAIM Contrast Checker
2279. **Progressive disclosure** - Don't overwhelm with too much at once
22810. **Iterate based on feedback** - Design is never "done" on first try
229
230## Common Pitfalls to Avoid
231
2321. **Designing without understanding audience** → Review business personas first
2332. **Ignoring accessibility** → WCAG AA compliance is required, not optional
2343. **Overdesigning** → Business users prefer clarity over creativity
2354. **Skipping self-evaluation** → Always score designs before declaring "done"
2365. **Not testing on mobile** → 50%+ users are on mobile
2376. **Generic stock photos** → Use real screenshots or data visualizations
2387. **Too many fonts** → Max 2 font families (Inter + JetBrains Mono)
2398. **Low-contrast text** → Always check WCAG ratios (4.5:1 for normal, 3:1 for large)
240
241## Success Criteria
242
243A design is **production-ready** when:
244- ✅ UX Standard score ≥ 8.0/10
245- ✅ All metrics ≥ 6/10 (no single metric below 6)
246- ✅ WCAG AA compliant (contrast ratios pass)
247- ✅ Mobile-responsive (tested on 3 devices: phone, tablet, desktop)
248- ✅ Navigation intuitive (3-click rule met)
249- ✅ CTAs clear and prominent
250- ✅ Content scannable (bullets, short paragraphs)
251- ✅ Visual polish (consistent styling, no alignment issues)
252
253## Version History
254
255**v2.0.0** (2025-10-30)
256- Refactored to use progressive disclosure pattern
257- Extracted detailed content to `references/` (5 files) and `assets/` (4 files)
258- Converted to imperative form (removed second-person voice)
259- Reduced from 452 lines to ~290 lines (36% reduction)
260- Added clear workflow sections with templates
261- Enhanced bundled resources with comprehensive guidelines
262
263**v1.0.0** (2025-10-28)
264- Initial UX Design skill
265- Integrated with UX Design Standard (8-metric evaluation)
266- GabeDA-specific design principles
267- Self-evaluation workflow
268
269---
270
271**Last Updated:** 2025-10-30
272**Core Principle:** All designs must meet 8.0/10 UX standard before production
273**Quality Gate:** Self-evaluation → Iteration → Executive escalation if needed