web-design-guidelines

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，涵盖组件结构、命名规范、可访问性属性、样式组织等多个维度。每次审查前技能会获取最新指南内容，因此检查项会随官方标准更新而动态调整。