design-review

jezweb ｜ 設計與前端 ｜ 原文 ｜ MIT

檢查頁面的版面、字型、色彩、一致性等視覺設計夠不夠專業精緻

---
name: design-review
description: "檢視 web app 或頁面的視覺設計品質：版面、字型、間距、色彩、層次、一致性、互動模式和響應式表現。這不是 UX 稽核（那是檢查可用性），這是檢查它看起來夠不夠專業、夠不夠精緻。產出附截圖的設計發現報告。觸發詞：'design review', 'does this look good', 'review the design', 'check the layout', 'is this polished', 'visual review', 'design audit', 'make it look better', 'it looks off'。"
compatibility: claude-code-only
---

# Design Review

檢視 web app 或頁面的視覺設計品質。這不是 UX 稽核（可用性、工作流程、阻力），這是檢查設計是否**專業、一致、精緻**。

目標：一個有設計意識的人看到這個，會覺得「這做得很好」，還是「這看起來是工程師自己設計的」？

## 什麼時候用

- 要給客戶或團隊看之前
- 覺得哪裡「怪怪的」，但說不出為什麼
- 做完一個功能、宣稱完成之前
- 對已上線的產品做定期的品質檢查
- UX 稽核之後，這是視覺面的搭檔

## 瀏覽器工具偵測

跟 ux-audit 一樣：Chrome MCP、Playwright MCP 或 playwright-cli。

## URL 判斷

跟 ux-audit 一樣：優先用已部署的正式環境，不要用 localhost。

## 要檢查什麼

### 1. 版面與間距

| 檢查項目 | 好 | 壞 |
|-------|------|-----|
| **間距一致** | grid 裡所有卡片之間的間隔一樣，所有區塊的 padding 一樣 | 有些卡片間隔 16px，有些 24px。Header 的 padding 跟內文不同 |
| **對齊** | 各區塊的內容左邊緣在垂直方向上對齊 | 標題從一個縮排開始，內文在另一個，卡片又在第三個 |
| **呼吸空間** | 內容周圍有充足的留白，元素不覺得擠 | 文字貼著容器邊緣，按鈕擠在輸入框旁邊 |
| **Grid 紀律** | 內容遵循清楚的欄位 grid | 元素隨意擺放，沒有底層結構 |
| **響應式比例** | 側邊欄/內容的比例在每個寬度下看起來都是刻意的 | 側邊欄在平板上佔 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，彼此沒有關係 |
| **字重使用** | 內文用 regular，標籤用 medium，標題用 semibold，bold 要少用 | 全部都是 bold，或全部都是 regular 沒有層次 |
| **截斷** | 長文字用刪節號截斷，title 屬性顯示完整文字 | 文字溢出容器、換行很怪，或被切掉卻沒有刪節號 |

### 3. 色彩與對比

| 檢查項目 | 好 | 壞 |
|-------|------|-----|
| **語意化的顏色** | 使用 design token（bg-primary、text-muted-foreground） | 直接用 Tailwind 原始色（bg-blue-500、text-gray-300） |
| **對比度** | 文字符合 WCAG AA（內文 4.5:1，大字 3:1） | 白底上用淺灰色文字，或深色背景上用深色文字 |
| **顏色一致性** | 同一種藍色在每個地方都代表同一件事（primary = 動作） | 藍色在某處代表「可點擊」，在另一處代表「資訊」 |
| **深色模式** | 所有元素看得到、邊框清楚、沒有隱形文字 | 元素消失、文字無法閱讀、圖片看起來不對 |
| **狀態色** | 綠色=成功、黃色=警告、紅色=錯誤，始終一致 | 綠色同時用在成功和「啟用中」，兩者意義不同 |
| **色彩濫用** | 2-3 種顏色 + 中性色 | 一堆彩虹般的顏色，沒有清楚的層次 |

### 4. 視覺層次

| 檢查項目 | 好 | 壞 |
|-------|------|-----|
| **主要動作** | 每頁一個清楚的 CTA，視覺上最突出 | 三個樣式相同的按鈕在爭奪注意力 |
| **瞇眼測試** | 瞇著眼看頁面，最重要的元素會跳出來 | 所有東西的視覺重量都一樣，沒有東西吸引目光 |
| **漸進式揭露** | 最重要的資訊看得到，細節在互動時才出現 | 一次顯示所有東西，讓人招架不住 |
| **分組** | 相關的項目在視覺上被分在一起（靠近、邊框、背景） | 相關的項目分散，不相關的項目卻貼在一起 |
| **負空間** | 刻意的留白，用來框住內容 | 看起來像意外的留白（不均勻、被困住的空白） |

