design-review
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseDesign Review
设计评审
Review a web app or page for visual design quality. This is not a UX audit (usability, workflow, friction) — this checks whether the design is professional, consistent, and polished.
The goal: would a design-conscious person look at this and think "this is well made" or "this looks like a developer designed it"?
对网页应用或页面的视觉设计质量进行评审。这并非UX审计（UX审计关注可用性、流程、交互阻力）——本次评审聚焦于设计是否专业、一致且精致。
核心目标：让具备设计素养的人看到后，会觉得“这制作精良”还是“这看起来像是开发者设计的”？
When to Use
适用场景
- Before showing something to a client or team
- When something "looks off" but you can't pinpoint why
- After building a feature, before calling it done
- Periodic quality check on a shipped product
- After a UX audit — this is the visual companion
- 向客户或团队展示成果前
- 感觉设计“不对劲”但又无法明确问题所在时
- 功能开发完成，尚未收尾时
- 已上线产品的定期质量检查
- UX审计之后——作为视觉层面的配套评审
Browser Tool Detection
浏览器工具检测
Same as ux-audit — Chrome MCP, Playwright MCP, or playwright-cli.
与UX审计相同——支持Chrome MCP、Playwright MCP或playwright-cli。
URL Resolution
URL解析规则
Same as ux-audit — prefer deployed/live over localhost.
与UX审计相同——优先使用已部署的线上链接，而非localhost链接。
What to Check
评审检查项
1. Layout and Spacing
1. 布局与间距
| Check | Good | Bad |
|---|---|---|
| Consistent spacing | Same gap between all cards in a grid, same padding in all sections | Some cards have 16px gap, others 24px. Header padding differs from body |
| Alignment | Left edges of content align vertically across sections | Heading starts at one indent, body text at another, cards at a third |
| Breathing room | Generous whitespace around content, elements don't feel cramped | Text touching container edges, buttons crowded against inputs |
| Grid discipline | Content follows a clear column grid | Elements placed freely, no underlying structure |
| Responsive proportions | Sidebar/content ratio looks intentional at every width | Sidebar takes 50% on tablet, content is squeezed |
| Vertical rhythm | Consistent vertical spacing pattern (e.g. 8px/16px/24px/32px scale) | Random spacing: 13px here, 27px there, 8px somewhere else |
| 检查内容 | 合格表现 | 不合格表现 |
|---|---|---|
| 间距一致性 | 网格中所有卡片的间距相同，所有区块的内边距一致 | 部分卡片间距为16px，其他为24px；页眉内边距与正文不一致 |
| 对齐方式 | 各区块内容的左边缘垂直对齐 | 标题缩进位置与正文、卡片的缩进位置各不相同 |
| 留白空间 | 内容周围有充足留白，元素不会显得拥挤 | 文本紧贴容器边缘，按钮与输入框紧密挤压 |
| 网格规范 | 内容遵循清晰的列网格布局 | 元素随意摆放，无底层结构支撑 |
| 响应式比例 | 在任意宽度下，侧边栏/内容区的比例都显得合理 | 平板端侧边栏占比50%，内容区被过度挤压 |
| 垂直韵律 | 遵循统一的垂直间距规范（如8px/16px/24px/32px的层级） | 间距随机：此处13px，彼处27px，另一处8px |
2. Typography
2. 排版
| Check | Good | Bad |
|---|---|---|
| Hierarchy | Clear visual difference between h1 → h2 → h3 → body | Headings and body text look the same size/weight |
| Line length | Body text 50-75 characters per line | Full-width text running 150+ characters — hard to read |
| Line height | Body text 1.5-1.7, headings 1.1-1.3 | Cramped text or excessive line height |
| Font sizes | Consistent scale (e.g. 14/16/20/24/32) | Random sizes: 15px, 17px, 22px with no relationship |
| Weight usage | Regular for body, medium for labels, semibold for headings, bold sparingly | Everything bold, or everything regular with no hierarchy |
| Truncation | Long text truncates with ellipsis, title attribute shows full text | Text overflows container, wraps awkwardly, or is cut off without ellipsis |
| 检查内容 | 合格表现 | 不合格表现 |
|---|---|---|
| 视觉层级 | h1 → h2 → h3 → 正文文本的视觉差异清晰 | 标题与正文文本的字号/字重无明显区分 |
| 行长度 | 正文每行50-75个字符 | 文本撑满宽度，每行超过150个字符——可读性差 |
| 行高 | 正文行高1.5-1.7，标题行高1.1-1.3 | 文本拥挤或行高过大 |
| 字号规范 | 遵循统一的字号层级（如14/16/20/24/32px） | 字号随机：15px、17px、22px，无统一逻辑 |
| 字重使用 | 正文用常规字重，标签用中等字重，标题用半粗体，粗体仅少量使用 | 所有文本都用粗体，或全部用常规字重，无层级区分 |
| 文本截断 | 长文本用省略号截断，标题属性显示完整文本 | 文本溢出容器、换行混乱，或无省略号直接截断 |
3. Colour and Contrast
3. 色彩与对比度
| Check | Good | Bad |
|---|---|---|
| Semantic colour | Using design tokens (bg-primary, text-muted-foreground) | Raw Tailwind colours (bg-blue-500, text-gray-300) |
| Contrast ratio | Text meets WCAG AA (4.5:1 for body, 3:1 for large text) | Light grey text on white, or dark text on dark backgrounds |
| Colour consistency | Same blue means the same thing everywhere (primary = action) | Blue means "clickable" in one place and "informational" in another |
| Dark mode | All elements visible, borders defined, no invisible text | Elements disappear, text becomes unreadable, images look wrong |
| Status colours | Green=success, yellow=warning, red=error consistently | Green used for both success and "active" with different meanings |
| Colour overuse | 2-3 colours + neutrals | Rainbow of colours with no clear hierarchy |
| 检查内容 | 合格表现 | 不合格表现 |
|---|---|---|
| 语义化色彩 | 使用设计令牌（如bg-primary、text-muted-foreground） | 直接使用原始Tailwind颜色（如bg-blue-500、text-gray-300） |
| 对比度 | 文本符合WCAG AA标准（正文4.5:1，大文本3:1） | 浅灰色文本配白色背景，或深色文本配深色背景 |
| 色彩一致性 | 同一蓝色在所有场景下含义一致（如主色代表可操作） | 蓝色在一处代表“可点击”，在另一处代表“信息提示” |
| 深色模式 | 所有元素可见，边框清晰，无不可见文本 | 元素消失、文本无法阅读、图片显示异常 |
| 状态色彩 | 绿色代表成功、黄色代表警告、红色代表错误，且使用一致 | 绿色同时用于成功和“激活”状态，含义混淆 |
| 色彩滥用 | 使用2-3种主色+中性色 | 色彩繁多如彩虹，无清晰层级 |
4. Visual Hierarchy
4. 视觉层级
| Check | Good | Bad |
|---|---|---|
| Primary action | One clear CTA per page, visually dominant | Three equally styled buttons competing for attention |
| Squint test | Squinting at the page, the most important element stands out | Everything is the same visual weight — nothing draws the eye |
| Progressive disclosure | Most important info visible, details available on interaction | Everything shown at once — overwhelming |
| Grouping | Related items are visually grouped (proximity, borders, backgrounds) | Related items scattered, unrelated items touching |
| Negative space | Intentional empty space that frames content | Empty space that looks accidental (uneven, trapped white space) |
| 检查内容 | 合格表现 | 不合格表现 |
|---|---|---|
| 主要操作 | 每页仅有一个清晰的主CTA，视觉上最为突出 | 三个样式相同的按钮争夺注意力 |
| 眯眼测试 | 眯眼查看页面时，最重要的元素依然醒目 | 所有元素视觉权重相同——无任何元素吸引注意力 |
| 渐进式展示 | 最重要的信息直接展示，详情需交互查看 | 所有信息一次性展示——过于繁杂 |
| 分组逻辑 | 相关元素通过邻近性、边框、背景进行视觉分组 | 相关元素分散，无关元素紧挨 |
| 负空间 | 留白是有意设计的，用于衬托内容 | 留白看起来是意外产生的（不均匀、被困的空白） |
5. Component Consistency
5. 组件一致性
| Check | Good | Bad |
|---|---|---|
| Button styles | One primary style, one secondary, one destructive — used consistently | 5 different button styles across the app |
| Card styles | All cards have the same border-radius, shadow, padding | Some cards rounded, some sharp, some with shadows, some without |
| Form inputs | All inputs same height, same border style, same focus ring | Mix of heights, border styles, focus behaviours |
| Icon style | One icon family (Lucide, Heroicons), consistent size and stroke | Mixed icon families, different sizes, some filled some outlined |
| Border radius | Consistent radius scale (e.g. 4px inputs, 8px cards, 12px modals) | Random radius values: 3px, 7px, 10px, 16px |
| Shadow | One or two shadow levels used consistently | Every component has a different shadow depth |
| 检查内容 | 合格表现 | 不合格表现 |
|---|---|---|
| 按钮样式 | 一种主样式、一种次要样式、一种破坏性样式——使用一致 | 应用中存在5种不同的按钮样式 |
| 卡片样式 | 所有卡片的圆角、阴影、内边距都相同 | 部分卡片圆角、部分直角，部分带阴影、部分不带 |
| 表单输入框 | 所有输入框高度相同、边框样式相同、聚焦状态样式相同 | 高度、边框样式、聚焦行为混杂 |
| 图标样式 | 使用同一图标库（如Lucide、Heroicons），尺寸和描边一致 | 混合使用不同图标库，尺寸各异，部分填充、部分轮廓 |
| 圆角规范 | 遵循统一的圆角层级（如输入框4px、卡片8px、模态框12px） | 圆角值随机：3px、7px、10px、16px |
| 阴影规范 | 统一使用1-2种阴影层级 | 每个组件的阴影深度都不同 |
6. Interaction Design
6. 交互设计
| Check | Good | Bad |
|---|---|---|
| Hover states | Buttons, links, and clickable cards change on hover | No hover feedback — user unsure what's clickable |
| Focus states | Keyboard focus visible on all interactive elements | Focus ring missing or invisible against background |
| Active states | Nav items, tabs, sidebar links show current selection | Active item looks the same as inactive |
| Transitions | Subtle transitions on hover/focus (150-200ms ease) | No transitions (jarring) or slow transitions (laggy) |
| Loading indicators | Skeleton screens or spinners during async operations | Content pops in without warning, layout shifts |
| Disabled states | Disabled elements are visually muted, cursor changes | Disabled buttons look clickable, no cursor change |
| 检查内容 | 合格表现 | 不合格表现 |
|---|---|---|
| 悬停状态 | 按钮、链接、可点击卡片在悬停时会有状态变化 | 无悬停反馈——用户不确定哪些元素可点击 |
| 聚焦状态 | 所有交互元素的键盘聚焦状态可见 | 聚焦环缺失，或与背景融合导致不可见 |
| 激活状态 | 导航项、标签页、侧边栏链接能显示当前选中状态 | 激活项与非激活项外观一致 |
| 过渡动画 | 悬停/聚焦时使用微妙的过渡动画（150-200ms缓动） | 无过渡动画（生硬）或过渡动画过慢（卡顿） |
| 加载指示器 | 异步操作时使用骨架屏或加载动画 | 内容突然出现，无预警，导致布局偏移 |
| 禁用状态 | 禁用元素视觉上弱化，光标样式改变 | 禁用按钮看起来仍可点击，光标无变化 |
7. Responsive Quality
7. 响应式质量
| Check | Good | Bad |
|---|---|---|
| Mobile nav | Clean hamburger/sheet menu, easy to tap | Desktop nav squished into mobile, tiny tap targets |
| Image scaling | Images fill containers proportionally | Images stretched, cropped badly, or overflowing |
| Table responsiveness | Horizontal scroll on mobile, or stack to cards | Table wider than screen with no way to see columns |
| Touch targets | At least 44x44px on mobile | Tiny links, close buttons, checkboxes |
| Tablet | Layout works at 768px (not just desktop and phone) | Layout breaks at tablet widths, awkward gaps |
| 检查内容 | 合格表现 | 不合格表现 |
|---|---|---|
| 移动端导航 | 简洁的汉堡菜单/侧边滑出菜单，易于点击 | 桌面端导航直接压缩到移动端，点击目标过小 |
| 图片缩放 | 图片按比例填充容器 | 图片被拉伸、裁剪不当或溢出容器 |
| 表格响应式 | 移动端支持横向滚动，或转换为卡片布局 | 表格宽于屏幕，无法查看全部列 |
| 触摸目标 | 移动端触摸目标至少为44x44px | 链接、关闭按钮、复选框等点击目标过小 |
| 平板适配 | 768px宽度下布局正常（并非仅适配桌面和手机） | 平板宽度下布局崩溃，出现尴尬的空白 |
Severity Guide
严重程度指南
| Level | Meaning | Example |
|---|---|---|
| High | Looks broken or unprofessional | Invisible text in dark mode, buttons different heights inline |
| Medium | Looks unpolished | Inconsistent spacing, mixed icon styles, truncation without ellipsis |
| Low | Nitpick | 1-2px alignment, slightly different border-radius, shadow too strong |
| 等级 | 含义 | 示例 |
|---|---|---|
| 高 | 看起来破碎或不专业 | 深色模式下文本不可见，同一行按钮高度不同 |
| 中 | 看起来不够精致 | 间距不一致、图标样式混杂、无省略号的文本截断 |
| 低 | 细节瑕疵 | 1-2px的对齐偏差、圆角略有不同、阴影过重 |
Output
输出结果
Write findings to :
.jez/artifacts/design-review.mdmarkdown
undefined将评审结果写入：
.jez/artifacts/design-review.mdmarkdown
undefinedDesign Review: [App Name]
设计评审: [应用名称]
Date: YYYY-MM-DD
URL: [url]
日期: YYYY-MM-DD
URL: [链接地址]
Overall Impression
整体印象
[1-2 sentences — professional / unpolished / inconsistent / clean]
[1-2句话——专业/不够精致/不一致/简洁]
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
三大关键修复建议
- [highest visual impact change]
- [second]
- [third]
Take screenshots of findings where the issue is visual (most of them).- [视觉影响最大的修改]
- [次之]
- [第三]
undefinedTips
—
- Check dark mode AND light mode — most issues appear in one but not the other
- The squint test is the fastest way to find hierarchy problems
- Component inconsistency is the most common issue in dev-built UIs
- "Looks off" usually means spacing — check margins and padding first
- If you can't identify the issue, compare to a well-designed app in the same category
—