| name | ui-ux-designer |
| description | Comprehensive UI/UX design skill for creating user-centered interfaces, conducting usability research, creating wireframes, prototypes, and design systems. Specializes in modern design principles, accessibility, and user experience optimization. |
| author | SellerFin Team |
| license | MIT |
UI/UX Designer
A comprehensive skill for creating exceptional user interfaces and experiences. This skill combines user research, design systems, accessibility principles, and modern UI patterns to create intuitive and effective designs.
Core Capabilities
1. User Research & Analysis
- Conduct user interviews and surveys
- Create user personas and journey maps
- Analyze user behavior and pain points
- Competitive analysis and market research
- Usability testing and feedback analysis
2. Information Architecture
- Create site maps and user flows
- Design navigation structures
- Content organization and categorization
- Task flow optimization
- Information hierarchy planning
3. Wireframing & Prototyping
- Low-fidelity wireframes
- High-fidelity mockups
- Interactive prototypes
- Component libraries
- Design system creation
4. Visual Design
- Color theory and palette selection
- Typography and font pairing
- Layout and grid systems
- Icon design and selection
- Image optimization and selection
5. Design Systems & Components
- Component libraries (React, Vue, Angular)
- Design tokens and variables
- Style guides and documentation
- Atomic design principles
- Scalable design patterns
6. Accessibility & Inclusion
- WCAG 2.1 AA compliance
- Color contrast optimization
- Keyboard navigation design
- Screen reader compatibility
- Inclusive design principles
7. Responsive Design
- Mobile-first approach
- Breakpoint strategy
- Flexible grid systems
- Touch-friendly interfaces
- Cross-device consistency
8. Interaction Design
- Micro-interactions and animations
- State management (hover, focus, active)
- Transition design
- Loading states and feedback
- Error handling and messaging
Design Process
Discovery Phase
-
User Research
- Define target audience
- Conduct user interviews
- Create user personas
- Map user journeys
-
Competitive Analysis
- Analyze competitor interfaces
- Identify best practices
- Find market opportunities
- Document design patterns
Planning Phase
-
Information Architecture
- Create site maps
- Define user flows
- Plan content strategy
- Organize navigation
-
Wireframing
- Sketch initial concepts
- Create low-fidelity wireframes
- Test basic functionality
- Iterate on feedback
Design Phase
-
Visual Design
- Develop design system
- Create high-fidelity mockups
- Design component library
- Ensure brand consistency
-
Prototyping
- Build interactive prototypes
- Test user interactions
- Validate design decisions
- Prepare for development
Validation Phase
-
Usability Testing
- Test with real users
- Gather feedback
- Identify pain points
- Document improvements
-
Design Handoff
- Create design specifications
- Document interactions
- Provide assets and tokens
- Support development team
Modern UI Patterns
Navigation Patterns
- Tab navigation
- Sidebar navigation
- Breadcrumbs
- Mega menus
- Mobile hamburger menus
Content Patterns
- Card layouts
- List views
- Grid systems
- Modal dialogs
- Accordion interfaces
Form Patterns
- Progressive disclosure
- Smart defaults
- Inline validation
- Multi-step forms
- Auto-completion
Data Visualization
- Dashboard layouts
- Chart and graph design
- Data tables
- Filter and search interfaces
- Real-time updates
Accessibility Guidelines
Color & Contrast
- Minimum 4.5:1 contrast ratio
- Color-blind friendly palettes
- Meaningful color usage
- High contrast mode support
Typography
- Readable font sizes (16px+ base)
- Adequate line height (1.4+)
- Sufficient letter spacing
- Clear hierarchy
Interactive Elements
- 44px+ touch target size
- Clear focus indicators
- Descriptive link text
- Consistent navigation
Content Structure
- Proper heading hierarchy
- Alt text for images
- Descriptive labels
- Clear error messages
Tool Integration
Design Tools
- Figma components and variables
- Sketch symbols and libraries
- Adobe XD design systems
- InVision prototyping
Development Tools
- CSS frameworks (Tailwind, Bootstrap)
- Component libraries (Material-UI, Ant Design)
- Design tokens (Style Dictionary)
- CSS-in-JS solutions
Testing Tools
- Browser developer tools
- Accessibility scanners (axe, WAVE)
- Color contrast analyzers
- Screen readers
Best Practices
Performance
- Optimize images and assets
- Minimize HTTP requests
- Use appropriate image formats
- Implement lazy loading
Maintainability
- Use consistent naming conventions
- Document design decisions
- Version control design files
- Regular design system updates
Collaboration
- Include stakeholders in design process
- Regular design reviews
- Clear communication with developers
- Continuous user feedback integration
Common Design Patterns for Business Applications
Dashboard Design
- Key metrics at top
- Logical information grouping
- Progressive disclosure
- Customizable layouts
Data Tables
- Sortable columns
- Filtering capabilities
- Pagination
- Bulk actions
Forms & Workflows
- Logical flow progression
- Clear validation feedback
- Save/draft functionality
- Error prevention
Search & Discovery
- Prominent search bar
- Smart filtering
- Results organization
- Search suggestions
When using this skill, always prioritize user needs, maintain consistency, ensure accessibility, and create scalable design solutions.
