ui-design

原文涵盖的主题

• UI/UX Best Practices Frontend Design
• When to Apply
• Rule Categories by Priority
• Quick Reference
• 1. Accessibility & WCAG Compliance (CRITICAL)
• 2. Core Web Vitals Optimization (CRITICAL)
• 3. Visual Hierarchy & Layout (HIGH)
• 4. Responsive & Mobile-First Design (HIGH)

Comprehensive UI/UX and frontend design best practices guide. Contains 42 rules across 8 categories, prioritized by impact to guide accessible, performant, and user-friendly interface development. Reference these guidelines when: Structuring HTML for accessibility and semantics Writing CSS for responsive layouts and visual hierarchy Optimizing images and fonts for Core Web Vitals Designing forms with proper validation and error handling Adding animations and interactive elements | Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | Accessibility & WCAG Compliance | CRITICAL | access- | | 2 | Core Web Vitals Optimization | CRITICAL | cwv- | | 3 | Visual Hierarchy & Layout | HIGH | layout- | | 4 | Responsive & Mobile-First Design | HIGH | resp- | | 5 | Typography & Font Loading | MEDIUM-HIGH | typo- | | 6 | Color & Contrast | MEDIUM | color- | | 7 | Forms & Validation UX | MEDIUM | form- | | 8 | Animation & Performance | LOW-MEDIUM | anim- | access-semantic-html - Use semantic HTML elements for screen readers access-keyboard-navigation - Ensure full keyboard navigation access-focus-indicators - Provide visible focus indicators access-alt-text - Pro

这里只展示节选，请以完整原文和当前要求为准。