antd

Ant Design CLI

你可以使用 @ant-design/cli —— 一个本地 CLI 工具，内置了 v3/v4/v5/v6 的 antd 元数据。用它来查询组件知识、分析项目并指导迁移。所有数据均为离线，无需网络。

设置

该 CLI 作为开发依赖安装。使用 npx antd 运行它。

始终使用 --format json 来获取可编程解析的结构化输出。

场景

1. 编写 antd 组件代码

在编写任何 antd 组件代码之前，先查询其 API —— 不要凭记忆。

# Check what props are available
npx antd info Button --format json

# Get a working demo as starting point
npx antd demo Button basic --format json

# Check semantic classNames/styles for custom styling
npx antd semantic Button --format json

# Check component-level design tokens for theming
npx antd token Button --format json

工作流： antd info → 理解 props → antd demo → 获取一个可运行的示例 → 编写代码。

2. 查询完整文档

当你需要全面的组件文档（而不仅仅是 props）时：

npx antd doc Table --format json        # full markdown docs for Table
npx antd doc Table --lang zh            # Chinese docs

3. 调试 antd 问题

当代码未按预期工作或用户报告 antd bug 时：

# Collect full environment snapshot (system, deps, browsers, build tools)
npx antd env --format json

# Check if the prop exists for the user's antd version
npx antd info Select --version 5.12.0 --format json

# Check if the prop is deprecated
npx antd lint ./src/components/MyForm.tsx --format json

# Diagnose project-level configuration issues
npx antd doctor --format json

工作流： antd env → 捕获完整环境 → antd doctor → 检查配置 → antd info --version X → 对照用户的确切版本验证 API → antd lint → 查找已废弃或不正确的用法。

4. 在版本之间迁移

当用户想要升级 antd 时（例如 v3 → v4 或 v4 → v5）：

# Get full migration checklist
npx antd migrate 3 4 --format json    # v3 → v4
npx antd migrate 4 5 --format json    # v4 → v5

# Check migration for a specific component
npx antd migrate 4 5 --component Select --format json

# See what changed between two versions
npx antd changelog 4.24.0 5.0.0 --format json

# See changes for a specific component
npx antd changelog 4.24.0 5.0.0 Select --format json

工作流： antd migrate → 获取完整检查清单 → antd changelog <v1> <v2> → 理解破坏性变更 → 应用修复 → antd lint → 验证没有残留的已废弃用法。

5. 分析项目中的 antd 用法

当用户想要了解其项目中如何使用 antd 时：

# Scan component usage statistics
npx antd usage ./src --format json

# Filter to a specific component
npx antd usage ./src --filter Form --format json

# Lint for best practice violations
npx antd lint ./src --format json

# Check only specific rule categories
npx antd lint ./src --only deprecated --format json
npx antd lint ./src --only a11y --format json
npx antd lint ./src --only performance --format json

6. 查看变更日志和版本历史

当用户询问某个版本中的变更时：

# Specific version changelog
npx antd changelog 5.22.0 --format json

# Version range (both ends inclusive)
npx antd changelog 5.21.0..5.24.0 --format json

7. 探索可用组件

当用户在选择使用哪个组件时：

# List all components with categories
npx antd list --format json

# List components for a specific antd version
npx antd list --version 5.0.0 --format json

8. 收集环境信息

当你需要了解项目的 antd 设置，或为 bug 报告准备信息时：

# Full environment snapshot (text — paste into GitHub Issues)
npx antd env

# Structured JSON for programmatic use
npx antd env --format json

# Scan a specific project directory
npx antd env ./my-project --format json

9. 报告 antd bug

当用户要求你报告 antd bug 时：

# Step 0: Collect environment info for reference (optional)
npx antd env --format json

# Step 1: Preview for user review
npx antd bug --title "DatePicker crashes when selecting date" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Open DatePicker 2. Click a date" \
  --expected "Date is selected" \
  --actual "Component crashes with error" \
  --format json

# Step 2: Show to user, ask for confirmation

# Step 3: Submit after user confirms
npx antd bug --title "DatePicker crashes when selecting date" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. Open DatePicker 2. Click a date" \
  --expected "Date is selected" \
  --actual "Component crashes with error" \
  --submit

10. 报告 CLI 问题

当用户要求报告 CLI bug 时：

npx antd bug-cli --title "antd info Button returns wrong props" \
  --description "When querying Button props for version 5.12.0, the output includes props that don't exist" \
  --steps "1. Run: npx antd info Button --version 5.12.0 --format json" \
  --expected "Props matching antd 5.12.0 Button API" \
  --actual "Props include 'classNames' which was added in 5.16.0" \
  --format json

向用户展示报告，并在使用 --submit 提交前确认。

退出选项： 如果设置了环境变量 ANTD_NO_AUTO_REPORT=1，则完全跳过所有 bug 报告建议。

11. 用作 MCP 服务

如果在支持 MCP 的 IDE 中工作（Claude Desktop、Cursor 等），该 CLI 也可以作为 MCP 服务运行：

{
  "mcpServers": {
    "antd": {
      "command": "npx",
      "args": ["antd", "mcp"]
    }
  }
}

这通过 MCP 协议提供 7 个工具（antd_list、antd_info、antd_doc、antd_demo、antd_token、antd_semantic、antd_changelog）和 2 个提示词（antd-expert、antd-page-generator）。

全局标志

标志	用途
--format json	结构化输出 —— 始终使用此标志
--version <v>	指定特定的 antd 版本（例如 5.20.0）
--lang zh	中文输出（默认：en）
--detail	包含额外字段（description、since、deprecated、FAQ）

关键规则

1. 编写前始终先查询 —— 不要凭记忆猜测 antd API。先运行 antd info。
2. 匹配用户的版本 —— 此项目使用 antd v6。如果未给出标志，CLI 会从 node_modules 自动检测。
3. 使用 --format json —— 每个命令都支持它。解析 JSON 输出，而不是用正则匹配文本输出。
4. 在建议迁移前先检查 —— 在建议版本升级之前，运行 antd changelog <v1> <v2> 和 antd migrate。
5. 更改后运行 lint —— 在编写或修改 antd 代码后，对更改的文件运行 antd lint，以捕获已废弃或有问题的用法。
6. 报告 antd bug —— 当用户要求报告 antd bug 时，使用 antd bug。始终先预览，获得用户确认，然后提交。
7. 报告 CLI 问题 —— 当用户询问 CLI 问题时，使用 antd bug-cli 帮助他们提交报告。始终先预览，获得用户确认，然后提交。