ui-ux-guidelines

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Interface Guidelines

Web界面指南

Dispatch hub for UI/UX rules. Load the relevant reference file for full details.

UI/UX规则调度中心。加载相关参考文件以获取完整细节。

Rule Categories by Priority

按优先级划分的规则分类


accessibility-and-interaction
accessibility-and-interaction
layout-typography-animation
layout-typography-animation
layout-typography-animation
layout-typography-animation
forms-content-checklist
forms-content-checklist
layout-typography-animation

Priority	Category	Impact	Reference File
1	Accessibility	CRITICAL	`accessibility-and-interaction`
2	Touch & Interaction	CRITICAL	`accessibility-and-interaction`
3	Performance	HIGH	`layout-typography-animation`
4	Layout & Responsive	HIGH	`layout-typography-animation`
5	Typography & Color	MEDIUM	`layout-typography-animation`
6	Animation	MEDIUM	`layout-typography-animation`
7	Forms	HIGH	`forms-content-checklist`
8	Content & Navigation	MEDIUM	`forms-content-checklist`
9	Charts & Data	LOW	`layout-typography-animation`


accessibility-and-interaction
accessibility-and-interaction
layout-typography-animation
layout-typography-animation
layout-typography-animation
layout-typography-animation
forms-content-checklist
forms-content-checklist
layout-typography-animation

优先级	分类	影响程度	参考文件
1	Accessibility（可访问性）	关键	`accessibility-and-interaction`
2	触摸与交互	关键	`accessibility-and-interaction`
3	性能	高	`layout-typography-animation`
4	布局与响应式设计	高	`layout-typography-animation`
5	排版与色彩	中	`layout-typography-animation`
6	动画	中	`layout-typography-animation`
7	表单	高	`forms-content-checklist`
8	内容与导航	中	`forms-content-checklist`
9	图表与数据	低	`layout-typography-animation`

Workflows

工作流程

1. Review UI code

1. 审查UI代码

Read the target file(s).
Load the relevant reference file(s) from
```
references/
```
based on what the code contains.
Check each applicable rule. Report violations in the output format below.

读取目标文件。
根据代码包含的内容，从
```
references/
```
加载相关参考文件。
检查每条适用规则。按照以下输出格式报告违规情况。

2. Build new component

2. 构建新组件

Load
```
references/accessibility-and-interaction.md
```
-- all components must meet CRITICAL rules.
Load additional references based on component type:
- Form component ->
```
references/forms-content-checklist.md
```
- Layout/visual component ->
```
references/layout-typography-animation.md
```
Follow rules during implementation.

加载
```
references/accessibility-and-interaction.md
```
——所有组件必须符合关键规则。
根据组件类型加载额外参考文件：
- 表单组件 ->
```
references/forms-content-checklist.md
```
- 布局/视觉组件 ->
```
references/layout-typography-animation.md
```
实现过程中遵循规则。

3. Pre-delivery checklist

3. 交付前检查清单

Load
```
references/forms-content-checklist.md
```
for the full checklist.

Load

references/accessibility-and-interaction.md

for the interaction checklist.

Walk through every checkbox before shipping.

加载
```
references/forms-content-checklist.md
```
获取完整检查清单。

加载

references/accessibility-and-interaction.md

获取交互检查清单。

发布前逐一核对所有检查项。

Anti-patterns (flag these)

反模式（需标记）

```
user-scalable=no
```
or
```
maximum-scale=1
```
-- disables zoom
```
onPaste
```
with
```
preventDefault
```
-- blocks paste
```
transition: all
```
-- list properties explicitly
```
outline-none
```
without
```
:focus-visible
```
replacement
```
<div>
```
/
```
<span>
```
with click handlers -- use
```
<button>
```
or
```
<a>
```
```
<img>
```
without
```
width
```
and
```
height
```
(causes CLS)
Inline
```
onClick
```
navigation without
```
<a>
```
(breaks Cmd+click)
Large
```
.map()
```
without virtualization (>50 items)
Hardcoded date/number formats -- use
```
Intl.*
```
Icon-only buttons without
```
aria-label
```

```
user-scalable=no
```
或
```
maximum-scale=1
```
—— 禁用缩放
```
onPaste
```
搭配
```
preventDefault
```
—— 阻止粘贴
```
transition: all
```
—— 需明确列出属性
```
outline-none
```
未搭配
```
:focus-visible
```
替代方案
使用
```
<div>
```
/
```
<span>
```
添加点击事件处理程序——应使用
```
<button>
```
或
```
<a>
```
```
<img>
```
未设置
```
width
```
和
```
height
```
（会导致CLS）
使用内联
```
onClick
```
进行导航但未使用
```
<a>
```
（破坏Cmd+click功能）
大型
```
.map()
```
未使用虚拟化（超过50项）
硬编码日期/数字格式——应使用
```
Intl.*
```
仅含图标按钮未设置
```
aria-label
```

Code Review Output Format

代码审查输出格式

Group findings by file. Use

file:line

format (VS Code clickable). Be terse -- state issue and location. Skip explanation unless fix is non-obvious.

text

undefined

按文件分组展示结果。使用

file:line

格式（VS Code可点击跳转）。表述简洁——说明问题和位置。除非修复方案不明显，否则无需解释。

text

undefined

src/Button.tsx

src/Button.tsx:42 - icon button missing aria-label src/Button.tsx:18 - input lacks label src/Button.tsx:55 - animation missing prefers-reduced-motion src/Button.tsx:67 - transition: all -> list properties explicitly

src/Button.tsx:42 - 图标按钮缺少aria-label src/Button.tsx:18 - 输入框缺少标签 src/Button.tsx:55 - 动画未适配prefers-reduced-motion src/Button.tsx:67 - transition: all -> 需明确列出属性

src/Modal.tsx

src/Modal.tsx:12 - missing overscroll-behavior: contain src/Modal.tsx:34 - "..." -> "..."

src/Modal.tsx:12 - 缺少overscroll-behavior: contain src/Modal.tsx:34 - "..." -> "..."

src/Card.tsx

pass

---

通过

---

Reference Files

参考文件

Load these as needed during reviews and implementation:

Accessibility & Interaction -- Focus, ARIA, keyboard, touch targets, cursors, drag UX
Layout, Typography & Animation -- Performance, responsive, fonts, color, motion, charts
Forms, Content & Checklist -- Forms, content handling, navigation, dark mode, locale, hydration, pre-delivery checklist

审查和实现过程中按需加载以下文件：

Accessibility & Interaction —— 焦点、ARIA、键盘操作、触摸目标、光标、拖拽UX
布局、排版与动画 —— 性能、响应式设计、字体、色彩、动效、图表
表单、内容与检查清单 —— 表单、内容处理、导航、深色模式、本地化、水合、交付前检查清单

ui-ux-guidelines

Original

Translation

Web Interface Guidelines

Web界面指南

Contents

目录

Rule Categories by Priority

按优先级划分的规则分类

Workflows

工作流程

1. Review UI code

1. 审查UI代码

2. Build new component

2. 构建新组件

3. Pre-delivery checklist

3. 交付前检查清单

Anti-patterns (flag these)

反模式（需标记）

Code Review Output Format

代码审查输出格式

src/Button.tsx

src/Button.tsx

src/Modal.tsx

src/Modal.tsx

src/Card.tsx

src/Card.tsx

Reference Files

参考文件