ant-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Ant Design

S - Scope

S - 适用范围

Target: antd@^6 with React 18-19, plus ant-design-pro@^5 / @ant-design/pro-components and @ant-design/x@^2 when applicable.
Cover: core components, theming/tokens, css-in-js, SSR, a11y, performance, Pro layouts/routing/access/CRUD, and X (AI/chat UI) patterns.
Avoid: undocumented APIs, internal
```
.ant-*
```
class coupling, or cross-version mixing without explicit request.

适用版本：搭配 React 18-19 的 antd@^6，必要时包含 ant-design-pro@^5 / @ant-design/pro-components 以及 @ant-design/x@^2。
覆盖内容：核心组件、主题定制/Token、css-in-js、SSR、无障碍访问（a11y）、性能优化、Pro 布局/路由/权限/CRUD 以及 X（AI/聊天界面）模式。
避免内容：未公开的 API、依赖内部
```
.ant-*
```
类名、或未明确要求的跨版本混用。

Default assumptions (when not specified)

默认假设（未指定时）

Language: TypeScript.
Styling: prefer tokens,
```
classNames
```
, and
```
styles
```
; avoid global overrides.
Provider: a single
```
ConfigProvider
```
at app root, unless isolation is required.
Dependencies: do not add new packages unless required or requested.

开发语言：TypeScript。
样式方案：优先使用 Token、
```
classNames
```
和
```
styles
```
；避免全局样式覆盖。
配置提供者：应用根节点仅使用一个
```
ConfigProvider
```
，除非需要隔离场景。
依赖管理：除非必要或被要求，否则不新增依赖包。

Scope rules (must follow)

必须遵循的范围规则

Use only officially documented antd APIs and patterns.
Do not invent props, events, or component names.
Use only officially documented Pro/X APIs and patterns.
Assume v6 by default; do not mix v5 APIs unless explicitly requested.
Do not add global
```
.ant-*
```
overrides; prefer tokens and component tokens.
Keep examples short; no long, multi-screen samples in the main skill.
Do not rely on internal
```
.ant-*
```
classes or DOM details; if unavoidable, state risk and alternatives.
Theme priority is fixed: global tokens -> component tokens -> alias tokens.
For SSR, provide the minimal provider setup and verification points (hydration, style order, duplication).
Route complex issues to
```
Reference
```
files; main skill gives only decisions and entry points.

仅使用官方文档公开的 antd API 和模式。
不得自定义 props、事件或组件名称。
仅使用官方文档公开的 Pro/X API 和模式。
默认采用 v6 版本；除非明确要求，否则不混用 v5 API。
不得添加全局
```
.ant-*
```
样式覆盖；优先使用 Token 和组件 Token。
示例保持简短；主指南中不提供跨多屏的长示例。
不得依赖内部
```
.ant-*
```
类名或 DOM 细节；若无法避免，需说明风险及替代方案。
主题优先级固定：全局 Token -> 组件 Token -> 别名 Token。
对于 SSR，提供最简提供者配置和验证要点（水合、样式顺序、重复渲染）。
复杂问题引导至「Reference」文档；主指南仅提供决策方向和入口。

Complex triggers (must open a

Reference

)

需触发「Reference」文档的复杂场景

More than 3 interaction states or cross-field linkage (Form).
Remote search, large data, or custom rendering (Select).
Server sorting/filtering/pagination, virtualization, fixed columns/headers (Table).
Async load, checkStrictly, or virtualization (Tree).
Controlled
```
fileList
```
,
```
customRequest
```
, preview/auth edge cases (Upload).
SSR style order, streaming/hydration errors, or performance bottlenecks.
Pro layouts, route-driven menus, or access control (Layout/Access).
ProTable/ProForm with request coupling, dynamic fields, or perf tuning.
X streaming, tool rendering, or Markdown extensions beyond the defaults.

超过3种交互状态或跨字段联动（Form）。
远程搜索、大数据量或自定义渲染（Select）。
服务端排序/筛选/分页、虚拟化、固定列/表头（Table）。
异步加载、严格勾选或虚拟化（Tree）。
受控
```
fileList
```
、
```
customRequest
```
、预览/权限边缘场景（Upload）。
SSR 样式顺序、流式渲染/水合错误或性能瓶颈。
Pro 布局、路由驱动菜单或权限控制（Layout/Access）。
ProTable/ProForm 与请求耦合、动态字段或性能调优。
X 流式渲染、工具渲染或超出默认的 Markdown 扩展。

