web-design-guidelines
审查UI代码以确保符合Web界面设计规范。当被要求“审查我的UI”、“检查可访问性”、“审计设计”、“审查用户体验”或“检查我的网站是否符合最佳实践”时使用。
Web Design Guidelines - UI 代码设计规范审查技能
技能概述
Web Design Guidelines 是一个自动化 UI 代码审查技能，帮助开发者检查代码是否符合 Vercel Web Interface Guidelines 标准，快速发现设计规范问题和可访问性缺陷。
适用场景
-
上线前代码审查：在网站发布前自动检查所有 UI 代码，确保符合 Web Interface Guidelines 和最佳实践，避免设计缺陷流入生产环境。
-
设计交付验收：设计师交付设计稿后，快速审查前端实现是否符合设计规范，验证界面一致性和交互标准是否正确落地。
-
可访问性审计：检查网站是否遵循 WCAG 等无障碍标准，发现可能影响残障用户使用的界面问题，提升网站的包容性。
核心功能
-
自动获取最新指南：每次审查时从 Vercel Labs 官方源实时拉取最新的 Web Interface Guidelines，确保检查规则始终与最新标准同步。
-
智能规则匹配：读取指定的 UI 代码文件，对照指南中的所有规则进行检查，自动识别不符合规范的代码模式并输出具体文件和行号。
-
结构化问题报告：以简洁的
file:line格式输出检查发现，支持指定文件或文件通配符模式批量审查，便于快速定位和修复问题。
常见问题
Web Design Guidelines 技能支持哪些文件格式？
技能可以审查任何包含 UI 代码的文本文件，包括 HTML、JSX/TSX（React）、Vue、Svelte 等前端框架组件文件。检查基于代码内容而非文件扩展名，因此支持任何标记语言和模板文件。
如何检查整个项目的 UI 代码？
在调用技能时使用文件通配符模式，例如 src/**/*.tsx 或 components/**/*.vue，技能会递归扫描指定目录下的所有匹配文件。如果不确定文件位置，也可以不提供参数，技能会提示你选择要审查的文件或目录。
审查结果包含哪些检查项？
检查项来源于 Vercel Web Interface Guidelines，涵盖组件结构、命名规范、可访问性属性、样式组织等多个维度。每次审查前技能会获取最新指南内容，因此检查项会随官方标准更新而动态调整。