### 5. 元件一致性

| 檢查項目 | 好 | 壞 |
|-------|------|-----|
| **按鈕樣式** | 一種 primary、一種 secondary、一種 destructive，且一致地使用 | 整個 app 有 5 種不同的按鈕樣式 |
| **卡片樣式** | 所有卡片的 border-radius、陰影、padding 都一樣 | 有些卡片圓角、有些尖角、有些有陰影、有些沒有 |
| **表單輸入框** | 所有輸入框高度一樣、邊框樣式一樣、focus 外框一樣 | 高度、邊框樣式、focus 行為混雜 |
| **圖示風格** | 一個圖示家族（Lucide、Heroicons），尺寸和線條粗細一致 | 混用不同圖示家族、尺寸不同、有些實心有些空心 |
| **圓角** | 一致的圓角級距（例如輸入框 4px、卡片 8px、modal 12px） | 隨機的圓角值：3px、7px、10px、16px |
| **陰影** | 一致地使用一到兩個陰影層級 | 每個元件的陰影深度都不同 |

### 6. 互動設計

| 檢查項目 | 好 | 壞 |
|-------|------|-----|
| **Hover 狀態** | 按鈕、連結和可點擊的卡片在 hover 時會改變 | 沒有 hover 回饋，使用者不確定什麼可以點 |
| **Focus 狀態** | 所有互動元素都看得到鍵盤 focus | focus 外框不見了，或在背景上看不見 |
| **Active 狀態** | 導覽項目、分頁籤、側邊欄連結顯示目前的選擇 | 目前選中的項目看起來跟其他的一樣 |
| **轉場** | hover/focus 時有細緻的轉場（150-200ms ease） | 沒有轉場（突兀）或轉場太慢（卡頓） |
| **載入指示** | 非同步操作期間有骨架畫面或轉圈圈 | 內容毫無預警地跳出來，版面位移 |
| **停用狀態** | 停用的元素視覺上被弱化，游標會改變 | 停用的按鈕看起來可以點，游標也沒變 |

### 7. 響應式品質

| 檢查項目 | 好 | 壞 |
|-------|------|-----|
| **手機導覽** | 乾淨的漢堡/sheet 選單，容易點 | 桌面導覽被擠進手機裡，點擊目標很小 |
| **圖片縮放** | 圖片按比例填滿容器 | 圖片被拉伸、裁切得很糟，或溢出 |
| **表格的響應式** | 手機上可橫向捲動，或疊成卡片 | 表格比螢幕寬，卻沒辦法看到其他欄位 |
| **觸控目標** | 手機上至少 44x44px | 連結、關閉按鈕、checkbox 很小 |
| **平板** | 版面在 768px 能運作（不只是桌面和手機） | 版面在平板寬度壞掉，出現很怪的空隙 |

## 嚴重程度指南

| 等級 | 意義 | 範例 |
|-------|---------|---------|
| **High** | 看起來壞掉或不專業 | 深色模式下隱形的文字、同一行的按鈕高度不同 |
| **Medium** | 看起來不夠精緻 | 間距不一致、混用圖示風格、截斷時沒有刪節號 |
| **Low** | 吹毛求疵 | 1-2px 的對齊、圓角略有不同、陰影太強 |

## 輸出

把發現寫到 `.jez/artifacts/design-review.md`：

```markdown
# 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 裡最常見的問題
- 「看起來怪怪的」通常是間距的問題，先檢查 margin 和 padding
- 如果你說不出問題在哪，就拿同類別裡設計良好的 app 來比對

---
name: design-review
description: "Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks usability) — this checks whether it looks professional and polished. Produces a design findings report with screenshots. Triggers: 'design review', 'does this look good', 'review the design', 'check the layout', 'is this polished', 'visual review', 'design audit', 'make it look better', 'it looks off'."
compatibility: claude-code-only
---

# Design 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"?

## 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

## Browser Tool Detection

Same as ux-audit — Chrome MCP, Playwright MCP, or playwright-cli.

## URL Resolution

Same as ux-audit — prefer deployed/live over localhost.

## What to Check

### 1. Layout and Spacing

| 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 |

### 2. Typography

| 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 |

### 3. Colour and Contrast

| 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 |

### 4. Visual Hierarchy

| 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) |

### 5. Component Consistency

| 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 |

### 6. Interaction Design

| 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 |

### 7. Responsive Quality

| 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 |

## 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 |

## Output

Write findings to `.jez/artifacts/design-review.md`:

```markdown
# 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]
```

Take screenshots of findings where the issue is visual (most of them).

## Tips

- 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