Back to Details

frontend-design-review

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Frontend Design Review

前端设计评审

Overview

概述

This skill provides expert guidance for conducting thorough frontend design reviews, covering UI/UX design quality, design system consistency, accessibility compliance, and responsive design patterns. The skill helps identify design issues early in the development lifecycle, ensuring designs meet quality standards, accessibility requirements, and business objectives before implementation.
本Skill提供专业的前端设计评审指导，涵盖UI/UX设计质量、设计系统一致性、无障碍合规性及响应式设计模式。该Skill可在开发周期早期识别设计问题，确保设计在落地前符合质量标准、无障碍要求及业务目标。

Core Capabilities

核心能力

1. UI/UX Design Quality Review

1. UI/UX设计质量评审

  • Visual design assessment (typography, color, spacing, layout, visual hierarchy)
  • User experience evaluation (flows, interactions, navigation, usability)
  • Design consistency verification across screens and journeys
  • Brand alignment and visual identity validation
  • Cognitive load analysis
  • 视觉设计评估（排版、色彩、间距、布局、视觉层级）
  • 用户体验评估（流程、交互、导航、可用性）
  • 跨页面与用户旅程的设计一致性验证
  • 品牌调性与视觉识别匹配度验证
  • 认知负荷分析

2. Design System Validation

2. 设计系统验证

  • Component library review (design, variants, states, reusability)
  • Design tokens validation (colors, typography, spacing)
  • Pattern library assessment for consistency
  • Documentation quality evaluation
  • Design system governance assessment
  • 组件库评审（设计、变体、状态、复用性）
  • Design Tokens验证（色彩、排版、间距）
  • 模式库一致性评估
  • 文档质量评估
  • 设计系统治理评估

3. Accessibility Compliance

3. 无障碍合规性

  • WCAG 2.1 AA compliance verification
  • Color contrast validation (4.5:1 text, 3:1 UI components)
  • Keyboard navigation and focus management
  • Screen reader support validation
  • Accessible interaction patterns review
  • WCAG 2.1 AA合规性验证
  • 色彩对比度验证（文本4.5:1，UI组件3:1）
  • 键盘导航与焦点管理检查
  • 屏幕阅读器支持验证
  • 无障碍交互模式评审

4. Responsive Design Review

4. 响应式设计评审

  • Breakpoint strategy evaluation
  • Mobile-first approach assessment
  • Touch target sizing verification (44x44px minimum)
  • Content adaptation across viewports
  • Performance considerations
  • 断点策略评估
  • 移动优先方法验证
  • 触摸目标尺寸检查（最小44x44px）
  • 多视口内容适配性评估
  • 性能考量分析

5. Component Architecture Assessment

5. 组件架构评估

  • Component hierarchy and composition patterns
  • Reusability and flexibility evaluation
  • State management review (default, hover, active, disabled, error, loading)
  • Component variants and customization patterns
  • Component documentation quality
  • 组件层级与组合模式分析
  • 复用性与灵活性评估
  • 状态管理评审（默认、悬停、激活、禁用、错误、加载）
  • 组件变体与自定义模式分析
  • 组件文档质量评估

Workflow

工作流程

Phase 1: Pre-Review Preparation

阶段1：评审前准备

1. Gather Design Assets
  • Collect Figma/Sketch files, design specifications, mockups
  • Obtain design system documentation and component library
  • Review brand guidelines and style guides
  • Gather user research findings and personas
2. Understand Context
  • Review project requirements and business objectives
  • Understand target users and use cases
  • Identify key user journeys and critical flows
  • Note technical constraints and platform requirements
3. Define Review Scope
  • Identify screens/flows to review
  • Determine review depth (high-level vs. detailed)
  • Set priorities based on importance
  • Establish timeline and deliverables
1. 收集设计资产
  • 收集Figma/Sketch文件、设计规范、原型图
  • 获取设计系统文档与组件库
  • 查阅品牌指南与风格手册
  • 收集用户研究结果与用户画像
2. 理解业务上下文
  • 查阅项目需求与业务目标
  • 明确目标用户与使用场景
  • 识别关键用户旅程与核心流程
  • 记录技术约束与平台要求