Reference

index (Chinese)

「Reference」索引（中文）

Topic	Description	`Reference`
Core v6	Version scope, migration notes, theming/SSR overview	`references/antd-v6.md`
Legacy v5	Existing v5 projects and migration guardrails	`references/antd-v5.md`
Form advanced	Dynamic forms, dependencies, validation perf	`references/form-advanced.md`
Table advanced	Sorting/filtering/virtualization patterns	`references/table-advanced.md`
Upload advanced	Controlled upload, customRequest, edge cases	`references/upload-advanced.md`
Select advanced	Remote search, tags, rendering and a11y	`references/select-advanced.md`
Tree advanced	Async load, checkStrictly, virtual	`references/tree-advanced.md`
Pro v5	Pro 5 scope and baseline guidance	`references/pro-v5.md`
Pro layout	Layouts, menus, access, multi-layout patterns	`references/pro-layout-advanced.md`
ProTable	Query/table coupling, request patterns, perf	`references/protable-advanced.md`
ProForm	Step forms, dynamic fields, table linkage	`references/proform-advanced.md`
X v2	X v2 scope and baseline guidance	`references/x-v2.md`
X components	Message/tool component patterns	`references/x-components-advanced.md`
X SDK	Streaming integration and state model	`references/x-sdk-advanced.md`
X Markdown	X Markdown extensions and rendering	`references/x-markdown-advanced.md`

主题	描述	`Reference`
核心 v6	版本范围、迁移说明、主题/SSR 概览	`references/antd-v6.md`
旧版 v5	现有 v5 项目及迁移规范	`references/antd-v5.md`
Form 进阶	动态表单、依赖管理、验证性能	`references/form-advanced.md`
Table 进阶	排序/筛选/虚拟化模式	`references/table-advanced.md`
Upload 进阶	受控上传、customRequest、边缘场景	`references/upload-advanced.md`
Select 进阶	远程搜索、标签、渲染与无障碍	`references/select-advanced.md`
Tree 进阶	异步加载、严格勾选、虚拟化	`references/tree-advanced.md`
Pro v5	Pro 5 范围及基础指南	`references/pro-v5.md`
Pro 布局	布局、菜单、权限、多布局模式	`references/pro-layout-advanced.md`
ProTable	查询/表格耦合、请求模式、性能调优	`references/protable-advanced.md`
ProForm	分步表单、动态字段、表格联动	`references/proform-advanced.md`
X v2	X v2 范围及基础指南	`references/x-v2.md`
X 组件	消息/工具组件模式	`references/x-components-advanced.md`
X SDK	流式集成与状态模型	`references/x-sdk-advanced.md`
X Markdown	X Markdown 扩展与渲染	`references/x-markdown-advanced.md`

Reference routing rule

Reference 跳转规则

Do not expand advanced topics in the main skill.
Jump to a
```
Reference
```
if any condition matches:
- More than 3 interaction states.
- Async flows or large data sets.
- Virtualization or performance tuning.
- Complex accessibility requirements.

主指南中不展开进阶主题。
满足以下任一条件时，跳转至对应「Reference」文档：
- 超过3种交互状态。
- 异步流程或大数据集。
- 虚拟化或性能调优。
- 复杂无障碍需求。

P - Process

P - 处理流程

1) Identify the layer first

1) 首先确定所属层级

Core antd UI, Pro admin app, or X chat/agent UI?
If Pro or X is involved, route to the relevant
```
Reference
```
when complexity triggers match.

核心 antd UI、Pro 后台应用还是 X 聊天/Agent 界面？
若涉及 Pro 或 X，当符合复杂场景触发条件时，引导至对应「Reference」文档。

2) Clarify context before advising

2) 提供建议前先明确上下文

Framework and rendering: Next.js / Umi / Vite? CSR / SSR / streaming?
antd version: confirm v6 if unclear.
Theming depth: small token changes or component-level overrides?
Data scale: large lists/tables/trees/selects?
Interaction complexity: controlled state, linkage, async, auth, upload flows?

框架与渲染模式：Next.js / Umi / Vite？CSR / SSR / 流式渲染？
antd 版本：若未明确，默认按 v6 处理。
主题定制深度：仅修改少量 Token 还是组件级覆盖？
数据规模：大型列表/表格/树/选择器？
交互复杂度：受控状态、联动、异步、权限、上传流程？

