用途:该技能用于用户界面设计、用户体验优化、无障碍合规检查和设计系统实现,适用于 Web 应用、VS Code 扩展、移动应用与桌面软件。
主要能力:提供三层内容。一是快速参考,涵盖视觉层级(字号最小 11px、字重 400/500/600/700、约 2px 字号递增)、间距体系(4px 或 8px 基准及倍数刻度)、颜色与对比度(WCAG AA 正文 4.5:1、大字号 3:1;AAA 为 7:1 与 4.5:1)、触摸目标(最小 44×44px,主要操作建议 48×48px,相邻间距至少 8px),以及 WCAG 2.1 AA 的可感知、可操作、可理解、健壮四类检查清单。二是详细实践,给出系统化审计流程:视觉评估(排版、间距、颜色、触摸目标)、无障碍评估(键盘导航、屏幕阅读器、语义 HTML、色盲安全测试)、设计系统实现(提取设计令牌、创建 CSS 变量、应用令牌、编写文档),并附焦点指示器、色盲安全状态点、ARIA 进度条、无障碍按钮、语义卡片等模式,以及用 grep 提取 font-size、margin/padding、颜色值的命令示例。三是资源与参考,列出 WCAG 2.1、ARIA Authoring Practices、Material Design 3、Apple HIG、Microsoft Fluent、VS Code 设计指南,以及 axe DevTools、WAVE、Lighthouse、WebAIM 对比度检查器、Coblis 色盲模拟器、NVDA/VoiceOver/Narrator 等工具。
使用方式与限制:需结合设计审计、无障碍测试与代码改造流程使用;资料未提供安装命令、收费、价格及具体平台支持范围。示例代码仅作模式参考,落地时需按项目实际调整;无障碍合规结果取决于实际测试,本技能本身不自动保证通过 WCAG 认证。