3. 定义评审范围
  • 确定需评审的页面/流程
  • 明确评审深度（高层级vs细节级）
  • 根据重要性设置优先级
  • 制定时间线与交付物

Phase 2: Conduct Design Review

阶段2：开展设计评审

Step 1: Visual Design Review
  • Assess typography (font selection, type scale, line heights, consistency)
  • Evaluate color system (palette, contrast, semantic usage, tokens)
  • Review spacing and layout (grid system, whitespace, alignment)
  • Check visual hierarchy (size, color, position, emphasis)
  • Validate iconography (style, size, clarity, consistency)
  • Assess imagery and media (quality, aspect ratios, optimization)
Step 2: Design System Compliance
  • Verify component usage matches design system
  • Check for design token usage (no hard-coded values)
  • Identify deviations from established patterns
  • Validate component variants and states
  • Review custom components vs. system components
Step 3: Accessibility Audit
  • Test color contrast ratios for all text and UI elements
  • Verify keyboard navigation and tab order
  • Check focus indicators visibility and clarity
  • Validate ARIA labels and semantic structure
  • Review alternative text for images
  • Assess form label associations
  • Test interactive element accessibility
Step 4: Responsive Design Evaluation
  • Review breakpoint strategy (mobile, tablet, desktop)
  • Check content adaptation at different viewports
  • Verify touch target sizes on mobile
  • Assess navigation patterns for mobile
  • Review image responsiveness and optimization
  • Validate typography scaling across devices
Step 5: Component Architecture Analysis
  • Evaluate component organization and hierarchy
  • Review component reusability and composition
  • Check component state coverage
  • Assess variant design and flexibility
  • Validate component props and customization
Step 6: User Experience Assessment
  • Analyze user flows and task completion paths
  • Evaluate navigation structure and findability
  • Check interaction patterns and feedback
  • Assess error states and error handling
  • Review empty states and loading states
  • Validate form design and validation patterns
步骤1：视觉设计评审
  • 评估排版（字体选择、字号层级、行高、一致性）
  • 分析色彩系统（调色板、对比度、语义化使用、Tokens）
  • 评审间距与布局（网格系统、留白、对齐方式）
  • 检查视觉层级（尺寸、色彩、位置、强调方式）
  • 验证图标系统（风格、尺寸、清晰度、一致性）
  • 评估图片与媒体（质量、宽高比、优化程度）
步骤2：设计系统合规性检查
  • 验证组件使用是否符合设计系统规范
  • 检查Design Tokens使用情况（无硬编码值）
  • 识别与既定模式的偏差
  • 验证组件变体与状态
  • 评审自定义组件与系统组件的差异
步骤3：无障碍审计
  • 测试所有文本与UI元素的色彩对比度
  • 验证键盘导航与Tab键顺序
  • 检查焦点指示器的可见性与清晰度
  • 验证ARIA标签与语义化结构
  • 评审图片替代文本
  • 评估表单标签关联
  • 测试交互元素的无障碍性
步骤4：响应式设计评估
  • 评审断点策略（移动端、平板端、桌面端）
  • 检查不同视口下的内容适配情况
  • 验证移动端触摸目标尺寸
  • 评估移动端导航模式
  • 评审图片响应式与优化情况
  • 验证跨设备排版缩放
步骤5：组件架构分析
  • 评估组件组织与层级
  • 评审组件复用性与组合方式
  • 检查组件状态覆盖情况
  • 评估变体设计与灵活性
  • 验证组件属性与自定义能力
步骤6：用户体验评估
  • 分析用户流程与任务完成路径
  • 评估导航结构与可查找性
  • 检查交互模式与反馈机制
  • 评估错误状态与错误处理方式
  • 评审空状态与加载状态
  • 验证表单设计与校验模式

Phase 3: Document Findings

阶段3：记录评审结果

1. Categorize Issues by Severity
  • Critical: Blocking issues, must fix before launch
  • High: Significant usability/accessibility issues
  • Medium: Issues with workarounds, should fix soon
  • Low: Minor polish, nice-to-haves
