Ui UX Expert（ui-ux-expert）是一个面向 UI/UX 设计专家场景的 AI 技能，收录于 martinholovsky/claude-skills-generator 项目，技能页面地址为 https://www.skills.sh/martinholovsky/claude-skills-generator/ui-ux-expert。根据资料，该技能将 AI 定位为一名资深 UI/UX 设计师，专注于以用户为中心的设计、无障碍（WCAG 2.2）、设计系统与响应式界面，适用于设计网页与移动端界面等任务。
用途 该技能主要用于协助处理 UI/UX 设计相关工作，资料列出的专业领域包括：用户研究、角色画像、旅程映射与可用性测试；无障碍合规（WCAG 2.2 AA/AAA）、ARIA 模式、屏幕阅读器与键盘导航；设计系统（组件库、设计令牌、模式文档、Figma）；响应式设计（移动优先、流式布局、断点、自适应界面）；视觉设计（排版、色彩理论、间距系统、视觉层级）；原型设计（Figma、交互原型、微交互、动画原则）；设计思维（构思、线框图、用户流程、信息架构）；可用性（启发式评估、A/B 测试、分析集成、用户反馈）。
主要能力 技能声明的设计目标是：可访问（符合 WCAG 2.2、包容、通用可用）、用户友好（直观导航、清晰信息架构）、一致（由设计系统驱动、模式可预测）、响应式（移动优先、跨设备自适应）、高性能（资源优化、快速加载、流畅交互）。资料给出的风险等级为 LOW，关注设计质量、无障碍合规与可用性问题，并指出不良 UX 会影响用户满意度，无障碍违规可能带来法律影响，缓解方式是遵循 WCAG 2.2 指南、开展可用性测试并根据反馈迭代。
核心原则 资料列出七条核心原则：TDD 优先（先写组件测试再实现，验证无障碍、响应式行为与用户交互）；性能意识（针对 Core Web Vitals 的 LCP、FID、CLS 优化，懒加载图片，减少布局偏移）；以用户为中心（研究驱动决策并通过可用性测试验证）；无障碍卓越（以 WCAG 2.2 AA 为基线）；设计系统思维（一致、可复用组件与设计令牌）；移动优先响应式（从移动端起步逐步放大）；迭代改进（尽早测试、频繁测试、基于反馈迭代）。
使用方式与实现工作流 资料给出了一个基于 TDD 的实现工作流，分四步：
- 先写失败测试。示例使用 Vitest 与 @vue/test-utils 为 Button 组件编写测试，覆盖可访问角色与标签、键盘激活、可见焦点指示、最小触摸目标尺寸、容器宽度自适应、加载状态、颜色对比度等用例。
- 实现最小可通过的代码。示例给出一个 Vue 3 的 Button 组件（script setup + TypeScript），包含 touch-target、min-h-[44px] min-w-[44px]、焦点环、变体样式、disabled/loading 处理、aria-busy、click 与 keydown.enter 事件等。
- 按需重构，方向包括更好的无障碍模式、性能优化、与设计系统对齐、代码可维护性。
- 运行完整验证，命令包括 npm run test:unit -- --filter Button、npm run test:a11y、npm run test:visual、npm run build、npm run lighthouse。
性能模式 资料列出六种性能模式并给出对照示例：懒加载（首屏关键图片立即加载并设置 fetchpriority，折叠以下图片使用 loading="lazy" 与 decoding="async"，并给出基于 VueUse 的 useIntersectionObserver 实现）；图片优化（使用 picture 元素与 AVIF/WebP 多尺寸 srcset 及回退图）；关键 CSS（内联首屏样式，异步加载非关键样式并提供 noscript 回退）；骨架屏（以匹配最终布局的骨架替代单纯 spinner）；代码分割（路由懒加载与 defineAsyncComponent，可配合 webpackPrefetch）；减少布局偏移（为图片指定 width/height、使用 aspect-ratio、为动态内容预留 min-height）。
核心职责 资料将核心职责归纳为五类：以用户为中心的设计方法（用户研究、角色画像、旅程映射、可用性测试、基于反馈与分析迭代、设计思维方法）；无障碍优先（满足 WCAG 2.2 AA，必要时 AAA，键盘导航、4.5:1 文字对比度、非文本内容替代文本、逻辑焦点顺序与 Tab 顺序、语义 HTML 与必要时的 ARIA、使用 NVDA、JAWS、VoiceOver 测试）；设计系统卓越（定义设计令牌如颜色、间距、排版，创建可复用组件库，记录模式与使用指南，跨触点保持一致，对设计资产做版本控制，与开发者协作，在 Figma 中以规范组件结构构建）；响应式与移动优先（从移动端布局起步，断点基于内容而非设备，流式排版与间距，触摸友好界面最小 44x44px，考虑不同设备使用情境，跨屏幕尺寸测试）；视觉设计原则（清晰视觉层级、有效排版、有目的地使用可访问配色、一致的 4px 或 8px 间距网格、留白提升可读性、分块提升可扫读性、格式塔原则分组）。
常见 UX 模式 资料列出七个 UX 模式：渐进式披露（用于字段较多的复杂表单、高级设置、多步流程、功能丰富的仪表盘，默认只显示必要信息，使用“显示更多”链接，多步流程显示进度，展开/折叠状态用 aria-expanded 向屏幕阅读器播报）；清晰的错误预防与恢复（内联实时校验、清晰的错误信息、颜色加图标标记错误字段、错误靠近相关字段、给出修复建议、破坏性操作使用确认对话框，使用 aria-invalid 与 aria-describedby 关联错误）；合乎逻辑的信息架构（通过卡片分类识别用户分组心智，顶层导航限制在 5-7 项，使用面包屑与侧边栏，提供多条导航路径并清晰显示当前位置）；有效的表单设计（单列布局、必填标记、辅助文本等；资料在此处内容被截断）。
适用场景 根据资料，该技能适用于网页与移动端界面设计任务，尤其是需要无障碍合规、设计系统建设、响应式布局与性能优化的界面开发与设计评审场景。示例代码以前端技术栈（Vue 3、Vitest、VueUse）为主，但技能本身描述的是通用的 UI/UX 设计方法。
限制 资料未提供该技能的安装命令、收费方式、价格、支持平台或实际使用效果，这些信息暂未提供。资料中的示例代码与命令仅为技能内容的一部分，不应视为该技能在所有环境下的通用要求。总体而言，该技能的内容以设计原则、工作流说明和示例代码为主，实际应用效果需结合具体项目与工具链验证。