SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场design-review-checklist

design-review-checklist

设计与创作

查看项目

更新于 10-13 15:29

技能介绍

用途

Design Review Checklist 用于对 UI/UX 进行质量、一致性与完成度评审。当用户提出“review the design”“check the UI”“does this look good”“design audit”等诉求时适用。代理在此扮演资深产品设计师，审查 UI 实现，目标是发现那些会损害用户体验、品牌观感和转化率的设计问题。

主要能力

Design Score（设计评分）

评审完成后给出 A-F 等级：

  • A — Production-ready, polished, delightful
  • B — Good, minor issues only
  • C — Functional but needs polish
  • D — Significant issues that hurt UX
  • F — Needs redesign

AI Slop Detection（AI 生成痕迹检测）

检查 10 种反模式，用于识别 AI 生成、未打磨的设计：

  1. Gradient hero sections — Generic gradient backgrounds with centered text
  2. 3-column icon grids — Three identical cards with icons, identical padding
  3. Uniform border-radius — Every element has the same rounded-xl
  4. Stock illustration style — Flat illustrations that don't match the brand
  5. Generic CTA text — "Get Started," "Learn More" without specificity
  6. Excessive whitespace — Padding that wastes screen real estate
  7. No visual hierarchy — Everything has the same visual weight
  8. Missing micro-interactions — No hover states, transitions, or feedback
  9. Template color palette — Default Tailwind colors with no customization
  10. Cookie-cutter layout — Hero → Features → Testimonials → CTA pattern

每检测到一个反模式，需要标注严重程度并给出修复建议。

Review Checklist（评审检查表，8 类共 80 项）

Typography（10 项）：字体层级清晰（h1 > h2 > h3 视觉可区分）；正文 16-18px 便于阅读；正文行高 1.4-1.6；最大行宽 65-75 字符；字重形成清晰视觉层级；不超过 2 种字体家族；文字对比度满足 WCAG AA（正文 4.5:1，大号文字 3:1）；关键标题无孤字；对齐方式一致（不混用左对齐与居中）；链接与正文视觉可区分。

Color & Contrast（10 项）：主操作色使用一致；破坏性操作使用红色/警示色；禁用态视觉可区分但不至于不可见；颜色不是状态的唯一指示方式（可访问性）；背景/前景对比满足 WCAG AA；支持深色模式（如适用）；一致使用颜色 token（非随意 hex 值）；成功/错误/警告/信息状态颜色各异；hover/focus 状态可见；选中/激活状态清晰。

Layout & Spacing（10 项）：间距刻度一致（4px/8px 基准）；区块有清晰视觉分隔；内容宽度适配语境；响应式：适配移动端、平板、桌面；任意视口无横向滚动；卡片与容器内边距一致；网格对齐一致；视觉分组遵循格式塔接近性原则；区块之间留有充足留白；固定元素（导航、页脚）不遮挡内容。

Navigation & Information Architecture（10 项）：当前页面/区块指示清晰；导航标签清晰简洁；移动端导航可访问且直观；在合适处提供面包屑；用户始终能找到返回路径；内容量大时提供搜索；导航深度不超过 3 层；最重要的操作位置显眼；破坏性操作需确认；错误状态提供清晰的恢复路径。

Interaction & Feedback（10 项）：按钮具备 hover、active、disabled 状态；异步操作有加载状态；表单校验内联显示错误，而非仅在提交时；成功/错误信息清晰且可操作；过渡平滑（200-300ms）；交互过程中无布局抖动；移动端触摸目标至少 44x44px；所有交互元素支持键盘导航；焦点状态可见且有样式；滚动行为平滑可预期。

Content & Copy（10 项）：标题以收益为导向而非功能导向；CTA 具体明确（"Start free trial" 而非 "Submit"）；错误信息说明出错原因并给出修复方式；空状态引导用户采取行动；微文案有帮助且有人情味；数字使用合适格式（1,234 而非 1234）；日期格式一致；占位文本有帮助，而非 "Enter text here"；标签清晰无需依赖 tooltip；确认对话框说明后果。

Performance & Loading（10 项）：图片经过优化（WebP、srcset 响应式）；首屏内容 1.5s 内加载；异步内容有骨架屏或加载指示器；首屏以下图片懒加载；无累积布局偏移（CLS < 0.1）；字体不导致无样式文本闪烁；大列表使用虚拟化；动画不造成卡顿（使用 transform/opacity）；关键 CSS 内联；第三方脚本不阻塞渲染。

Accessibility（10 项）：所有图片有 alt 文本；表单输入有对应 label；纯图标按钮有 ARIA label；存在跳转到内容的链接；焦点顺序与视觉顺序一致；屏幕阅读器能播报动态内容变化；颜色不是传达信息的唯一方式；视频有字幕（如适用）；尊重减少动效偏好；恰当使用语义化 HTML 元素。

使用方式

按上述检查表对目标 UI 进行评审，检测 AI slop 反模式，最终按指定输出格式给出一份评审结果：

## Design Review: [Component/Page Name]

**Design Score: [A-F]**
**AI Slop Score: [0-10]** (number of anti-patterns detected)

### Critical Issues
- FINDING-001: [description] → [fix]

### Improvements
- FINDING-002: [description] → [fix]

### Polish
- FINDING-003: [description] → [fix]

适用场景

  • 设计走查与设计审计
  • 上线前 UI 质量与一致性检查
  • 识别 UI 中疑似 AI 生成、未打磨的痕迹
  • 品牌观感与转化率相关的界面评审
  • 可访问性与性能相关的界面检查

限制

资料未提供该技能的具体安装方式、定价、支持平台与运行环境等信息，暂未提供。检查表中的具体阈值为评审参考标准，实际执行需要代理具备查看目标 UI 的能力。