2. Create Detailed Findings Report See design-review-report-template.md for comprehensive report structure
Include:
  • Executive summary with key statistics
  • Review scope documentation
  • Findings by category with specific examples
  • Severity-rated issue list
  • Positive observations (what's working well)
  • Actionable recommendations with priorities
  • Action items with owners and timelines
3. Provide Visual Examples
  • Screenshot issues with annotations
  • Show before/after for recommendations
  • Include contrast ratio measurements
  • Document component state issues visually
1. 按严重程度分类问题
  • 关键：阻塞性问题，上线前必须修复
  • 高优先级：严重影响可用性/无障碍性的问题
  • 中优先级：存在替代方案，应尽快修复
  • 低优先级：细节优化项，锦上添花的改进
2. 生成详细结果报告 参考design-review-report-template.md获取完整报告结构
报告包含：
  • 关键数据执行摘要
  • 评审范围文档
  • 按分类整理的问题及具体示例
  • 带严重程度评级的问题列表
  • 正面观察结果（表现良好的部分）
  • 可落地的优先级改进建议
  • 带负责人与时间线的行动项
3. 提供视觉示例
  • 带标注的问题截图
  • 建议方案的前后对比图
  • 包含对比度测量结果
  • 可视化记录组件状态问题

Phase 4: Collaborate on Solutions

阶段4：协作制定解决方案

1. Prioritize Fixes
  • Separate must-fix from nice-to-have
  • Consider implementation effort
  • Balance user impact with development cost
2. Create Action Plan
  • Assign owners (design team vs. development team)
  • Set realistic timelines
  • Schedule follow-up review
3. Document Decisions
  • Record accepted risks or trade-offs
  • Note items deferred to future work
  • Update design system if patterns change
1. 优先级排序修复项
  • 区分必须修复与锦上添花的改进
  • 考虑实现成本
  • 平衡用户影响与开发成本
2. 制定行动计划
  • 分配负责人（设计团队vs开发团队）
  • 设定合理时间线
  • 安排跟进评审
3. 记录决策结果
  • 记录已接受的风险或权衡方案
  • 记录推迟至未来版本的事项
  • 若模式变更则更新设计系统

Severity Level Guidelines

严重程度指南

Critical (Blocking)
  • Violates WCAG AA requirements (legal risk)
  • Completely blocks core user tasks
  • Causes data loss or security issues
  • Severely damages brand or user trust
High Priority
  • Significantly degrades user experience
  • Impacts large number of users
  • Creates major accessibility barriers
  • Inconsistent with design system causing confusion
Medium Priority
  • Negatively impacts experience but has workarounds
  • Affects subset of users
  • Minor accessibility issues (WCAG AAA)
  • Design inconsistencies that are noticeable
Low Priority
  • Polish and optimization items
  • Edge case issues
  • Minor visual refinements
  • Nice-to-have enhancements
关键（阻塞性）
  • 违反WCAG AA要求（法律风险）
  • 完全阻塞核心用户任务
  • 导致数据丢失或安全问题
  • 严重损害品牌或用户信任
高优先级
  • 显著降低用户体验
  • 影响大量用户
  • 造成重大无障碍障碍
  • 与设计系统不一致导致用户困惑
中优先级
  • 负面影响体验但存在替代方案
  • 影响部分用户
  • 轻微无障碍问题（WCAG AAA）
  • 明显的设计不一致
低优先级
  • 细节优化项
  • 边缘场景问题
  • 轻微视觉改进
  • 锦上添花的增强功能

Accessibility Quick Reference

无障碍快速参考

WCAG 2.1 AA Requirements:
  • Color contrast: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold)
  • UI component contrast: 3:1 minimum
  • Keyboard accessible: All functionality available via keyboard
  • Focus visible: Clear focus indicators on interactive elements
  • Text alternatives: All images have appropriate alt text
  • Form labels: All inputs have associated labels
  • Semantic HTML: Proper heading hierarchy and landmarks
  • Touch targets: 44x44 CSS pixels minimum
Testing Tools:
  • Color contrast: WebAIM Contrast Checker, Stark plugin
  • Keyboard nav: Manual testing with Tab/Shift+Tab
  • Screen reader: Test with VoiceOver (Mac), NVDA (Windows)
