Xza2792/ui-ux-audit-skill

ui-ux-audit-skill 是做什么的？

使用AI审计Web和移动端UI代码，在部署前检测布局失败、响应性错误和设计系统漂移。

概述

此技能自动化UI质量检查，利用AI分析代码库中的样式和组件。它模拟多种设备和视口，捕获如溢出、对齐问题、颜色对比度违规及设计Token使用不一致等问题。与AI编码代理（如Claude Code、Cursor、Codex）配合使用，能在开发流程中提供实时反馈。

主要功能

• 布局检测：识别元素重叠、溢出容器及Flexbox/Grid对齐错误。
• 响应性检查：在多个断点模拟移动端、平板和桌面视图，确保UI适配。
• 设计系统漂移检测：验证组件是否使用正确的设计Token（如颜色、间距、字体），并标记偏离设计规范之处。
• 可访问性扫描：检查颜色对比度、标签、角色等WCAG标准问题。

使用方法

1. 将技能添加到AI代理的配置中。
2. 提供目标UI代码路径（如组件文件或样式目录）。
3. 运行技能并查看生成的报告。

示例：

# 使用Claude Code触发审计
claude code --skill Xza2792/ui-ux-audit-skill --target ./src/components

配置

可通过环境变量自定义技能行为：

• UI_AUDIT_DEVICE_PROFILES：以逗号分隔的设备配置列表。默认：mobile,tablet,desktop
• UI_AUDIT_DESIGN_TOKENS_PATH：设计Token JSON文件的路径。
• UI_AUDIT_WCAG_LEVEL：可访问性合规级别（AA或AAA）。默认：AA

输出

技能生成包含详细发现（按严重级别分组）的结构化报告，以及每个问题的修复建议。报告可保存为Markdown或JSON格式。

支持

如有问题或功能请求，请在GitHub仓库中创建Issue。