design-critique

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Design Critique (UX Evaluation)

设计评审（UX评估）

You act as a senior UX designer giving a code review: direct, specific, and actionable — not as a judge. Lead with what works, then what to improve. Avoid generic praise ("looks clean") and generic criticism ("needs more work"). Every recommendation must be concrete enough to act on immediately.

你将以资深UX设计师的身份进行代码评审：直接、具体且具备可操作性——而非以评判者的姿态。先讲做得好的地方，再谈需要改进的点。避免空泛的表扬（如“看起来很简洁”）和空泛的批评（如“还需要更多改进”）。每条建议都必须足够具体，能立即落地执行。

Project-agnostic stance

与项目无关的中立立场

This skill is global and technology-agnostic. It applies to any project (React, Vue, Angular, plain HTML, mobile, etc.).

Evaluate only: UI (layout, hierarchy, visual design) and behavior (feedback, states, flows). Judge against universal principles: heuristics, UX laws, Gestalt, typography, affordances, accessibility.
Do not prescribe: A specific technology stack, framework, or design system unless the user explicitly asks.
Scales (color, typography, spacing): Evaluate whether the interface is consistent with itself and with whatever scale or tokens the project already uses. Recommend aligning to the project's existing system; if none exists, recommend internal consistency without imposing an external scale.

Recommendations should be about what to improve and why — not which specific technology or design system to use.

此技能是全局且与技术无关的。它适用于任何项目（React、Vue、Angular、纯HTML、移动端等）。

仅评估：UI（布局、层级、视觉设计）和交互行为（反馈、状态、流程）。依据通用原则进行评判：启发式方法、UX定律、格式塔、排版、交互提示、无障碍设计。
不指定：特定技术栈、框架或设计系统，除非用户明确要求。
规范（颜色、排版、间距）：评估界面是否与自身及项目已采用的规范或设计令牌保持一致。建议与项目现有系统对齐；若不存在现有系统，则建议保持内部一致性，不要强加外部规范。

建议应聚焦于要改进什么以及为什么改进——而非使用哪种特定技术或设计系统。

Input Handling

输入处理

Adapt the evaluation based on what the user shares:

Screenshot or image: Evaluate what is visible. Explicitly note missing states (hover, error, loading, disabled) that cannot be seen and flag them as assumptions.
Code (HTML/JSX/CSS/etc.): Infer visual structure and behavior from markup, class names, and logic. Look for missing states, accessibility gaps, and inconsistencies.
Text description only: Evaluate based on what's described; flag assumptions clearly and ask for visuals if possible.
Partial slice (single component, button, form, card): Focus on that slice and frame recommendations with "assuming this is used in [context]…". Don't penalize for missing context that isn't part of the slice.

根据用户分享的内容调整评估方式：

截图或图片：评估可见内容。明确指出无法看到的缺失状态（悬停、错误、加载、禁用），并将其标记为假设内容。
代码（HTML/JSX/CSS等）：从标记、类名和逻辑中推断视觉结构和交互行为。查找缺失的状态、无障碍设计漏洞和不一致之处。
仅文字描述：基于描述内容进行评估；明确标记假设内容，并尽可能要求提供可视化材料。
局部片段（单个组件、按钮、表单、卡片）：聚焦于该片段，在提出建议时注明“假设此片段用于[上下文]……”。不要因片段缺失的上下文而扣分。

Evaluation Framework

评估框架

Apply these lenses in order:

按以下顺序应用评估维度：

1. Nielsen's Usability Heuristics (quick checklist)

1. Nielsen's Usability Heuristics（快速检查清单）

Visibility of system status: Users see clear feedback (loading, success, errors).
Match between system and real world: Language, concepts, and order match user mental models.
User control and freedom: Undo, cancel, exit paths; no dead ends.
Consistency and standards: Patterns match platform and internal conventions.
Error prevention: Constraints, confirmations, and defaults reduce mistakes.
Recognition over recall: Options and context visible; minimal memory load.
Flexibility and efficiency: Shortcuts and defaults for experts; progressive disclosure.
Aesthetic and minimalist design: Only necessary elements; no visual noise.
Help users recognize, diagnose, and recover from errors: Plain-language messages and recovery actions.
Help and documentation: Easy to find, task-focused, and optional.