3) Provider minimal set

3) 提供最简配置提供者

CSR: usually
```
ConfigProvider
```
only.
SSR or strict style order: add
```
StyleProvider
```
as per
```
references/antd-v6.md
```
.
One app, one root provider; local themes only for isolation needs.

CSR：通常仅需
```
ConfigProvider
```
。
SSR 或严格样式顺序：按照
```
references/antd-v6.md
```
添加
```
StyleProvider
```
。
单应用仅需一个根节点提供者；仅在需要隔离时使用局部主题。

4) Component selection rules (core antd)

4) 核心 antd 组件选择规则

Form: prefer
```
Form
```
as source of truth unless external state is required.
Overlay:
```
Modal
```
for blocking flows;
```
Drawer
```
for side context or long content.
Lists: structured data uses
```
Table
```
, light lists use
```
List
```
;
```
Table
```
needs stable
```
rowKey
```
.
Large data: use virtualization (see
```
references/table-advanced.md
```
).

Select: local filter uses

filterOption

; remote search uses

showSearch

filterOption={false}

onSearch

(see

references/select-advanced.md

Upload: controlled flow uses
```
fileList
```
; complex flow uses
```
customRequest
```
(see
```
references/upload-advanced.md
```
).

Form：除非需要外部状态，否则优先以
```
Form
```
作为唯一数据源。
浮层组件：
```
Modal
```
用于阻塞式流程；
```
Drawer
```
用于侧边上下文或长内容展示。
列表组件：结构化数据使用
```
Table
```
，轻量列表使用
```
List
```
；
```
Table
```
需设置稳定的
```
rowKey
```
。
大数据量：使用虚拟化（详见
```
references/table-advanced.md
```
）。

Select：本地筛选使用

filterOption

；远程搜索使用

showSearch

filterOption={false}

onSearch

（详见

references/select-advanced.md

）。

Upload：受控流程使用
```
fileList
```
；复杂流程使用
```
customRequest
```
（详见
```
references/upload-advanced.md
```
）。

5) Pro decision shortcuts (when Pro is in scope)

5) Pro 场景决策捷径

Routes are the menu source of truth; avoid hand-built menus.
Access control is page-first; UI hides are secondary; backend still enforces.
CRUD uses ProTable/ProForm schemas as the source of truth (see Pro references).

路由是菜单的唯一数据源；避免手动构建菜单。
权限控制以页面级优先；UI 隐藏为辅助手段；后端仍需强制执行权限。
CRUD 操作以 ProTable/ProForm 配置 Schema 作为唯一数据源（详见 Pro 相关参考文档）。

6) X decision shortcuts (when X is in scope)

6) X 场景决策捷径

Model messages/tools as serializable data; JSX is a pure view.
Streaming needs stable keys, throttled updates, and scroll management (see X references).

将消息/工具建模为可序列化数据；JSX 仅作为纯视图层。
流式渲染需要稳定的 key、节流更新及滚动管理（详见 X 相关参考文档）。

7) Theming decision chain

7) 主题定制决策流程

Use global tokens for most cases.
Use component tokens or
```
classNames
```
/
```
styles
```
for differences.
Only if unavoidable, use scoped CSS overrides and state the risk.
Never rely on global
```
.ant-*
```
overrides.

大多数场景使用全局 Token。
差异化需求使用组件 Token 或
```
classNames
```
/
```
styles
```
。
仅在万不得已时，使用作用域 CSS 覆盖并说明风险。
绝对禁止依赖全局
```
.ant-*
```
类名覆盖样式。

8) Shunt complexity to

Reference

8) 复杂场景分流至 Reference

If any complex trigger matches, provide decision + minimal skeleton +
```
Reference
```
path.
Details live in the corresponding
```
references/*.md
```
.

若符合任一复杂场景触发条件，提供决策方向 + 最简代码骨架 + 对应「Reference」路径。
详细内容请查阅对应的
```
references/*.md
```
文档。

9) a11y and performance checks

9) 无障碍与性能检查

a11y: keyboard access, focus management for overlays, icon buttons with
```
aria-label
```
, not color-only states.
perf: stable keys, memoized columns, avoid frequent setState, use virtualization and throttling as needed.

无障碍（a11y）：支持键盘访问、浮层焦点管理、图标按钮需设置
```
aria-label
```
、避免仅通过颜色区分状态。
性能优化：使用稳定的 key 和 memoization、必要时使用虚拟化或节流。

