Back to Details

21st-ui-review

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Review UI with evidence

基于证据的UI审查

Separate deterministic defects from subjective design recommendations.
将确定性缺陷与主观设计建议区分开来。

Workflow

工作流程

  1. Read 
    .21st/design.json
    , project instructions, and the relevant source.
  2. Run the deterministic review first:
    bash
    21st review <path>
21st review <path> --json
  3. Inspect the actual component composition and runtime states. Validate claims against code rather than inferring behavior from names.
  4. Group findings into:
    • deterministic defects;
    • design-system drift;
    • accessibility and interaction defects;
    • responsive risks;
    • subjective product/design recommendations.
  5. Prioritize by user impact and include exact file and line attribution.
  6. Use 
    21st review <path> --fix
    only for deterministic, low-ambiguity fixes. Never silently redesign, change brand identity, or alter product behavior.
  7. Run relevant project tests after fixes and rerun review to prove resolution.
  1. 读取
    .21st/design.json
    、项目说明及相关源代码。
  2. 先执行确定性审查：
    bash
    21st review <path>
21st review <path> --json
  3. 检查实际组件组成和运行时状态。依据代码验证声明，而非通过名称推断行为。
  4. 将发现分为：
    • 确定性缺陷；
    • 设计系统偏差；
    • 可访问性与交互缺陷；
    • 响应式风险；
    • 主观产品/设计建议。
  5. 根据用户影响优先级排序，并包含确切的文件和行号归属。
  6. 仅对确定性、低歧义的修复使用
    21st review <path> --fix
    。切勿擅自重新设计、更改品牌标识或修改产品行为。
  7. 修复后运行相关项目测试，并重新执行审查以验证问题已解决。

Review priorities

审查优先级

  • semantic controls and accessible names;
  • keyboard access, focus visibility, and dialog/menu behavior;
  • image alternatives and meaningful labels;
  • touch target size and disabled/loading states;
  • responsive overflow and fixed-width assumptions;
  • reduced-motion handling;
  • hardcoded visual values that conflict with project tokens;
  • duplicate primitives instead of existing components;
  • inconsistent typography, radius, spacing, shadows, and icons;
  • fake data, placeholder copy, or missing empty/error states.
  • 语义控件和可访问名称；
  • 键盘访问、焦点可见性以及对话框/菜单行为；
  • 图片替代文本和有意义的标签；
  • 触摸目标尺寸以及禁用/加载状态；
  • 响应式溢出和固定宽度假设；
  • 减少动画的处理；
  • 与项目令牌冲突的硬编码视觉值；
  • 使用重复的基础元素而非现有组件；
  • 不一致的排版、圆角、间距、阴影和图标；
  • 虚假数据、占位符文本或缺失的空状态/错误状态。

Output

输出

Lead with actionable findings ordered by severity. Keep subjective suggestions clearly labeled. If no issue is proven, say so and state what was inspected.
以按严重程度排序的可操作发现开头。明确标记主观建议。如果未发现已证实的问题，请说明情况并列出已检查的内容。