WCAG 2.1 AA要求：
  • 色彩对比度：普通文本4.5:1，大文本（18pt+或14pt+加粗）3:1
  • UI组件对比度：最小3:1
  • 键盘可访问：所有功能可通过键盘操作
  • 焦点可见：交互元素有清晰的焦点指示器
  • 文本替代：所有图片有合适的替代文本
  • 表单标签：所有输入框关联对应标签
  • 语义化HTML：正确的标题层级与地标
  • 触摸目标：最小44x44 CSS像素
测试工具：
  • 色彩对比度：WebAIM Contrast Checker、Stark插件
  • 键盘导航：使用Tab/Shift+Tab手动测试
  • 屏幕阅读器：使用VoiceOver（Mac）、NVDA（Windows）测试

Design System Review Checklist

设计系统评审检查清单

Component Usage:
  • All components sourced from design system
  • No one-off custom variations without justification
  • Component variants used appropriately
  • All component states designed (default, hover, active, disabled, error, loading)
Design Tokens:
  • Colors use token references (not hex values)
  • Typography uses token references (not hard-coded sizes)
  • Spacing uses token references (8px grid system)
  • Shadows and effects use token references
Patterns:
  • Navigation patterns consistent with system
  • Form patterns follow system conventions
  • Modal/dialog patterns match system
  • Empty states use system patterns
  • Error handling follows system patterns
组件使用：
  • 所有组件均来自设计系统
  • 无无正当理由的一次性自定义变体
  • 组件变体使用恰当
  • 所有组件状态均已设计（默认、悬停、激活、禁用、错误、加载）
Design Tokens：
  • 色彩使用Token引用（而非十六进制值）
  • 排版使用Token引用（而非硬编码尺寸）
  • 间距使用Token引用（8px网格系统）
  • 阴影与效果使用Token引用
模式：
  • 导航模式与系统一致
  • 表单模式遵循系统规范
  • 模态框/对话框模式与系统匹配
  • 空状态使用系统模式
  • 错误处理遵循系统模式

Reference Files

参考文件

Load these references based on specific review needs:
  • best-practices-for-design-reviews.md - Review methodology, tools, and techniques for effective design reviews
  • common-design-issues-to-watch-for.md - Frequently encountered design problems and red flags to identify during reviews
  • design-review-process.md - Comprehensive step-by-step process with detailed checklists for each review phase
  • design-system-patterns.md - Design system validation criteria, component patterns, and token usage guidelines
  • responsive-design-patterns.md - Breakpoint strategies, mobile-first patterns, and responsive design best practices
  • accessibility-guidelines.md - Detailed WCAG 2.1 AA compliance guidelines, testing procedures, and accessibility patterns
  • severity-levels.md - Detailed severity level definitions and criteria for categorizing design issues
  • design-review-report-template.md - Complete report template with all sections for documenting review findings
根据具体评审需求加载以下参考文件：
  • best-practices-for-design-reviews.md - 有效设计评审的方法论、工具与技巧
  • common-design-issues-to-watch-for.md - 评审中常见的设计问题与警示信号
  • design-review-process.md - 包含各评审阶段详细检查清单的完整分步流程
  • design-system-patterns.md - 设计系统验证标准、组件模式与Token使用指南
  • responsive-design-patterns.md - 断点策略、移动优先模式与响应式设计最佳实践
  • accessibility-guidelines.md - 详细的WCAG 2.1 AA合规指南、测试流程与无障碍模式
  • severity-levels.md - 设计问题分类的详细严重程度定义与标准
  • design-review-report-template.md - 包含所有评审结果记录模块的完整报告模板

Example Review Flow

评审流程示例

