设计评审 是做什么的？
根据设计简报和代码库进行结构化设计评审。检查视觉层次、一致性、响应式设计、可访问性和美学保真度。当用户需要设计评审、批评、QA检查、润色或构建后提及“评审”时使用。
评审标准
- 视觉层次：分析元素布局、字号权重、间距和颜色对比度，确保信息层级清晰。
- 一致性：检查字体、颜色、间距、图标风格等是否与设计系统保持一致。
- 响应式设计：验证布局在不同屏幕尺寸下的适应性与可用性。
- 可访问性：确保符合WCAG 2.1标准，包括颜色对比度、键盘导航、ARIA标签等。
- 美学保真度：比对设计稿与最终实现，确保视觉细节（如圆角、阴影、渐变）的匹配度。
使用方法
- 在对话中说明需要设计评审（例如：“请对当前页面进行设计评审”）。
- 技能会自动抓取设计简报和代码库中的相关文件。
- 生成结构化报告，列出所有发现的问题及改进建议。
- 根据报告进行修改后，可再次请求评审以验证修复效果。
示例
用户：关闭页面后，请帮我对这个登录页面做一次设计评审。
AI：好的，正在分析登录页面...
# 设计评审报告
## 视觉层次
- ✅ 主要操作按钮（登录）视觉突出，与次要按钮（注册）区分明显。
- ❌ 错误提示文字字号过小（12px），建议至少14px。
## 一致性
- ✅ 使用 Design System 的 primary color #0066CC。
- ❌ 卡片阴影不一致：部分使用 box-shadow: 0 2px 4px，部分使用 0 4px 6px。
...（其他部分省略）
支持平台
- Claude Code
- Cursor
- Codex
- 其他兼容AI代理平台
注意事项
- 评审结果依赖于设计简报和代码库的完整性。
- 建议在开发不同阶段多次使用此技能，以逐步提升设计质量。