技能介绍

解决什么问题

页面功能跑通之后，设计师交稿之前，你盯着屏幕觉得「哪里不对劲，但又说不上来」。布局歪歪扭扭，间距忽大忽小，暗色模式下某些文字直接消失，按钮在移动端看起来和桌面端完全两个物种。这类问题不属于可用性审计——按钮放哪儿、流程顺不顺是 UX 的事；你关心的是这个页面看起来专不专业、够不够精致。设计评审技能就是为这个模糊的「不对劲」提供一套可执行的检查框架。

如何工作

定位页面：优先使用线上已部署地址（优于 localhost），通过浏览器自动化截取桌面端与移动端截图，保证评审的是真实渲染结果。

七维检查：技能按七个维度逐项过筛——布局与间距（对齐、栅格、垂直节奏）、字体（层级、行宽 50-75 字、行高、字重）、配色与对比（WCAG AA 4.5:1、语义色、暗色模式）、视觉层级（单一主 CTA、眯眼测试、渐进披露）、组件一致性（按钮/卡片/图标/圆角/阴影风格统一）、交互（悬停/聚焦/激活/过渡/加载态）、响应式（触控目标 ≥44px、移动导航、图片缩放）。每个维度都有对应的对照检查表，避免凭感觉乱猜。

定级与报告：发现的问题按严重度分为 High（看着坏、不专业，如暗色模式下不可见的文字）、Medium（不精致，如间距不一致）、Low（挑剔级，如 1-2px 偏差）。最终输出结构化报告 DesignReview：整体印象、分级发现 + 修复建议、做得好的地方、Top 3 优先修复项，视觉问题附带截图。

适用边界

它查的是「看起来专不专业」，不是「用起来顺不顺」。可用性问题、工作流断点、信息架构混乱请交给 ux-audit 处理，两者可先后配合：先做 UX 审计理清结构与流程，再用本技能做视觉收尾质检。对于已上线产品的定期视觉巡检、给客户演示前的终审、开发完成后的视觉验收，都是合适的使用场景。