userinterface-wiki

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

User Interface Wiki

用户界面知识库

Comprehensive UI/UX best practices guide for web interfaces. Contains 131 rules across 11 categories, prioritized by impact to guide automated code review and generation.

这是一份针对Web界面的全面UI/UX最佳实践指南，包含11个类别下的131条规则，按影响优先级排序，可用于指导自动化代码审核和生成。

When to Apply

适用场景

Reference these guidelines when:

Implementing or reviewing animations (CSS transitions, Motion/Framer Motion)
Choosing between springs, easing curves, or no animation
Working with AnimatePresence and exit animations
Writing CSS with pseudo-elements or View Transitions API
Adding audio feedback or procedural sound to UI
Building morphing icon components
Animating container width/height with dynamic content
Designing UI that respects cognitive psychology (Fitts's, Hick's, Miller's laws)
Implementing predictive prefetching for perceived performance
Setting up typography, OpenType features, or numeric formatting

在以下场景中参考本指南：

实现或审核动画（CSS过渡、Motion/Framer Motion）
在弹簧曲线、缓动曲线或无动画之间做选择
使用AnimatePresence和退出动画
编写包含伪元素或View Transitions API的CSS
为UI添加音频反馈或程序生成音效
构建变形图标组件
为包含动态内容的容器宽高添加动画
设计遵循认知心理学（菲茨定律、希克定律、米勒定律）的UI
实现可感知性能优化的预测性预加载
设置排版、OpenType特性或数字格式

Rule Categories by Priority

按优先级划分的规则类别


timing-
spring-
exit-
pseudo-
a11y-
context-
morphing-
container-
ux-
prefetch-
type-

Priority	Category	Impact	Prefixes
1	Animation Principles	CRITICAL	`timing-` , `physics-` , `staging-`
2	Timing Functions	HIGH	`spring-` , `easing-` , `duration-` , `none-`
3	Exit Animations	HIGH	`exit-` , `presence-` , `mode-` , `nested-`
4	CSS Pseudo Elements	MEDIUM	`pseudo-` , `transition-` , `native-`
5	Audio Feedback	MEDIUM	`a11y-` , `appropriate-` , `impl-` , `weight-`
6	Sound Synthesis	MEDIUM	`context-` , `envelope-` , `design-` , `param-`
7	Morphing Icons	LOW	`morphing-`
8	Container Animation	MEDIUM	`container-`
9	Laws of UX	HIGH	`ux-`
10	Predictive Prefetching	MEDIUM	`prefetch-`
11	Typography	MEDIUM	`type-`


timing-
spring-
exit-
pseudo-
a11y-
context-
morphing-
container-
ux-
prefetch-
type-

优先级	类别	影响程度	前缀
1	动画原则	关键	`timing-` , `physics-` , `staging-`
2	时间函数	高	`spring-` , `easing-` , `duration-` , `none-`
3	退出动画	高	`exit-` , `presence-` , `mode-` , `nested-`
4	CSS伪元素	中	`pseudo-` , `transition-` , `native-`
5	音频反馈	中	`a11y-` , `appropriate-` , `impl-` , `weight-`
6	声音合成	中	`context-` , `envelope-` , `design-` , `param-`
7	变形图标	低	`morphing-`
8	容器动画	中	`container-`
9	UX定律	高	`ux-`
10	预测性预加载	中	`prefetch-`
11	排版	中	`type-`

Quick Reference

快速参考

1. Animation Principles (CRITICAL)

1. 动画原则（关键）

```
timing-under-300ms
```
- User animations must complete within 300ms
```
timing-consistent
```
- Similar elements use identical timing values
```
timing-no-entrance-context-menu
```
- Context menus: no entrance animation, exit only
```
easing-natural-decay
```
- Use exponential ramps for natural decay, not linear
```
easing-no-linear-motion
```
- Linear easing only for progress indicators
```
physics-active-state
```
- Interactive elements need :active scale transform
```
physics-subtle-deformation
```
- Squash/stretch in 0.95-1.05 range
```
physics-spring-for-overshoot
```
- Springs for overshoot-and-settle, not easing
```
physics-no-excessive-stagger
```
- Stagger delays under 50ms per item
```
staging-one-focal-point
```
- One prominent animation at a time
```
staging-dim-background
```
- Dim modal/dialog backgrounds
```
staging-z-index-hierarchy
```
- Animated elements respect z-index layers

```
timing-under-300ms
```
- 用户触发的动画必须在300ms内完成
```
timing-consistent
```
- 相似元素使用相同的时间参数
```
timing-no-entrance-context-menu
```
- 上下文菜单：不使用入场动画，仅保留退场动画
```
easing-natural-decay
```
- 使用指数曲线实现自然衰减，而非线性曲线
```
easing-no-linear-motion
```
- 线性缓动仅用于进度指示器
```
physics-active-state
```
- 交互元素需要:active状态的缩放变换
```
physics-subtle-deformation
```
- 挤压/拉伸范围控制在0.95-1.05之间
```
physics-spring-for-overshoot
```
- 使用弹簧曲线实现过冲后稳定的效果，而非缓动曲线
```
physics-no-excessive-stagger
```
- 序列动画的延迟间隔不超过50ms每一项
```
staging-one-focal-point
```
- 同一时间仅保留一个突出的动画
```
staging-dim-background
```
- 模态框/对话框背景需变暗
```
staging-z-index-hierarchy
```
- 动画元素需遵循z-index层级

2. Timing Functions (HIGH)

2. 时间函数（高）

```
spring-for-gestures
```
- Gesture-driven motion (drag, flick) must use springs
```
spring-for-interruptible
```
- Interruptible motion must use springs
```
spring-preserves-velocity
```
- Springs preserve input energy on release
```
spring-params-balanced
```
- Avoid excessive oscillation in spring params
```
easing-for-state-change
```
- System state changes use easing curves
```
easing-entrance-ease-out
```
- Entrances use ease-out
```
easing-exit-ease-in
```
- Exits use ease-in
```
easing-transition-ease-in-out
```
- View transitions use ease-in-out
```
easing-linear-only-progress
```
- Linear only for progress/time representation
```
duration-press-hover
```
- Press/hover: 120-180ms
```
duration-small-state
```
- Small state changes: 180-260ms
```
duration-max-300ms
```
- User-initiated max 300ms
```
duration-shorten-before-curve
```
- Fix slow feel with shorter duration, not curve
```
none-high-frequency
```
- No animation for high-frequency interactions
```
none-keyboard-navigation
```
- Keyboard navigation instant, no animation
```
none-context-menu-entrance
```
- Context menus: no entrance, exit only

```
spring-for-gestures
```
- 手势驱动的动效（拖拽、轻扫）必须使用弹簧曲线
```
spring-for-interruptible
```
- 可中断的动效必须使用弹簧曲线
```
spring-preserves-velocity
```
- 弹簧曲线需在释放时保留输入的动能
```
spring-params-balanced
```
- 避免弹簧参数导致过度振荡
```
easing-for-state-change
```
- 系统状态变化使用缓动曲线
```
easing-entrance-ease-out
```
- 入场动画使用ease-out
```
easing-exit-ease-in
```
- 退场动画使用ease-in
```
easing-transition-ease-in-out
```
- 视图过渡使用ease-in-out
```
easing-linear-only-progress
```
- 线性缓动仅用于进度/时间展示
```
duration-press-hover
```
- 按压/悬停动画：120-180ms
```
duration-small-state
```
- 小型状态变化：180-260ms
```
duration-max-300ms
```
- 用户触发的动画最长300ms
```
duration-shorten-before-curve
```
- 通过缩短时长而非调整曲线来解决动效拖沓的问题
```
none-high-frequency
```
- 高频交互不使用动画
```
none-keyboard-navigation
```
- 键盘导航即时响应，不使用动画
```
none-context-menu-entrance
```
- 上下文菜单：无入场动画，仅保留退场动画

3. Exit Animations (HIGH)

3. 退出动画（高）

```
exit-requires-wrapper
```
- Conditional motion elements need AnimatePresence wrapper
```
exit-prop-required
```
- Elements in AnimatePresence need exit prop
```
exit-key-required
```
- Dynamic lists need unique keys, not index
```
exit-matches-initial
```
- Exit mirrors initial for symmetry
```
presence-hook-in-child
```
- useIsPresent in child, not parent
```
presence-safe-to-remove
```
- Call safeToRemove after async cleanup
```
presence-disable-interactions
```
- Disable interactions on exiting elements
```
mode-wait-doubles-duration
```
- Mode "wait" doubles duration; halve timing
```
mode-sync-layout-conflict
```
- Mode "sync" causes layout conflicts
```
mode-pop-layout-for-lists
```
- Use popLayout for list reordering
```
nested-propagate-required
```
- Nested AnimatePresence needs propagate prop
```
nested-consistent-timing
```
- Coordinate parent-child exit durations

```
exit-requires-wrapper
```
- 条件动效元素需要AnimatePresence包裹
```
exit-prop-required
```
- AnimatePresence中的元素需要exit属性
```
exit-key-required
```
- 动态列表需要唯一key，而非索引
```
exit-matches-initial
```
- 退场动画与初始状态对称
```
presence-hook-in-child
```
- 在子组件中使用useIsPresent，而非父组件
```
presence-safe-to-remove
```
- 异步清理完成后调用safeToRemove
```
presence-disable-interactions
```
- 禁用正在退场元素的交互
```
mode-wait-doubles-duration
```
- 模式为"wait"时时长加倍；需将时间参数减半
```
mode-sync-layout-conflict
```
- 模式为"sync"会导致布局冲突
```
mode-pop-layout-for-lists
```
- 列表重排序使用popLayout
```
nested-propagate-required
```
- 嵌套的AnimatePresence需要propagate属性
```
nested-consistent-timing
```
- 协调父子组件的退场时长

4. CSS Pseudo Elements (MEDIUM)

4. CSS伪元素（中）

```
pseudo-content-required
```
- ::before/::after need content property
```
pseudo-over-dom-node
```
- Pseudo-elements over extra DOM nodes for decoration
```
pseudo-position-relative-parent
```
- Parent needs position: relative
```
pseudo-z-index-layering
```
- Z-index for correct pseudo-element layering
```
pseudo-hit-target-expansion
```
- Negative inset for larger hit targets
```
transition-name-required
```
- View transitions need view-transition-name
```
transition-name-unique
```
- Each transition name unique during transition
```
transition-name-cleanup
```
- Remove transition name after completion
```
transition-over-js-library
```
- Prefer View Transitions API over JS libraries
```
transition-style-pseudo-elements
```
- Style ::view-transition-group for custom animations
```
native-backdrop-styling
```
- Use ::backdrop for dialog backgrounds
```
native-placeholder-styling
```
- Use ::placeholder for input styling
```
native-selection-styling
```
- Use ::selection for text selection styling

```
pseudo-content-required
```
- ::before/::after需要content属性
```
pseudo-over-dom-node
```
- 使用伪元素而非额外DOM节点实现装饰效果
```
pseudo-position-relative-parent
```
- 父元素需要设置position: relative
```
pseudo-z-index-layering
```
- 使用z-index确保伪元素层级正确
```
pseudo-hit-target-expansion
```
- 使用负内边距扩大点击目标区域
```
transition-name-required
```
- 视图过渡需要view-transition-name
```
transition-name-unique
```
- 过渡期间每个过渡名称需唯一
```
transition-name-cleanup
```
- 过渡完成后移除过渡名称
```
transition-over-js-library
```
- 优先使用View Transitions API而非JavaScript库
```
transition-style-pseudo-elements
```
- 为::view-transition-group设置样式以实现自定义动画
```
native-backdrop-styling
```
- 使用::backdrop为对话框背景设置样式
```
native-placeholder-styling
```
- 使用::placeholder为输入框设置样式
```
native-selection-styling
```
- 使用::selection为文本选中状态设置样式

5. Audio Feedback (MEDIUM)

5. 音频反馈（中）

```
a11y-visual-equivalent
```
- Every sound must have a visual equivalent
```
a11y-toggle-setting
```
- Provide toggle to disable sounds
```
a11y-reduced-motion-check
```
- Respect prefers-reduced-motion for sound
```
a11y-volume-control
```
- Allow independent volume adjustment
```
appropriate-no-high-frequency
```
- No sound on typing or keyboard nav
```
appropriate-confirmations-only
```
- Sound for payments, uploads, submissions
```
appropriate-errors-warnings
```
- Sound for errors that can't be overlooked
```
appropriate-no-decorative
```
- No sound on hover or decorative moments
```
appropriate-no-punishing
```
- Inform, don't punish with harsh sounds
```
impl-preload-audio
```
- Preload audio files to avoid delay
```
impl-default-subtle
```
- Default volume subtle (0.3), not loud
```
impl-reset-current-time
```
- Reset currentTime before replay
```
weight-match-action
```
- Sound weight matches action importance
```
weight-duration-matches-action
```
- Sound duration matches action duration

```
a11y-visual-equivalent
```
- 每个音效必须有对应的视觉反馈
```
a11y-toggle-setting
```
- 提供开关以禁用音效
```
a11y-reduced-motion-check
```
- 尊重prefers-reduced-motion设置以控制音效
```
a11y-volume-control
```
- 允许独立调整音量
```
appropriate-no-high-frequency
```
- 打字或键盘导航时不播放音效
```
appropriate-confirmations-only
```
- 仅在支付、上传、提交等确认场景播放音效
```
appropriate-errors-warnings
```
- 仅在无法忽略的错误或警告场景播放音效
```
appropriate-no-decorative
```
- 悬停或装饰性场景不播放音效
```
appropriate-no-punishing
```
- 提供信息而非使用刺耳音效惩罚用户
```
impl-preload-audio
```
- 预加载音频文件以避免延迟
```
impl-default-subtle
```
- 默认音量设置为柔和级别（0.3），避免过大
```
impl-reset-current-time
```
- 重播前重置currentTime
```
weight-match-action
```
- 音效的强度与操作的重要性匹配
```
weight-duration-matches-action
```
- 音效的时长与操作的时长匹配

6. Sound Synthesis (MEDIUM)

6. 声音合成（中）

```
context-reuse-single
```
- Reuse single AudioContext, don't create per sound
```
context-resume-suspended
```
- Resume suspended AudioContext before playing
```
context-cleanup-nodes
```
- Disconnect audio nodes after playback
```
envelope-exponential-decay
```
- Exponential ramps for natural decay
```
envelope-no-zero-target
```
- Exponential ramps target 0.001, not 0
```
envelope-set-initial-value
```
- Set initial value before ramping
```
design-noise-for-percussion
```
- Filtered noise for clicks/taps
```
design-oscillator-for-tonal
```
- Oscillators with pitch sweep for tonal sounds
```
design-filter-for-character
```
- Bandpass filter to shape percussive sounds
```
param-click-duration
```
- Click sounds: 5-15ms duration
```
param-filter-frequency-range
```
- Click filter: 3000-6000Hz
```
param-reasonable-gain
```
- Gain under 1.0 to prevent clipping
```
param-q-value-range
```
- Filter Q: 2-5 for focused but natural

```
context-reuse-single
```
- 复用单个AudioContext，不为每个音效创建新实例
```
context-resume-suspended
```
- 播放前恢复暂停的AudioContext
```
context-cleanup-nodes
```
- 播放完成后断开音频节点
```
envelope-exponential-decay
```
- 使用指数曲线实现自然衰减
```
envelope-no-zero-target
```
- 指数曲线的目标值设为0.001而非0
```
envelope-set-initial-value
```
- 开始曲线前设置初始值
```
design-noise-for-percussion
```
- 使用滤波噪声实现点击/敲击音效
```
design-oscillator-for-tonal
```
- 使用带音高扫频的振荡器实现音调音效
```
design-filter-for-character
```
- 使用带通滤波器塑造打击音效的特性
```
param-click-duration
```
- 点击音效：5-15ms时长
```
param-filter-frequency-range
```
- 点击音效滤波器：3000-6000Hz
```
param-reasonable-gain
```
- 增益设置低于1.0以避免削波
```
param-q-value-range
```
- 滤波器Q值：2-5，保证聚焦且自然

7. Morphing Icons (LOW)

7. 变形图标（低）

```
morphing-three-lines
```
- Every icon uses exactly 3 SVG lines
```
morphing-use-collapsed
```
- Unused lines use collapsed constant
```
morphing-consistent-viewbox
```
- All icons share same viewBox (14x14)
```
morphing-group-variants
```
- Rotational variants share group and base lines
```
morphing-spring-rotation
```
- Spring physics for grouped icon rotation
```
morphing-reduced-motion
```
- Respect prefers-reduced-motion
```
morphing-jump-non-grouped
```
- Instant rotation jump between non-grouped icons
```
morphing-strokelinecap-round
```
- Round stroke line caps
```
morphing-aria-hidden
```
- Icon SVGs are aria-hidden

```
morphing-three-lines
```
- 每个图标恰好使用3条SVG线条
```
morphing-use-collapsed
```
- 未使用的线条使用折叠常量
```
morphing-consistent-viewbox
```
- 所有图标使用相同的viewBox（14x14）
```
morphing-group-variants
```
- 旋转变体共享组和基础线条
```
morphing-spring-rotation
```
- 分组图标的旋转使用弹簧物理效果
```
morphing-reduced-motion
```
- 尊重prefers-reduced-motion设置
```
morphing-jump-non-grouped
```
- 非分组图标之间的旋转使用即时跳转
```
morphing-strokelinecap-round
```
- 设置描线条帽为圆形
```
morphing-aria-hidden
```
- 图标SVG设置aria-hidden

8. Container Animation (MEDIUM)

8. 容器动画（中）

```
container-two-div-pattern
```
- Outer animated div, inner measured div; never same element
```
container-guard-initial-zero
```
- Guard bounds === 0 on initial render, fall back to "auto"
```
container-use-resize-observer
```
- Use ResizeObserver for measurement, not getBoundingClientRect
```
container-overflow-hidden
```
- Set overflow: hidden on animated container during transitions
```
container-no-excessive-use
```
- Use sparingly: buttons, accordions, interactive elements
```
container-callback-ref
```
- Use callback ref (not useRef) for measurement hooks

```
container-two-div-pattern
```
- 使用外层动画div和内层测量div；不要使用同一个元素
```
container-guard-initial-zero
```
- 初始渲染时判断边界是否为0，若为0则回退到"auto"
```
container-use-resize-observer
```
- 使用ResizeObserver进行测量，而非getBoundingClientRect
```
container-overflow-hidden
```
- 过渡期间为动画容器设置overflow: hidden
```
container-no-excessive-use
```
- 谨慎使用：仅用于按钮、折叠面板、交互元素
```
container-callback-ref
```
- 使用回调ref（而非useRef）实现测量钩子

9. Laws of UX (HIGH)

9. UX定律（高）

```
ux-fitts-target-size
```
- Size interactive targets for easy clicking (min 32px)
```
ux-fitts-hit-area
```
- Expand hit areas with invisible padding or pseudo-elements
```
ux-hicks-minimize-choices
```
- Minimize choices to reduce decision time
```
ux-millers-chunking
```
- Chunk data into groups of 5-9 for scannability
```
ux-doherty-under-400ms
```
- Respond within 400ms to feel instant
```
ux-doherty-perceived-speed
```
- Fake speed with skeletons, optimistic UI, progress indicators
```
ux-postels-accept-messy-input
```
- Accept messy input, output clean data
```
ux-progressive-disclosure
```
- Show what matters now, reveal complexity later
```
ux-jakobs-familiar-patterns
```
- Use familiar UI patterns users know from other sites
```
ux-aesthetic-usability
```
- Visual polish increases perceived usability
```
ux-proximity-grouping
```
- Group related elements spatially with tighter spacing
```
ux-similarity-consistency
```
- Similar elements should look alike
```
ux-common-region-boundaries
```
- Use boundaries to group related content
```
ux-von-restorff-emphasis
```
- Make important elements visually distinct
```
ux-serial-position
```
- Place key items first or last in sequences
```
ux-peak-end-finish-strong
```
- End experiences with clear success states
```
ux-teslers-complexity
```
- Move complexity to the system, not the user
```
ux-goal-gradient-progress
```
- Show progress toward completion
```
ux-zeigarnik-show-incomplete
```
- Show incomplete state to drive completion
```
ux-pragnanz-simplify
```
- Simplify complex visuals into clear forms

```
ux-fitts-target-size
```
- 交互目标设置为便于点击的尺寸（最小32px）
```
ux-fitts-hit-area
```
- 使用不可见内边距或伪元素扩大点击区域
```
ux-hicks-minimize-choices
```
- 减少选项以缩短决策时间
```
ux-millers-chunking
```
- 将数据分成5-9组以提升可读性
```
ux-doherty-under-400ms
```
- 400ms内响应以带来即时感
```
ux-doherty-perceived-speed
```
- 使用骨架屏、乐观UI、进度指示器提升感知速度
```
ux-postels-accept-messy-input
```
- 接受不规范输入，输出整洁数据
```
ux-progressive-disclosure
```
- 先展示核心内容，再逐步揭示复杂功能
```
ux-jakobs-familiar-patterns
```
- 使用用户熟悉的UI模式（参考其他网站）
```
ux-aesthetic-usability
```
- 视觉优化可提升感知可用性
```
ux-proximity-grouping
```
- 相关元素通过紧凑间距进行分组
```
ux-similarity-consistency
```
- 相似元素外观保持一致
```
ux-common-region-boundaries
```
- 使用边界对相关内容进行分组
```
ux-von-restorff-emphasis
```
- 重要元素在视觉上突出显示
```
ux-serial-position
```
- 关键内容放在序列的开头或结尾
```
ux-peak-end-finish-strong
```
- 以清晰的成功状态结束用户体验
```
ux-teslers-complexity
```
- 将复杂度转移到系统，而非用户
```
ux-goal-gradient-progress
```
- 展示完成目标的进度
```
ux-zeigarnik-show-incomplete
```
- 展示未完成状态以推动用户完成
```
ux-pragnanz-simplify
```
- 将复杂视觉简化为清晰形式

10. Predictive Prefetching (MEDIUM)

10. 预测性预加载（中）

```
prefetch-trajectory-over-hover
```
- Trajectory prediction over hover; reclaims 100-200ms
```
prefetch-not-everything
```
- Prefetch by intent, not viewport; avoid wasted bandwidth
```
prefetch-hit-slop
```
- Use hitSlop to trigger predictions earlier
```
prefetch-touch-fallback
```
- Fall back gracefully on touch devices (no cursor)
```
prefetch-keyboard-tab
```
- Prefetch on keyboard navigation when focus approaches
```
prefetch-use-selectively
```
- Use predictive prefetching where latency is noticeable

```
prefetch-trajectory-over-hover
```
- 使用轨迹预测而非悬停触发预加载；可节省100-200ms
```
prefetch-not-everything
```
- 根据用户意图预加载，而非视口内所有内容；避免浪费带宽
```
prefetch-hit-slop
```
- 使用hitSlop提前触发预测
```
prefetch-touch-fallback
```
- 在触摸设备上优雅降级（无光标）
```
prefetch-keyboard-tab
```
- 当焦点接近时，在键盘导航时触发预加载
```
prefetch-use-selectively
```
- 在延迟明显的场景使用预测性预加载

11. Typography (MEDIUM)

11. 排版（中）

```
type-tabular-nums-for-data
```
- Tabular numbers for columns, dashboards, pricing
```
type-oldstyle-nums-for-prose
```
- Oldstyle numbers blend into body text
```
type-slashed-zero
```
- Slashed zero in code-adjacent UIs
```
type-opentype-contextual-alternates
```
- Keep calt enabled for contextual glyph adjustment
```
type-disambiguation-stylistic-set
```
- Enable ss02 to distinguish I/l/1 and 0/O
```
type-optical-sizing-auto
```
- Leave font-optical-sizing auto for size-adaptive glyphs
```
type-antialiased-on-retina
```
- Antialiased font smoothing on retina displays
```
type-text-wrap-balance-headings
```
- text-wrap: balance on headings for even lines
```
type-underline-offset
```
- Offset underlines below descenders
```
type-no-font-synthesis
```
- Disable font-synthesis to prevent faux bold/italic

```
type-tabular-nums-for-data
```
- 表格、仪表盘、定价场景使用等宽数字
```
type-oldstyle-nums-for-prose
```
- 正文内容使用旧式数字以融入文本
```
type-slashed-zero
```
- 代码相关UI使用带斜杠的零
```
type-opentype-contextual-alternates
```
- 保持calt启用以实现上下文字形调整
```
type-disambiguation-stylistic-set
```
- 启用ss02以区分I/l/1和0/O
```
type-optical-sizing-auto
```
- 保持font-optical-sizing为auto以实现尺寸自适应字形
```
type-antialiased-on-retina
```
- 视网膜显示屏上启用字体抗锯齿
```
type-text-wrap-balance-headings
```
- 标题使用text-wrap: balance实现均匀换行
```
type-underline-offset
```
- 下划线偏移到下行线下方
```
type-no-font-synthesis
```
- 禁用font-synthesis以避免伪粗体/伪斜体

How to Use

使用方法

Read individual rule files for detailed explanations and code examples:

rules/timing-under-300ms.md
rules/spring-for-gestures.md
rules/ux-doherty-under-400ms.md
rules/type-tabular-nums-for-data.md

Each rule file contains:

Brief explanation of why it matters
Incorrect code example with explanation
Correct code example with explanation

阅读单个规则文件获取详细说明和代码示例：

rules/timing-under-300ms.md
rules/spring-for-gestures.md
rules/ux-doherty-under-400ms.md
rules/type-tabular-nums-for-data.md

每个规则文件包含：

规则重要性的简要说明
错误代码示例及解释
正确代码示例及解释

Full Compiled Document

完整编译文档

For the complete guide with all rules expanded:

AGENTS.md

如需查看包含所有规则详细内容的完整指南，请查看：

AGENTS.md