【Vercel实用Skill】web-design-guidelines 技能

审查UI代码是否符合Web界面指南。当被要求"审查我的UI"、"检查可访问性"、"审计设计"、"审查UX"或"根据最佳实践检查我的网站"时使用。

📦 下载地址：此技能来源于 Vercel Labs 开源项目，完整代码和更多资源请访问： https://github.com/vercel-labs/agent-skills

技能概述

web-design-guidelines 技能是一个专门用于审查UI代码合规性的技能。它从权威来源获取最新的Web界面指南，对指定的文件进行全面检查，确保代码符合可访问性、用户体验和设计最佳实践。该技能能够自动获取最新规则，保证审查结果的时效性和准确性。

主要功能

• 实时规则获取：从权威来源获取最新的Web界面指南
• 全面合规检查：检查文件是否符合所有规则要求
• 可访问性审查：确保UI符合可访问性标准
• UX最佳实践：验证用户体验设计是否达标
• 简洁输出格式：使用简洁的file:line格式输出发现
• 灵活文件选择：支持指定文件或模式进行审查
• 自动更新规则：每次审查前获取最新指南

触发条件

在以下情况下应该使用此技能：

• 用户请求"审查我的UI"
• 用户请求"检查可访问性"
• 用户请求"审计设计"
• 用户请求"审查UX"
• 用户请求"根据最佳实践检查我的网站"
• 需要验证UI代码是否符合Web标准
• 需要检查可访问性合规性

处理过程

1. 获取最新指南

规则来源

从以下URL获取最新的Web界面指南：

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

使用WebFetch工具检索最新规则，确保审查基于最新的标准和最佳实践。

2. 读取文件

文件选择

根据用户提供的参数读取指定文件：

• 如果用户提供了文件或模式参数，读取指定文件
• 如果没有指定文件，提示用户选择要审查的文件
• 支持通配符模式匹配多个文件

3. 应用规则检查

全面审查

对每个文件应用所有获取到的规则：

• 可访问性规则检查
• 用户体验规则检查
• 设计最佳实践检查
• 性能优化建议检查
• 响应式设计检查

4. 输出结果

结果格式

使用简洁的file:line格式输出发现：

path/to/file.html:42: Issue description path/to/component.tsx:15: Another issue found

这种格式便于快速定位和修复问题。

使用方法

参数说明

<file-or-pattern>

接受文件路径或通配符模式作为参数。

使用示例

示例1：审查单个文件

用户：审查我的UI，检查 src/components/Button.tsx AI：我将获取最新的Web界面指南并审查该文件...

示例2：审查多个文件

用户：检查可访问性，审查 src/components/*.tsx AI：我将审查所有匹配的组件文件...

示例3：未指定文件

用户：审查我的UI AI：请告诉我您想审查哪些文件？您可以提供： - 具体文件路径（如 src/App.tsx） - 文件模式（如 src/**/*.tsx） - 目录路径（如 src/components）

输入要求

使用此技能时，需要提供以下信息：

• 文件路径或模式（可选）：要审查的文件路径或通配符模式
• 如果没有提供文件，系统会提示用户选择

输出说明

此技能将提供以下输出：

• 问题列表：使用file:line格式列出所有发现的问题
• 问题描述：每个问题的详细说明
• 修复建议：针对每个问题的修复建议
• 合规性总结：整体合规性评估

审查范围

该技能检查的典型内容包括：

可访问性（Accessibility）

• ARIA属性的正确使用
• 键盘导航支持
• 颜色对比度
• 屏幕阅读器兼容性
• 焦点管理
• 替代文本

用户体验（UX）

• 交互反馈
• 加载状态
• 错误处理
• 表单验证
• 导航清晰度
• 响应式设计

设计最佳实践

• 视觉层次
• 间距和布局
• 排版规范
• 颜色使用
• 组件一致性
• 品牌一致性

性能优化

• 图片优化
• 资源加载
• 渲染性能
• 交互响应速度

最佳实践

推荐做法：

1. 在开发过程中定期进行UI审查
2. 在提交代码前运行可访问性检查
3. 关注所有输出的问题，即使是低优先级
4. 结合实际使用场景理解审查结果
5. 优先修复可访问性问题
6. 保持规则的最新状态，定期重新审查
7. 将审查集成到CI/CD流程中
8. 与设计团队协作解决设计相关问题

使用场景

场景1：开发阶段审查

在开发新功能或组件时，使用此技能进行实时审查，确保代码从一开始就符合最佳实践。

场景2：代码审查辅助

在Pull Request审查过程中，使用此技能自动检查UI相关代码，提高审查效率。

场景3：可访问性合规审计

在产品发布前，进行全面的可访问性审计，确保符合WCAG等标准。

场景4：遗留代码重构

在重构旧代码时，使用此技能识别需要改进的区域，确保重构后的代码符合现代标准。

相关资源

• 规则来源：https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
• 许可证：MIT License
• 维护者：Vercel
• 版本：1.0.0

常见问题

Q: 规则会自动更新吗？

A:是的，每次审查前都会从权威来源获取最新规则，确保使用最新的标准和最佳实践。

Q: 可以自定义审查规则吗？

A:当前使用的是Vercel维护的标准规则集。如需自定义，可以参考规则来源并创建自己的审查工具。

Q: 输出格式可以自定义吗？

A:输出格式遵循指南中定义的标准格式（file:line），便于工具集成和自动化处理。

💡 提示：此技能是确保UI代码质量的有力工具。建议在开发流程中定期使用，特别是在代码审查和发布前的阶段。优先处理可访问性问题，因为这直接影响用户体验和合规性。