web-design-guidelines

用途

web-design-guidelines 用于审查 UI 代码是否符合 Web Interface Guidelines。它定位在编码完成之后的审计环节，帮助检查无障碍、性能与最佳实践方面的问题。当用户提出“review my UI”“check accessibility”“audit design”“review UX”“check my site”等请求时可以使用。

主要能力

• 在每次审查前从源地址获取最新的 Web Interface Guidelines 规则，确保依据的是最新版本。
• 读取用户指定的文件或文件模式。
• 将文件内容与获取到的全部规则逐条对照检查。
• 以简洁的 file:line 格式输出发现的问题，具体输出格式由获取到的指南内容规定。

使用方式

1. 从以下源地址获取最新指南：

   https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

   使用 WebFetch 获取最新规则。获取到的内容包含全部规则和输出格式说明。

2. 当用户提供文件或模式参数时：

   • 从上述源地址获取指南；
   • 读取指定文件；
   • 应用获取到的指南中的全部规则；
   • 按指南规定的格式输出发现的问题。

3. 如果用户未指定文件，则询问用户要审查哪些文件。

适用场景

• 编码完成后的 UI 审计，检查无障碍、性能与最佳实践。
• 需要依据最新 Web Interface Guidelines 进行合规性检查时。
• 作为设计工作流中的审计步骤使用。

设计工作流中的位置

1. DESIGN → 阅读 frontend-design 原则
2. CODE → 实现设计
3. AUDIT → 运行 web-design-guidelines 审查（本技能所处环节）
4. FIX → 处理审计发现的问题

相关技能

• frontend-design：在编码之前使用，学习设计原则（色彩、排版、UX 心理学）。
• web-design-guidelines（本技能）：在编码之后使用，审计无障碍、性能与最佳实践。

限制

资料未提供该技能的安装命令、收费方式、支持平台、具体规则清单或输出格式细节；这些内容需以实际获取到的指南源文件为准。