design-review

设计审查

检查 Web 应用或页面的视觉设计质量。这不是 UX 审计（可用性、工作流、阻碍因素）——而是检查设计是否专业、一致且精致。

目标：注重设计的人看到它时，会觉得“做得不错”，还是“看起来像是开发者设计的”？

适用场景

• 向客户或团队展示之前
• 觉得某些东西“看起来不对”，却说不出原因时
• 完成功能开发后，在宣布完成之前
• 对已发布的产品进行定期质量检查
• UX 审计之后——这是视觉方面的补充

浏览器工具检测

与 ux-audit 相同——Chrome MCP、Playwright MCP 或 playwright-cli。

URL 解析

与 ux-audit 相同——优先选择已部署的线上版本，而不是 localhost。

检查项目

1. 布局与间距

检查项	良好	不佳
间距一致	网格中所有卡片之间的间距相同，各区块的内边距一致	有些卡片间距为 16px，另一些为 24px。页眉的内边距与正文不同
对齐	各区块内容的左边缘在垂直方向上对齐	标题、正文和卡片分别从不同缩进处开始
留白	内容周围留白充足，元素不会显得拥挤	文本紧贴容器边缘，按钮挤在输入框旁边
网格规范	内容遵循清晰的分栏网格	元素随意摆放，没有底层结构
响应式比例	在各种宽度下，侧边栏与内容区的比例都显得合理	在平板上侧边栏占了 50%，内容区被挤压
垂直节奏	垂直间距模式一致（例如 8px/16px/24px/32px 的比例）	间距毫无规律：这里 13px，那里 27px，另一处又是 8px

2. 排版

检查项	良好	不佳
层级	h1 → h2 → h3 → 正文之间有明显的视觉差异	标题和正文的字号或字重看起来一样
行长	正文每行 50-75 个字符	文本铺满全宽，每行超过 150 个字符——难以阅读
行高	正文为 1.5-1.7，标题为 1.1-1.3	文本过于紧凑，或行高过大
字号	使用一致的字号比例（例如 14/16/20/24/32）	字号随意：15px、17px、22px，彼此毫无关联
字重使用	正文使用常规字重，标签使用中等字重，标题使用半粗体，粗体谨慎使用	所有内容都用粗体，或全部使用常规字重而没有层级
文本截断	长文本以省略号截断，title 属性显示完整文本	文本溢出容器、换行不自然，或被截断却没有省略号

3. 颜色与对比度

检查项	良好	不佳
语义化颜色	使用设计令牌（bg-primary、text-muted-foreground）	使用原始 Tailwind 颜色（bg-blue-500、text-gray-300）
对比度	文本符合 WCAG AA（正文为 4.5:1，大号文本为 3:1）	白底浅灰字，或深色背景上的深色文字
颜色一致	同一种蓝色在所有地方都表示同一含义（主要色 = 操作）	蓝色在一处表示“可点击”，在另一处表示“信息提示”
深色模式	所有元素都清晰可见，边框明确，文字不会隐形	元素消失，文字难以辨认，图片显示异常
状态颜色	始终以绿色表示成功、黄色表示警告、红色表示错误	绿色既表示成功，又表示含义不同的“激活”状态
颜色使用不过量	使用 2-3 种颜色加中性色	颜色五花八门，缺乏清晰的层级

4. 视觉层次

检查项	好	差
主要操作	每个页面只有一个清晰且视觉上突出的 CTA	三个样式相同的按钮争夺注意力
眯眼测试	眯眼看页面时，最重要的元素脱颖而出	所有内容的视觉权重都相同——没有元素能吸引视线
渐进式呈现	显示最重要的信息，交互后可查看详情	一次性显示所有内容——令人不知所措
分组	相关项在视觉上分组（距离、边框、背景）	相关项散落各处，不相关项却紧挨在一起
留白	有意留出空白以衬托内容	空白看起来像是无意造成的（不均匀、被夹住的留白）

5. 组件一致性

检查项	好	差
按钮样式	一种主要样式、一种次要样式、一种危险操作样式，并始终保持一致	整个应用中有 5 种不同的按钮样式
卡片样式	所有卡片的圆角、阴影和内边距都相同	有些卡片是圆角，有些是直角；有些有阴影，有些没有
表单输入框	所有输入框的高度、边框样式和焦点环都相同	高度、边框样式和焦点行为各不相同
图标样式	使用同一套图标（Lucide、Heroicons），尺寸和笔画粗细一致	混用不同图标集，尺寸不一，有些填充，有些描边
圆角	使用一致的圆角比例（例如，输入框 4px、卡片 8px、模态框 12px）	圆角数值随意：3px、7px、10px、16px
阴影	一致地使用一到两种阴影级别	每个组件的阴影深度都不同

6. 交互设计

检查项	好	差
悬停状态	按钮、链接和可点击卡片在悬停时会发生变化	没有悬停反馈——用户不确定哪些元素可以点击
焦点状态	所有交互元素在键盘焦点下都清晰可见	焦点环缺失，或在背景上难以看清
激活状态	导航项、标签页和侧边栏链接会显示当前选中项	激活项看起来和未激活项一样
过渡效果	悬停/聚焦时有细微的过渡效果（150-200ms ease）	没有过渡效果（突兀），或过渡过慢（迟滞）
加载指示器	异步操作期间显示骨架屏或加载动画	内容突然出现，没有提示，布局也会发生偏移
禁用状态	禁用元素的视觉效果减弱，光标样式也会变化	禁用按钮看起来仍可点击，光标也没有变化

7. 响应式质量

检查项	好	差
移动端导航	简洁的汉堡菜单/抽屉菜单，易于点击	桌面端导航挤进移动端布局，点击目标很小
图像缩放	图像按比例填充容器	图像被拉伸、严重裁切或溢出容器
表格响应式	移动端支持水平滚动，或将表格堆叠为卡片	表格宽于屏幕，且无法查看各列
触控目标	移动端至少为 44x44px	链接、关闭按钮和复选框太小
平板	布局在 768px 宽度下也能正常使用（不只适配桌面端和手机）	布局在平板宽度下错乱，或出现尴尬的间距

严重程度指南

级别	含义	示例
高	看起来有问题或不专业	深色模式下文字不可见、行内按钮高度不一
中	看起来不够精致	间距不一致、图标样式混杂、文本截断时没有省略号
低	鸡蛋里挑骨头	1-2px 的对齐偏差、圆角略有不同、阴影过强

输出

将发现的问题写入 .jez/artifacts/design-review.md：

# Design Review: [App Name]
**Date**: YYYY-MM-DD
**URL**: [url]

## Overall Impression
[1-2 sentences — professional / unpolished / inconsistent / clean]

## Findings

### High
- **[issue]** at [page/component] — [what's wrong] → [fix]

### Medium
- **[issue]** at [page/component] — [what's wrong] → [fix]

### Low
- **[issue]** — [description]

## What Looks Good
[Patterns that are well-executed and should be preserved]

## Top 3 Fixes
1. [highest visual impact change]
2. [second]
3. [third]

如果问题是视觉上的（大多数都是），请为相关问题截图。

提示

• 检查深色模式和浅色模式——大多数问题只会出现在其中一种模式下
• 眯眼观察是发现层级问题最快的方法
• 组件不一致是开发人员构建的 UI 中最常见的问题
• “看起来不对劲”通常意味着间距有问题——先检查外边距和内边距
• 如果无法确定问题所在，可以与同类别中设计出色的应用进行比较