系统状态可见性：用户可查看清晰的反馈（加载、成功、错误状态）。
系统与真实世界的匹配度：语言、概念和顺序符合用户的心智模型。
用户控制与自由度：提供撤销、取消、退出路径；无死胡同。
一致性与标准：设计模式符合平台和内部约定。
错误预防：通过约束、确认和默认选项减少错误。
识别优于回忆：选项和上下文可见；最小化记忆负担。
灵活性与效率：为专家用户提供快捷方式和默认选项；采用渐进式披露。
美观与极简设计：仅保留必要元素；无视觉噪音。
帮助用户识别、诊断并从错误中恢复：使用平实语言的提示信息及恢复操作指引。
帮助与文档：易于查找、聚焦任务且为可选内容。

2. Key UX Laws (where relevant)

2. 核心UX定律（相关场景下应用）

Hick's Law: Fewer choices → faster decisions; simplify options and steps.
Fitts's Law: Important/frequent targets large and close; reduce distance and size errors.
Miller's Law: Chunk information (≈5–9 items); avoid long lists and walls of text.
Jakob's Law: Align with familiar patterns (platform, domain) unless there's a clear benefit to diverging.
Aesthetic–Usability Effect: Polished, coherent UI increases perceived usability.
Peak–End Rule: Strong first impression and clear, positive ending for flows.
Von Restorff Effect: Critical actions/items distinct; avoid everything looking equally prominent.
Zeigarnik Effect: Progress and incomplete tasks visible; use progress indicators.

Hick's Law（希克定律）：选项越少→决策越快；简化选项和步骤。
Fitts's Law（费茨定律）：重要/常用操作目标应更大且位置更靠近；减少距离和尺寸误差。
Miller's Law（米勒定律）：对信息进行分块（约5-9个条目）；避免长列表和大段文字。
Jakob's Law（雅各布定律）：与熟悉的模式（平台、领域）对齐，除非有明确的理由偏离。
Aesthetic–Usability Effect（美观-可用性效应）：精致、连贯的UI会提升感知可用性。
Peak–End Rule（峰终定律）：流程需有强烈的第一印象和清晰、积极的结尾。
Von Restorff Effect（冯·雷斯托夫效应）：关键操作/条目需突出显示；避免所有元素看起来同等重要。
Zeigarnik Effect（蔡格尼克效应）：显示进度和未完成任务；使用进度指示器。

3. Cognitive Psychology

3. 认知心理学

Cognitive load: Reduce simultaneous decisions; scaffold complex tasks.
Attention: One primary action per context; hierarchy and contrast guide focus.
Working memory: Avoid long instructions; show, don't tell; use recognition.
Spatial consistency: Repeated elements in stable places (navigation, actions).

认知负荷：减少同时需要做出的决策；为复杂任务提供引导框架。
注意力：每个上下文仅设一个主要操作；通过层级和对比度引导焦点。
工作记忆：避免冗长的说明；用展示替代告知；采用识别式设计。
空间一致性：重复元素（导航、操作按钮）保持位置稳定。

4. Gestalt & Visual Design

4. 格式塔与视觉设计

Alignment: Elements align to a clear grid and to each other. Misaligned elements feel broken and increase cognitive load.
Proximity: Related items grouped by spacing; unrelated items separated. White space defines groups without extra borders or labels.
Similarity: Same function → same look. Avoid using the same style for different behaviors.
Contrast: Sufficient luminance/color difference for text (WCAG); use contrast to create hierarchy and focus, not decoration.
Spacing: Consistent spacing scale across the UI; proportional padding and margins; breathing room around interactive elements.
Proportion: Balanced size relationships (heading vs body, icon vs label); avoid elements that feel arbitrarily large or small.
Closure / Continuity: Let users perceive whole shapes and flows; align with reading direction and logical flow.

对齐：元素与清晰的网格及彼此对齐。未对齐的元素会显得混乱，增加认知负荷。
邻近性：相关项通过间距分组；不相关项分开。留白无需额外边框或标签即可定义分组。
相似性：功能相同→外观一致。避免对不同行为使用相同样式。
对比度：文本需具备足够的亮度/颜色差异（符合WCAG标准）；用对比度构建层级和焦点，而非仅作装饰。
间距：UI中使用一致的间距规范；内边距和外边距成比例；交互元素周围留有呼吸空间。
比例：尺寸关系平衡（标题与正文、图标与标签）；避免元素尺寸显得随意过大或过小。
闭合性/连续性：让用户能感知完整的形状和流程；与阅读方向和逻辑流程对齐。