O - Output

O - 输出规范

Output should include (as needed)

输出需包含的内容（按需）

Component and layout recommendations with 1-3 sentence rationale.
Minimal provider and theming strategy.
SSR, perf, and a11y risks with concrete mitigations.
Pro: route/layout plan, access model, and ProTable/ProForm schema when relevant.
X: message/tool schema and streaming state model when relevant.
A
```
Reference
```
path when complex triggers match.
Advice only (no code) when the request is selection or decision guidance.

组件与布局建议，附带1-3句理由说明。
最简配置提供者与主题策略。
SSR、性能及无障碍风险，以及具体的缓解方案。
Pro 场景：路由/布局方案、权限模型，必要时提供 ProTable/ProForm Schema。
X 场景：必要时提供消息/工具 Schema 及流式状态模型。
符合复杂场景触发条件时，提供对应「Reference」路径。
若需求为选型或决策指导，仅提供建议（不包含代码）。

Output forbidden

输出禁止内容

Inventing antd APIs, tokens, or relying on internal classes without calling out risk.
Replacing tokens with global CSS overrides.
Vague SSR/hydration advice without verification points.

自定义 antd API、Token，或未说明风险的情况下依赖内部类名。
使用全局 CSS 覆盖替代 Token。
提供模糊的 SSR/水合建议而无验证要点。

Regression checklist (prefer 5-10 items)

回归检查清单（建议5-10项）

Provider: one root
```
ConfigProvider
```
; SSR style order is controlled.
Theming: tokens first, no broad global
```
.ant-*
```
overrides.
Form: validation and linkage are within
```
Form
```
and reproducible.
Table: stable
```
rowKey
```
; pagination/sort/filter entry points are consistent.
Select: remote search disables local filter; a11y checks pass.
Upload: controlled vs uncontrolled mode is clear; failure and retry flows defined.
Overlays: close and destroy behavior is defined (
```
destroyOnClose
```
etc).
Performance: stable keys and memoization; virtualization or throttling when needed.
Pro: route-driven menus/access are consistent with backend enforcement.
X: streaming state, stop/retry, and tool rendering are deterministic.

配置提供者：仅存在一个根节点
```
ConfigProvider
```
；SSR 样式顺序可控。
主题定制：优先使用 Token，无大范围全局
```
.ant-*
```
样式覆盖。
Form：验证与联动逻辑在
```
Form
```
内实现且可复现。
Table：设置稳定的
```
rowKey
```
；分页/排序/筛选入口统一。
Select：远程搜索禁用本地筛选；通过无障碍检查。
Upload：受控/非受控模式明确；定义失败与重试流程。
浮层组件：定义关闭与销毁行为（如
```
destroyOnClose
```
等）。
性能优化：使用稳定的 key 和 memoization；必要时使用虚拟化或节流。
Pro 场景：路由驱动的菜单/权限与后端强制执行逻辑一致。
X 场景：流式状态、停止/重试及工具渲染逻辑确定。

ant-design

Original

Translation

Ant Design

Ant Design

S - Scope

S - 适用范围

Default assumptions (when not specified)

默认假设（未指定时）

Scope rules (must follow)

必须遵循的范围规则

Complex triggers (must open a Reference)

需触发「Reference」文档的复杂场景

Reference index (Chinese)

「Reference」索引（中文）

Reference routing rule

Reference 跳转规则

P - Process

P - 处理流程

1) Identify the layer first

1) 首先确定所属层级

2) Clarify context before advising

2) 提供建议前先明确上下文

3) Provider minimal set

3) 提供最简配置提供者

4) Component selection rules (core antd)

4) 核心 antd 组件选择规则

5) Pro decision shortcuts (when Pro is in scope)

5) Pro 场景决策捷径

6) X decision shortcuts (when X is in scope)

6) X 场景决策捷径

7) Theming decision chain

7) 主题定制决策流程

8) Shunt complexity to Reference

8) 复杂场景分流至 Reference

9) a11y and performance checks

9) 无障碍与性能检查

O - Output

O - 输出规范

Output should include (as needed)

输出需包含的内容（按需）

Output forbidden

输出禁止内容

Regression checklist (prefer 5-10 items)

回归检查清单（建议5-10项）

Complex triggers (must open a
`Reference`
)

`Reference`
index (Chinese)

8) Shunt complexity to
`Reference`