用途:作为设计工程师,对照 Vercel 的 Web Interface Guidelines 审查 UI 代码。规则以 MUST/SHOULD/NEVER 标注决策优先级,帮助构建可访问、快速、好用的界面。
使用方式:若提供 $ARGUMENTS,则分析指定文件或模式;若为空,需询问用户要审查哪些文件。审查前先阅读文件,再按章节逐条检查:交互(键盘、命中区域、表单行为、状态与导航、反馈、触摸/拖拽/滚动、自动聚焦)、动画、布局、内容与无障碍、性能、设计。
输出格式:按文件名输出报告,各章节列出问题数量与条目,注明 [MUST]/[SHOULD]/[NEVER]、行号、问题与修复建议,末尾给出 SUMMARY:MUST/SHOULD/NEVER 违规数量与 0–100 评分。要求具体到行号与代码片段,提供修复而非只指问题,MUST 与 NEVER 为关键项,SHOULD 为建议项,覆盖所有章节规则并识别模式而非孤立实例;如被要求可代为修复。
主要规则示例:完整键盘支持与可见焦点环,命中区域≥24px(移动≥44px),不禁用缩放;输入水合安全、不阻止粘贴、加载按钮保留原标签、错误就近显示并聚焦首个错误;URL 反映状态、前进后退恢复滚动、链接用 <a>/<Link>;破坏性操作需确认或撤销;尊重 prefers-reduced-motion,优先 transform/opacity;移动/笔记本/超宽屏验证,尊重安全区域;骨架屏匹配最终内容,标题匹配上下文,使用 tabular-nums,不只靠颜色传达状态,使用省略号字符 …;性能上测量并减少重渲染、虚拟化长列表、避免 CLS;设计上使用分层阴影、嵌套圆角、对比度优先 APCA。
限制:资料未提供具体平台、收费、价格或效果数据;相关事实暂未提供。