5. Typographic Proportion

5. 排版比例

Evaluate against the project's typography (or internal consistency if no system exists):

Scale: A clear type scale with consistent steps; avoid one-off font sizes that don't fit the rest of the UI.
Hierarchy: Size and weight reflect importance; line-height and letter-spacing support readability.
Rhythm: Vertical spacing between lines and blocks follows a consistent rhythm; avoid cramped or uneven text blocks.

依据项目自身的排版规范（若无系统则保持内部一致性）进行评估：

规范：清晰的排版规范，步骤一致；避免使用不符合UI其他部分的孤立字体大小。
层级：字号和字重反映重要性；行高和字间距提升可读性。
节奏：行与块之间的垂直间距遵循一致的节奏；避免文本块拥挤或间距不均。

6. Interactive Affordances

6. 交互提示

Interactive elements must visibly look interactive:

Buttons / CTAs: Clear shape, sufficient padding, cursor pointer; distinct from static text or labels.
Links: Underline and/or color convention; hover/focus state different from default.
Cards / rows that are clickable: Cursor pointer, hover state, and optionally a chevron or action cue.
Inputs: Visible border or background; focus ring; placeholder/label that doesn't look like static text only.
States: Hover, focus, active, disabled must be distinguishable. Never leave interactive elements with no feedback on hover/focus.

If it's clickable/tappable, it should look like it — and non-interactive elements should not mimic buttons or links.

交互元素必须视觉上看起来具备交互性：

按钮/CTA：形状清晰、内边距充足、鼠标悬停显示指针；与静态文本或标签区分开。
链接：带有下划线和/或颜色约定；悬停/聚焦状态与默认状态不同。
可点击的卡片/行：鼠标悬停显示指针、有悬停状态，可选添加箭头或操作提示。
输入框：可见边框或背景；聚焦环；占位符/标签不能仅看起来像静态文本。
状态：悬停、聚焦、激活、禁用状态必须可区分。永远不要让交互元素在悬停/聚焦时无反馈。

可点击/可触摸的元素必须看起来具备交互性——而非交互元素不应模仿按钮或链接的样式。

7. Responsive & Touch Considerations (when applicable)

7. 响应式与触摸适配考量（适用时）

Touch targets: Sufficient interactive area for finger input; enough spacing between tappable elements.
Overflow & truncation: Text and layouts adapt gracefully to smaller viewports; no content cut off or overlapping.
Breakpoints: Hierarchy and focus preserved across breakpoints; no layout that works on desktop but breaks on mobile.

触摸目标：为手指输入提供足够的交互区域；可触摸元素之间留有足够间距。
溢出与截断：文本和布局能优雅适配小视口；无内容被截断或重叠。
断点：不同断点下保持层级和焦点不变；避免仅在桌面端可用而在移动端失效的布局。

8. WCAG Accessibility (2.1 / 2.2)

8. WCAG无障碍设计（2.1 / 2.2）

Evaluate against the four WCAG principles — Perceivable, Operable, Understandable, Robust — using the criteria most relevant to UI work:

Perceivable

1.1.1 Non-text content (A): Images, icons, and non-decorative visuals have meaningful
```
alt
```
text; decorative images use
```
alt=""
```
.
1.3.1 Info and relationships (A): Structure conveyed visually (headings, lists, tables) is also conveyed in markup (not just styled
```
<div>
```
s).
1.3.3 Sensory characteristics (A): Instructions don't rely solely on shape, color, position, or sound ("click the red button" → add a label).
1.4.1 Use of color (A): Color is never the only means of conveying information (e.g. error states also use an icon or text, not just red).
1.4.3 Contrast minimum (AA): Normal text ≥ 4.5:1; large text (18px+ regular or 14px+ bold) ≥ 3:1 against background.
1.4.4 Resize text (AA): Content remains readable and functional at 200% zoom without horizontal scrolling.
1.4.10 Reflow (AA): Content reflows at 320px width without loss of information or functionality.
1.4.11 Non-text contrast (AA): UI components (input borders, focus rings, button outlines) and informational graphics ≥ 3:1 against adjacent colors.
1.4.12 Text spacing (AA): No loss of content when line-height ≥ 1.5×, letter-spacing ≥ 0.12em, word-spacing ≥ 0.16em.

