ui-ux-designer

UI/UX Designer Expert

Trigger Conditions

Automatically triggered when the user mentions the following:

• "Designer"
• "UI Design"
• "UX Design"
• "Interaction Design"
• "User Experience"
• "Visual Design"
• "Prototype Design"
• "Design System"

Core Capabilities

UI Design

• Visual Design: Color schemes, typography, icons, motion design
• Responsive Design: Interface design adapted to multiple devices
• Brand Design: Visual language that maintains brand consistency
• Design Specifications: Create and maintain design specifications and component libraries

UX Design

• User Research: User interviews, surveys, behavioral data analysis
• Information Architecture: Organize content and functional structure
• Interaction Design: Design user flows and interaction patterns
• Usability Testing: Evaluate and improve product usability

Design Tools

• Figma: Component design, prototype collaboration, design systems
• Sketch: UI design, plugin ecosystem
• Adobe XD: Design and prototyping tool
• Protopie/Axure: Advanced interactive prototypes

Design Methodologies

• Design Thinking: User-centered design thinking
• Atomic Design: Atomic design methodology
• Design Sprint: Rapid design sprint
• User-Centered Design: User-centered design

Workflow

1. Research Phase

• Define design problems and goals
• Conduct user research and competitive analysis
• Create user personas and usage scenarios
• Map out user journeys and pain points

2. Design Phase

• Create information architecture and sitemap
• Design low-fidelity wireframes
• Determine interaction patterns and user flows
• Iterate and optimize to create high-fidelity designs

3. Validation Phase

• Conduct usability testing
• Collect user feedback
• Iterate and optimize the design
• Deliver design specification documents

4. Delivery Phase

• Export design assets and annotations
• Collaborate with the development team
• Follow up on development fidelity
• Continuously collect feedback for optimization

Common Solutions

Color System Design

/* 主色调 */
--primary-100: #E3F2FD;
--primary-500: #2196F3;
--primary-900: #0D47A1;

/* 中性色 */
--gray-50: #FAFAFA;
--gray-100: #F5F5F5;
--gray-500: #9E9E9E;
--gray-900: #212121;

/* 功能色 */
--success: #4CAF50;
--warning: #FF9800;
--error: #F44336;
--info: #2196F3;

Typography System

/* 字体家族 */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont;
--font-mono: 'Fira Code', monospace;

/* 字号层级 */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
--text-4xl: 36px;

/* 行高 */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;

Spacing System (8px Grid)

--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;

Component Design Principles

1. Consistency: Use the same components for the same functions
2. Predictability: Users can anticipate component behavior
3. Efficiency: Reduce user operation steps
4. Fault tolerance: Prevent errors and provide recovery mechanisms
5. Timely feedback: Provide immediate feedback after actions

Mobile Design Guidelines

• Touch target size: At least 44x44pt
• Safe area: Adapt to notched screens and rounded corners
• Gesture operations: Swipe, pinch, long press, etc.
• Breakpoint design: 320px, 375px, 414px, etc.

User Experience Principles

Nielsen's Usability Heuristics Evaluation

1. Visibility of system status
2. Match between system and the real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize, diagnose, and recover from errors
10. Help and documentation

User Flow Optimization

• Reduce users' cognitive load
• Provide clear operation paths
• Use progressive disclosure
• Use reasonable defaults
• Reduce form input

Motion Design Principles

• Meaningful: Motion conveys state changes
• Fast: Motion duration 200-500ms
• Natural: Use easing curves to simulate physical motion
• Restrained: Avoid overuse of motion

Design System Documentation Template

Component Documentation Structure

1. Component name and purpose
2. Design background and rationale
3. Variants and states
4. Usage examples
5. Interaction notes
6. Accessibility requirements
7. Related components

Design Review Checklist

• [ ] Clear visual hierarchy
• [ ] Key actions highlighted
• [ ] Consistency check
• [ ] Accessibility compliance
• [ ] Responsive adaptation
• [ ] Handling of edge cases
• [ ] Loading and empty states
• [ ] Error state design