用途
该技能用于创建可投入生产的前端 UI/UX 设计，覆盖从研究到实现的完整过程，在用户需求、业务目标、技术约束和无障碍要求之间取得平衡。
主要能力
- 需求理解：收集项目目标与成功指标、目标受众与用户画像、技术约束（框架、浏览器、设备）、品牌指南与设计语言、无障碍要求（WCAG 级别）；明确交付物类型（线框图、视觉稿、设计系统、组件库）、保真度、响应式断点和浏览器/设备支持范围。
- 研究与策略：分析用户需求、目标与痛点，查看现有分析或用户反馈，识别关键用户旅程与场景，定义信息架构。
- 设计与原型：从低保真布局开始，关注内容层级与结构，定义关键任务用户流程并迭代；随后应用视觉设计，定义配色（主色、辅色、语义色）、字体层级与间距系统，设计带变体和状态的组件，确保视觉层级与一致性。
- 无障碍：遵循 WCAG 合规要求，包括最低对比度（正文 4.5:1，大文本/UI 3:1）、键盘导航、屏幕阅读器兼容（语义 HTML、ARIA 标签）、焦点指示与跳转链接、图片替代文本。
- 响应式布局：采用移动优先方法，从移动端（最小 320px）开始，逐步增强到平板（768px+）和桌面（1024px+、1440px+），使用流式网格和弹性图片，并应用合适的布局模式。
- 组件库：设计原子组件（按钮、输入框、图标）、分子组件（表单字段、卡片、菜单）、有机体组件（页头、表单、区块），定义组件变体、状态和属性，并记录使用模式。
- 性能优化：优化图片（WebP/AVIF、懒加载、响应式图片），减小 CSS/JS 包体积，为折叠以上内容实现关键 CSS，使用高效动画（transform、opacity），监控 Core Web Vitals（LCP、FID、CLS）。
- 文档与交付：提供设计规格（颜色、字体、间距）、带变体的组件文档、响应式断点设计、无障碍报告与合规清单、实现指南和设计令牌。
使用方式
按结构化设计流程推进：理解需求 → 研究与策略 → 设计与原型 → 确保无障碍 → 设计响应式布局 → 构建组件库 → 优化性能 → 文档与交付。在相应阶段按需加载参考文档：
- uiux-design-process.md：从研究到原型和用户测试的完整设计流程
- design-principles.md：核心设计原则（层级、一致性、简洁、反馈）
- design-systems.md：构建设计令牌与治理的完整设计系统
- accessibility-guide.md：WCAG 合规、ARIA 模式、键盘导航、测试
- responsive-design.md：断点、布局模式、响应式组件
- component-library.md：原子/分子组件目录与规格
- component-patterns.md：组件模式（表单、导航、数据展示、反馈）
- performance-optimization.md：图片优化、代码分割、Core Web Vitals
- design-tools-and-resources.md：设计工具、框架、图标库、资源
- output-format.md：用于交付的结构化交付物格式
- examples.md：真实设计示例与模式
- design-checklist.md：最终确定设计前的质量检查清单
适用场景
适用于需要从研究到实现完整推进的前端 UI/UX 设计工作，包括界面设计、设计系统、组件库、响应式布局和无障碍设计等任务。
关键原则
- 以用户为中心：始终从用户需求和目标出发，通过研究和测试验证假设，可用性优先于美观。
- 无障碍优先：为包括残障用户在内的所有用户设计，至少遵循 WCAG 2.1 AA 标准，使用键盘导航和屏幕阅读器测试。
- 移动优先响应式：从最小屏幕尺寸开始，逐步增强到更大屏幕，确保触控友好交互（最小 44x44px）。
- 设计系统思维：构建可复用、一致的组件，记录模式和使用指南，维护设计令牌系统。
- 性能重要：优化图片和资源，保持包体积小，监控并改进 Core Web Vitals。
- 迭代过程：从低保真开始迭代到高保真，尽早且频繁收集反馈，根据用户测试和指标进行改进。
限制
资料未提供该技能的具体收费、价格、平台支持范围、安装命令或代码示例，这些信息暂未提供。