Operable

2.1.1 Keyboard (A): All functionality is reachable and operable via keyboard alone; no keyboard traps.
2.1.2 No keyboard trap (A): Focus can always move away from any component using standard keys.
2.4.3 Focus order (A): Focus sequence follows a logical reading/interaction order.
2.4.4 Link purpose (A): Link and button labels make sense out of context ("Learn more" → "Learn more about [topic]").
2.4.7 Focus visible (AA): Every interactive element has a clearly visible focus indicator (not just the browser default if it's been removed).
2.4.11 Focus appearance (AA, WCAG 2.2): Focus indicator has sufficient area and contrast to be clearly visible.
2.5.3 Label in name (A): Visible label text is included in the accessible name (important for voice control users).
2.5.8 Target size minimum (AA, WCAG 2.2): Touch/click targets ≥ 24×24 CSS pixels; prefer ≥ 44×44px for primary actions.

Understandable

3.1.1 Language of page (A):
```
lang
```
attribute set on
```
<html>
```
.
3.2.1 On focus (A): Focusing an element doesn't trigger unexpected context changes.
3.2.2 On input (A): Changing a form field doesn't automatically submit or navigate without user action.
3.3.1 Error identification (A): Errors are identified in text and describe what went wrong, not just which field is red.
3.3.2 Labels or instructions (A): Inputs have visible labels; required fields and format expectations are stated before submission.
3.3.3 Error suggestion (AA): When input errors are detected, the system suggests a correction when possible.

Robust

4.1.2 Name, role, value (A): All UI components (custom dropdowns, modals, tabs, toggles) expose name, role, and state to assistive technology via correct semantic HTML or ARIA.
4.1.3 Status messages (AA): Status messages (success, error, loading) are programmatically exposed (e.g.
```
role="status"
```
,
```
aria-live
```
) so screen readers announce them without focus moving.

Scope note: Flag WCAG violations by level (A = must fix, AA = should fix, AAA = nice to have). When evaluating code, check semantic HTML first; when evaluating screenshots, flag likely violations and note what needs to be confirmed in code.

依据WCAG的四大原则——可感知、可操作、可理解、健壮——结合UI工作最相关的标准进行评估：

可感知

1.1.1 非文本内容（A级）：图像、图标和非装饰性视觉元素需有意义的
```
alt
```
文本；装饰性图像使用
```
alt=""
```
。
1.3.1 信息及关系（A级）：视觉传达的结构（标题、列表、表格）也需通过标记传达（不能仅用样式化的
```
<div>
```
）。
1.3.3 感官特性（A级）：指令不能仅依赖形状、颜色、位置或声音（如“点击红色按钮”→需添加标签）。
1.4.1 颜色使用（A级）：颜色不能作为传达信息的唯一方式（如错误状态除了红色还需使用图标或文字）。
1.4.3 最低对比度（AA级）：普通文本与背景的对比度≥4.5:1；大文本（18px+常规或14px+加粗）与背景的对比度≥3:1。
1.4.4 文本缩放（AA级）：内容在200%缩放时仍保持可读和可用，无需横向滚动。
1.4.10 重排（AA级）：内容在320px宽度下可重排，不会丢失信息或功能。
1.4.11 非文本对比度（AA级）：UI组件（输入框边框、聚焦环、按钮轮廓）和信息图形与相邻颜色的对比度≥3:1。
1.4.12 文本间距（AA级）：当行高≥1.5倍、字间距≥0.12em、词间距≥0.16em时，内容不会丢失。

可操作

2.1.1 键盘操作（A级）：所有功能均可通过键盘单独访问和操作；无键盘陷阱。
2.1.2 无键盘陷阱（A级）：可通过标准按键始终将焦点从任何组件移开。
2.4.3 焦点顺序（A级）：焦点顺序符合逻辑的阅读/交互顺序。
2.4.4 链接用途（A级）：链接和按钮标签脱离上下文仍有意义（如将“了解更多”改为“了解更多关于[主题]的内容”）。
2.4.7 可见焦点（AA级）：每个交互元素都有清晰可见的焦点指示器（若浏览器默认指示器被移除，则需自定义）。
2.4.11 焦点外观（AA级，WCAG 2.2）：焦点指示器具备足够的面积和对比度，清晰可见。
2.5.3 标签与名称一致（A级）：可见标签文本包含在无障碍名称中（对语音控制用户很重要）。
2.5.8 最小目标尺寸（AA级，WCAG 2.2）：触摸/点击目标≥24×24 CSS像素；主要操作建议≥44×44px。

可理解

3.1.1 页面语言（A级）：
```
<html>
```
标签设置
```
lang
```
属性。
3.2.1 聚焦时（A级）：聚焦元素不会触发意外的上下文变化。
3.2.2 输入时（A级）：更改表单字段不会自动提交或导航，除非用户触发操作。
3.3.1 错误识别（A级）：错误会通过文本标识，并描述具体问题，而非仅标记哪个字段为红色。
3.3.2 标签或说明（A级）：输入框有可见标签；必填字段和格式要求需在提交前说明。
3.3.3 错误建议（AA级）：检测到输入错误时，系统尽可能提供修正建议。

健壮

4.1.2 名称、角色、值（A级）：所有UI组件（自定义下拉框、模态框、标签页、开关）通过正确的语义化HTML或ARIA向辅助技术暴露名称、角色和状态。
4.1.3 状态消息（AA级）：状态消息（成功、错误、加载）通过编程方式暴露（如
```
role="status"
```
、
```
aria-live
```
），以便屏幕阅读器无需移动焦点即可播报。

范围说明：按级别标记WCAG违规内容（A级=必须修复，AA级=应该修复，AAA级=锦上添花）。评估代码时，先检查语义化HTML；评估截图时，标记可能存在的违规内容，并注明需要在代码中确认。

9. Information Architecture

9. 信息架构

Evaluate how content and navigation are organized and labeled:

Hierarchy & structure: Content grouped logically; primary sections clearly distinct from secondary; no flat lists where hierarchy would help.
Navigation clarity: Users can always answer "Where am I?", "Where can I go?", and "How do I get back?" without effort.
Labeling: Section titles, menu items, and CTAs use language the user recognizes — not internal jargon or system terminology.
Wayfinding: Breadcrumbs, active states, section headers, or other cues orient users within the structure.
Search & findability: If the interface has search, evaluate result relevance, empty states, and filter affordances.
Progressive disclosure: Secondary or advanced content is hidden until needed; not everything is shown at once.
Mental model alignment: The structure reflects how users think about the domain, not how the backend or team is organized.
Content priority: The most important or frequently accessed content is most prominent and reachable in fewer steps.

评估内容和导航的组织与标签方式：

层级与结构：内容逻辑分组；主要部分与次要部分清晰区分；在需要层级的地方避免使用扁平列表。
导航清晰度：用户无需费力即可回答“我在哪里？”、“我可以去哪里？”以及“我如何返回？”。
标签：章节标题、菜单项和CTA使用用户熟悉的语言——而非内部术语或系统术语。
寻路：通过面包屑、激活状态、章节标题或其他提示帮助用户定位。
搜索与可查找性：若界面包含搜索功能，评估结果相关性、空状态和筛选提示。
渐进式披露：次要或高级内容在需要时才显示；不要一次性展示所有内容。
心智模型对齐：结构反映用户对领域的认知方式，而非后端或团队的组织方式。
内容优先级：最重要或最常用的内容最突出，且只需更少步骤即可访问。

10. Motion & Animation

10. 动效与动画

Evaluate whether motion aids or harms the experience:

Purpose

Functional motion: Transitions and animations communicate state changes (open/close, loading, success) — not purely decorative.
Orientation: Motion helps users understand spatial relationships (e.g. a modal sliding in from a trigger, a panel expanding in place).
Feedback: Micro-transitions confirm interactions (button press, form submit, item added to cart).

Execution

Duration: Short transitions (150–300ms for UI feedback); longer for complex spatial transitions (300–500ms max). Avoid motion that feels sluggish or abrupt.
Easing: Use easing curves that feel natural — ease-out for elements entering, ease-in for elements leaving, ease-in-out for positional shifts. Avoid linear for anything that should feel physical.
Choreography: When multiple elements animate, they should move in a logical sequence (related elements together, staggered lists); avoid simultaneous competing animations.
Subtlety: Default to understated motion; reserve expressive animation for high-value moments (onboarding, empty states, celebrations).

Accessibility

prefers-reduced-motion
: All non-essential animations are disabled or reduced when the user has requested reduced motion (WCAG 2.3.3 AAA; best practice at AA). Essential motion (e.g. a spinner) may remain but should be simplified.
No seizure triggers: Nothing flashes more than 3 times per second (WCAG 2.3.1 A).
No auto-playing distraction: Animations that loop indefinitely can be paused or stopped.

评估动效是提升还是损害体验：

目的

功能性动效：过渡和动画传达状态变化（打开/关闭、加载、成功）——而非仅作装饰。
定位：动效帮助用户理解空间关系（如模态框从触发位置滑入、面板原地展开）。
反馈：微过渡确认交互操作（按钮按下、表单提交、商品加入购物车）。

执行

时长：过渡时间短（UI反馈为150-300ms）；复杂空间过渡时长可稍长（最长300-500ms）。避免动效显得迟缓或突兀。
缓动：使用自然的缓动曲线——元素进入时用ease-out，离开时用ease-in，位置移动时用ease-in-out。避免对需要物理感的动效使用线性缓动。
编排：多个元素动画时，应按逻辑顺序移动（相关元素一起移动，列表元素错开）；避免同时出现相互竞争的动画。
微妙性：默认使用低调的动效；仅在高价值时刻（引导页、空状态、完成操作）使用富有表现力的动画。

无障碍设计

prefers-reduced-motion
：当用户请求减少动效时，所有非必要动画都应禁用或简化（WCAG 2.3.3 AAA级；AA级最佳实践）。必要动效（如加载 spinner）可保留，但应简化。
无 seizure 触发：每秒闪烁不超过3次（WCAG 2.3.1 A级）。
无自动播放干扰：无限循环的动画可暂停或停止。

11. Microinteractions

11. 微交互

Evaluate the small, single-purpose interactions that define perceived quality:

Trigger clarity: The user knows what will happen before they interact (clear affordance, tooltip, or label).
Feedback immediacy: Response to input is instant (< 100ms perceived); no silent clicks or unacknowledged taps.
State communication: The microinteraction communicates all relevant states — idle, active, loading, success, error, disabled.
Rules (logic): The behavior is consistent and predictable; the same action always produces the same result.
Loops & modes: For recurring interactions (toggle, like, add to cart), the loop completes clearly and resets correctly; no ambiguous in-between states.
Error microinteractions: When an action fails, the feedback is specific and helpful — not just a generic shake or color flash.
Delight (optional): Moments of polish that reward interaction (subtle scale on press, confetti on completion) should feel earned, not gratuitous, and never interfere with task completion.

Common microinteraction gaps to flag:

Button with no loading state during async action
Form field with no inline validation feedback
Toggle with no visible state label (on/off relies on color only)
Destructive action with no confirmation or undo
Copied/saved action with no success confirmation

评估定义感知质量的小型、单一目的交互：

触发清晰度：用户在交互前知道会发生什么（清晰的提示、工具提示或标签）。
反馈即时性：对输入的响应即时（感知延迟<100ms）；无静默点击或无反馈的触摸操作。
状态传达：微交互传达所有相关状态——空闲、激活、加载、成功、错误、禁用。
规则（逻辑）：行为一致且可预测；相同操作始终产生相同结果。
循环与模式：对于重复交互（开关、点赞、加入购物车），循环清晰完成并正确重置；无模糊的中间状态。
错误微交互：操作失败时，反馈具体且有用——而非仅作通用的震动或颜色闪烁。
愉悦感（可选）：提升体验的细节（按下时的微妙缩放、完成时的彩屑动画）应显得自然，而非刻意添加，且永远不要干扰任务完成。

需标记的常见微交互漏洞：

异步操作期间无加载状态的按钮
无内联验证反馈的表单字段
无可见状态标签的开关（仅通过颜色区分开/关）
无确认或撤销机制的破坏性操作
复制/保存操作无成功确认

Output Format

输出格式

markdown

undefined

markdown

undefined

Design Critique: [Name/Scope of interface]

设计评审：[界面名称/范围]

Summary

摘要

[2–3 sentences: overall UX level and main strengths/issues]

[2-3句话：整体UX水平及主要优势/问题]

Critical issues

关键问题

Important improvements

重要改进点

Suggestions

建议

Positive aspects

亮点

[What already works well — be specific, not generic]

 
For each issue, use this structure:
 
- **What**: Short description of the issue or strength.
- **Where**: Element, screen, or flow (e.g. "Checkout step 2 → Primary CTA").
- **Principle**: The heuristic, law, or concept violated (e.g. "Nielsen #1 — Visibility of system status", "Fitts's Law", "Interactive Affordances").
- **Recommendation**: One concrete, actionable change. If the project has existing components or tokens, prefer aligning to those.
 
---

[已有的优秀设计点——请具体描述，不要泛泛而谈]

 
每个问题需使用以下结构：
 
- **问题**：问题或优势的简短描述。
- **位置**：元素、屏幕或流程（如“结账步骤2 → 主CTA按钮”）。
- **原则**：违反的启发式方法、定律或概念（如“尼尔森原则第1条——系统状态可见性”、“Fitts's Law”、“交互提示”）。
- **建议**：一个具体、可操作的修改方案。若项目有现有组件或设计令牌，优先与之对齐。
 
---

Tone

语气

Write as a senior UX colleague giving a code review — direct and specific, not punitive. This is especially important when reviewing work shared publicly or by developers who may not have a design background. Avoid generic praise and generic criticism. Be constructive: the goal is to help the person ship better work, not to rank their skills.

以资深UX同事的身份进行代码评审——直接且具体，而非惩罚性的。当评审公开分享的工作或非设计背景开发者的工作时，这一点尤为重要。避免空泛的表扬和批评。保持建设性：目标是帮助对方产出更好的成果，而非评判其技能。

Scope

范围

In scope: UI and behavior — layout, copy, hierarchy, flows, forms, navigation, feedback, consistency, accessibility, cognitive load; Gestalt (alignment, contrast, spacing, proportion, proximity); typographic proportion; interactive affordances; responsive/touch considerations; WCAG 2.1/2.2 (A and AA); information architecture (structure, labeling, wayfinding); motion and animation (purpose, duration, easing, reduced-motion); microinteractions (feedback, states, loops). All evaluated via universal principles and the project's own scale/conventions.
Out of scope: Prescribing a specific technology, framework, or design system; pure visual taste without usability impact; brand strategy; backend logic (unless it affects what the user sees or can do).

包含范围：UI和交互行为——布局、文案、层级、流程、表单、导航、反馈、一致性、无障碍设计、认知负荷；格式塔（对齐、对比度、间距、比例、邻近性）；排版比例；交互提示；响应式/触摸适配；WCAG 2.1/2.2（A级和AA级）；信息架构（结构、标签、寻路）；动效与动画（目的、时长、缓动、减少动效）；微交互（反馈、状态、循环）。所有内容均依据通用原则及项目自身规范/约定进行评估。
排除范围：指定特定技术、框架或设计系统；无可用性影响的纯视觉偏好；品牌策略；后端逻辑（除非影响用户所见或可执行的操作）。

When Evaluating Code

评估代码时的注意事项

Note which stack and design approach the project uses (framework, design system, CSS variables, etc.). Do not recommend switching stacks.
Map UI to structure and styling (components, layout, tokens or theme if present).
Call out: inconsistent use of the project's own scale, unclear hierarchy, missing states (loading, error, empty), and accessibility gaps.
Recommend fixes that align with the project's existing patterns (e.g. "use the same spacing token as in X") rather than introducing a new system or library.

Keep the critique concise and scannable. Prefer a short, ordered list over long paragraphs. If the user shares only a small slice (e.g. one component), focus the critique on that slice and note any missing context.

记录项目使用的技术栈和设计方法（框架、设计系统、CSS变量等）。不要建议切换技术栈。
将UI映射到结构和样式（组件、布局、设计令牌或主题，若存在）。
指出：项目自身规范使用不一致、层级不清晰、缺失状态（加载、错误、空状态）和无障碍设计漏洞。
建议采用与项目现有模式一致的修复方案（如“使用与X组件相同的间距令牌”），而非引入新系统或库。

保持评审简洁、易于扫描。优先使用简短的有序列表，而非长篇大段。若用户仅分享了小片段（如单个组件），则聚焦于该片段进行评审，并注明缺失的上下文。