Scenario: Reviewing a new checkout flow design in Figma
  1. Preparation (30 min)
    • Review checkout requirements and success metrics
    • Identify 5 screens in checkout flow
    • Gather payment compliance requirements
    • Review design system component library
  2. Visual Design Review (45 min)
    • Check typography consistency across all 5 screens
    • Verify color contrast on CTA buttons (found 2 issues)
    • Validate spacing follows 8px grid
    • Review visual hierarchy on payment screen
  3. Accessibility Audit (60 min)
    • Test color contrast: 3 text elements fail (4.2:1, need 4.5:1)
    • Check keyboard flow: Tab order jumps incorrectly on screen 3
    • Verify ARIA labels: Payment input missing label association
    • Review error states: Error messages lack semantic markup
  4. Responsive Review (30 min)
    • Check mobile breakpoint: Form inputs too small (38px height)
    • Verify tablet layout: Good adaptation
    • Test content reflow: Success
  5. Design System Check (20 min)
    • Found custom button variant not in system
    • Spacing uses hard-coded values instead of tokens
    • Form patterns match system conventions ✅
  6. Document Findings (45 min)
    • 3 Critical issues: Contrast failures, touch target sizes
    • 5 High issues: Keyboard navigation, missing labels
    • 4 Medium issues: Design token usage, custom components
    • Create report using template with visual examples
  7. Deliverables
    • Design review report with 12 findings
    • Annotated Figma comments on specific issues
    • Prioritized action items with owners
    • Schedule follow-up review in 1 week
Total Time: ~3.5 hours for comprehensive review
场景：评审Figma中全新的结账流程设计
  1. 准备阶段（30分钟）
    • 查阅结账需求与成功指标
    • 确定结账流程中的5个页面
    • 收集支付合规要求
    • 查阅设计系统组件库
  2. 视觉设计评审（45分钟）
    • 检查5个页面的排版一致性
    • 验证CTA按钮的色彩对比度（发现2个问题）
    • 确认间距遵循8px网格系统
    • 评审支付页面的视觉层级
  3. 无障碍审计（60分钟）
    • 测试色彩对比度：3个文本元素不达标（4.2:1，需4.5:1）
    • 检查键盘流程：页面3的Tab顺序跳转异常
    • 验证ARIA标签：支付输入框缺少标签关联
    • 评审错误状态：错误消息缺乏语义化标记
  4. 响应式评审（30分钟）
    • 检查移动端断点：表单输入框尺寸过小（38px高度）
    • 验证平板布局：适配良好
    • 测试内容重排：成功
  5. 设计系统检查（20分钟）
    • 发现设计系统中不存在的自定义按钮变体
    • 间距使用硬编码值而非Token
    • 表单模式符合系统规范 ✅
  6. 记录结果（45分钟）
    • 3个关键问题：对比度不达标、触摸目标尺寸不足
    • 5个高优先级问题：键盘导航异常、缺少标签
    • 4个中优先级问题：Design Tokens使用不当、自定义组件
    • 使用模板生成包含视觉示例的报告
  7. 交付物
    • 包含12个问题的设计评审报告
    • Figma中带标注的具体问题评论
    • 带优先级与负责人的行动项
    • 安排1周后的跟进评审
总耗时：约3.5小时的全面评审

Tips for Effective Reviews

有效评审技巧

Be Specific: Don't say "improve contrast". Say "Body text on blue background has 3.8:1 contrast, needs 4.5:1. Darken text to #1a1a1a or lighten background."
Show Examples: Include screenshots with annotations. Show the issue and suggest visual fixes.
Prioritize: Clearly separate must-fix from nice-to-have. Focus on user impact.
Provide Context: Explain why an issue matters. "This contrast failure affects 8% of users with low vision."
Be Constructive: Acknowledge what works well. Balance criticism with recognition.
Collaborate: Review findings with designers before finalizing. Get their input on solutions.
Follow Up: Schedule re-review to verify fixes. Track issues to completion.
具体明确：不说“提高对比度”，要说“蓝色背景上的正文文本对比度为3.8:1，需达到4.5:1。可将文本加深至#1a1a1a或调亮背景色。”
提供示例：包含带标注的截图。展示问题并提供视觉化的修复建议。
优先级排序：明确区分必须修复与锦上添花的改进。聚焦用户影响。
提供上下文：解释问题的重要性。例如：“该对比度问题会影响8%的低视力用户。”
建设性反馈：认可表现良好的部分。平衡批评与肯定。
协作沟通：最终定稿前与设计师评审结果。获取他们对解决方案的意见。
跟进落实：安排复查验证修复效果。跟踪问题直至解决。