hub / github.com/ant-design/ant-design-cli

github.com/ant-design/ant-design-cli @v6.5.0

Chat with this repo

repository ↗ · DeepWiki ↗ · release v6.5.0 ↗ · + Follow

402 symbols 1,207 edges 114 files 51 documented · 13%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

Ant Design

Ant Design CLI

命令行上的 Ant Design。

查询组件知识、分析项目用量、指导版本迁移 — 完全离线。

English · 中文 · 更新日志

🤔 为什么

Code Agent（Claude Code、Codex、Gemini CLI）在拥有即时 API 数据访问能力时，能写出更好的 antd 代码。这个 CLI 正是为此而生 — antd v3 / v4 / v5 / v6 的每个 Prop、Token、Demo 和 Changelog 条目，本地打包，毫秒级查询。

npx skills add ant-design/ant-design-cli    # 安装为 Agent Skill

✨ 亮点

📦 完全离线 — 所有元数据随包安装，无需网络请求，无延迟，无 API Key。
🎯 版本精确 — 跨 v3/v4/v5/v6 的 55+ 小版本快照。查询 antd@5.3.0 的精确 API，而非仅 "最新 v5"。
🤖 Agent 优化 — 所有命令支持 --format json。结构化错误码与修复建议。stdout/stderr 严格分离。
🌍 双语输出 — 每个组件名、描述和文档均有中英文。通过 --lang zh 切换。
🔮 智能纠错 — 输入 Buttn？CLI 基于 Levenshtein 距离建议 Button，优先匹配首字母相同的候选。
🧩 18 条命令 — 从 Prop 查询到项目级 Lint，从 Design Token 到跨版本 API 对比。
🔌 MCP 服务 — antd mcp 启动 stdio 服务，原生集成 Claude Desktop、Cursor 等 IDE。

📦 安装

npm install -g @ant-design/cli

其他包管理器

pnpm add -g @ant-design/cli
bun add -g @ant-design/cli

🤖 Agent 集成

CLI 内置 Skill 文件，指导 Code Agent 在正确的时机调用正确的命令：

npx skills add ant-design/ant-design-cli

或者直接告诉你的 Code Agent：

安装 @ant-design/cli 和 ant-design/ant-design-cli 的 antd skill

Agent 会自动完成 npm install、npx skills add，并开始使用 CLI。

MCP 服务

支持 Model Context Protocol 的 IDE 可直接将 CLI 作为 MCP 服务使用：

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

如需固定 antd 版本，在 args 数组中添加 "--version", "5.20.0"。

提供 8 个工具（antd_list、antd_info、antd_doc、antd_demo、antd_token、antd_design_md、antd_semantic、antd_changelog）和 2 个提示词（antd-expert、antd-page-generator）。

支持 Claude Code、Cursor、Codex、Gemini CLI 等所有兼容 skills 协议的 Agent。

🚀 快速开始

antd list                           # 所有组件及版本信息
antd info Button                    # 组件 Props、类型、默认值
antd doc Button                     # 完整 Markdown 文档
antd demo Select basic              # 可运行的 Demo 源码
antd token DatePicker               # Design Token 值（v5+）
antd design.md                      # 设计语言文档（design.md）
antd semantic Table                 # classNames / styles 结构
antd changelog 4.24.0 5.0.0 Select  # 跨版本 API 差异对比
antd doctor                         # 诊断项目配置问题
antd env                            # 收集环境信息用于 Bug 报告
antd usage ./src                    # 分析项目中的 antd 导入
antd lint ./src                     # 检查废弃 API 和最佳实践
antd migrate 3 4                    # v3 → v4 迁移指南
antd migrate 4 5 --apply ./src      # 生成 Agent 迁移提示
antd mcp                            # 启动 MCP 服务，供 IDE 集成
antd setup --client claude          # 为 AI Agent 接入 MCP/Skill
antd upgrade                        # 升级 CLI 到最新版本

📖 命令

📚 知识查询

命令	说明
`antd list`	列出所有组件，含双语名称、分类和引入版本
`antd info <Component>`	Props 表格，含类型、默认值、引入版本和废弃状态
`antd doc <Component>`	组件完整 Markdown 文档
`antd demo <Component> [name]`	可运行的 Demo 源码（TSX）
`antd token [Component]`	全局或组件级 Design Token
`antd design.md`	设计语言文档（`design.md`），供 AI 设计工具消费
`antd semantic <Component>`	语义化 `classNames` / `styles` 结构及用法示例
`antd changelog`	Changelog 条目、版本范围或跨版本 API 对比

🔍 项目分析

命令	说明
`antd doctor`	10 项诊断检查：React 兼容性、重复安装、peer 依赖、SSR、babel 插件
`antd env [dir]`	一键收集 antd 相关环境信息，用于 Bug 报告或 AI 辅助诊断
`antd usage [dir]`	导入统计、子组件分布（`Form.Item`）、非组件导出
`antd lint [target]`	废弃 API、无障碍缺陷、性能问题、最佳实践
`antd migrate <from> <to>`	迁移清单，区分自动修复/手动处理，`--apply` 生成 Agent 提示

🐛 问题反馈

命令	说明
`antd bug`	向 ant-design/ant-design 报告 Bug，自动收集环境信息
`antd bug-cli`	向 ant-design/ant-design-cli 报告 Bug

🔧 CLI 管理

命令	说明
`antd mcp`	启动 MCP stdio 服务，供 IDE Agent 集成
`antd setup`	为 Claude Code、Cursor、VS Code 或 Codex 接入 Ant Design MCP/Skill
`antd upgrade`	升级 CLI 到最新版本

`antd list`

antd list                           # 所有组件
antd list --version 5.0.0           # v5.0.0 中可用的组件

示例输出

Component       组件名     Description                                                Since
--------------  -------  -------------------------------------------------------  ------
Button          按钮       To trigger an operation.                                  4.0.0
Table           表格       A table displays rows of data.                            4.0.0
Form            表单       High performance Form component with data scope management. 4.0.0
Select          选择器      Select component to select value from options.            4.0.0
Modal           对话框      Modal dialogs.                                            4.0.0
ColorPicker     颜色选择器   Used for color selection.                                 5.5.0
...

`antd info <Component>`

antd info Button                    # Props 表格
antd info Button --detail           # + 描述、引入版本、废弃状态、FAQ
antd info Button --version 4.24.0   # v4 API 快照

示例输出

Button (按钮) — To trigger an operation.

Property         Type                                          Default   Since
---------------  --------------------------------------------  --------  ------
autoInsertSpace  boolean                                       true      5.17.0
block            boolean                                       false     -
classNames       Record<SemanticDOM, string>                   -         5.4.0
disabled         boolean                                       false     -
href             string                                        -         -
icon             ReactNode                                     -         -
loading          boolean | { delay: number, icon: ReactNode }  false     -
size             large | middle | small                        middle    -
type             primary | default | dashed | text | link      default   -
variant          outlined | dashed | solid | filled | text     -         5.13.0
onClick          (event: React.MouseEvent) => void             -         -

`antd doc <Component>`

antd doc Button                     # 完整 Markdown 文档输出到 stdout
antd doc Button --format json       # { name, doc }
antd doc Button --lang zh           # 中文文档

`antd demo <Component> [name]`

antd demo Button                    # 列出所有可用 Demo
antd demo Button basic              # 获取 Demo 源码

`antd token [Component]`

antd token                          # 全局 Token（colorPrimary、borderRadius 等）
antd token Button                   # 组件级 Token

`antd design.md`

输出 antd 设计语言文档（design.md）—— 对 antd 默认 Light 主题的精心编写的描述，遵循 google-labs-code/design.md 规范。antd token 列举单个 Token 名称，而 antd design.md 整体描述设计语言（颜色 / 字体 / 间距 / 圆角的取值及其背后的设计原则），可被 AI 设计工具（Figma Make、Stitch 等）和 Agent 直接消费。

antd design.md                      # 输出当前检测版本的 design.md
antd design.md --version 6.4.0      # 指定版本的 design.md
antd design.md --format json        # { doc }

design.md 按大版本区分（antd 只在大版本升级时重写它），因此按 major 解析。目前仅 antd v6 提供 design.md —— 查询没有该文档的大版本（v3/v4/v5）会返回 UNSUPPORTED_VERSION_FEATURE。它与发布在 https://ant.design/design.md 的官方 DESIGN.md 保持一致。

`antd semantic <Component>`

antd semantic Table

示例输出

Table Semantic Structure:
├── header    # 表头区域
├── body      # 表体区域
├── footer    # 表尾区域
├── cell      # 单元格
├── row       # 行
└── wrapper   # 外层容器

Usage:
  <Table classNames={{ header: 'my-header' }} />
  <Table styles={{ header: { background: '#fff' } }} />

`antd changelog [v1] [v2] [component]`

antd changelog 5.22.0               # 单个版本
antd changelog 5.21.0..5.24.0       # 版本范围（两端包含）
antd changelog 4.24.0 5.0.0         # 两个版本间的 API 差异
antd changelog 4.24.0 5.0.0 Select  # 仅对比 Select 的 API

`antd doctor`

对项目执行 10 项检查：antd 是否安装、React 版本兼容性、antd/dayjs/cssinjs 重复安装、peer 依赖满足度、主题配置、babel-plugin-import 使用、CSS-in-JS 配置。

antd doctor
antd doctor --format json

`antd env [dir]`

一键收集 antd 相关的所有环境信息 — 系统、Node、包管理器、浏览器、依赖包、生态包（@ant-design/*、rc-*）和构建工具。

antd env                            # 文本输出（粘贴到 GitHub Issue）
antd env --format json              # 结构化 JSON，供 AI 消费
antd env --format markdown          # Markdown 表格输出
antd env ./my-project               # 扫描指定项目目录

示例输出

Environment

  System:
    OS        macOS 15.3

  Binaries:
    Node      20.11.0
    pnpm      9.1.0
    Registry  https://registry.npmmirror.com/

  Browsers:
    Chrome    131.0.6778.86
    Safari    18.3

  Dependencies:
    antd                 5.22.0
    react                18.3.1
    react-dom            18.3.1
    dayjs                1.11.13
    @ant-design/cssinjs  1.22.1
    @ant-design/icons    5.5.2

  Ecosystem:
    @ant-design/pro-components  2.8.1
    rc-field-form               2.7.0

  Build Tools:
    umi         4.3.0
    typescript  5.6.3
    less        4.2.0

`antd usage [dir]`

antd usage                          # 扫描当前目录
antd usage ./src                    # 扫描指定目录
antd usage -f Button                # 过滤特定组件

`antd lint [target]`

四类规则：deprecated（废弃 API）、a11y（无障碍）、performance（性能）、best-practice（最佳实践）。废弃规则从元数据动态生成，始终与检测到的 antd 版本保持同步。

antd lint ./src
antd lint ./src --only deprecated
antd lint ./src --only a11y
antd lint ./src --only deprecated --format json --antd-alias @shared-components

使用 `--antd-alias

可以把额外包名视为antd的别名；可重复传入多个包装包名，且默认仍会匹配antd`。

`antd migrate <from> <to>`

v3→v4 包含 15+ 迁移步骤，v4→v5 包含 25+ 迁移步骤，v5→v6 包含 30+。每个步骤包含组件名、破坏性标记、搜索正则和前后代码对比。

antd migrate 3 4                    # v3 → v4 迁移
antd migrate 4 5                    # 完整迁移清单
antd migrate 4 5 --component Select # 指定组件
antd migrate 4 5 --apply ./src      # 生成 Agent 迁移提示

示例输出

Migration Guide: v4 → v5

  Select:
    🔧 [BREAKING] Prop `dropdownClassName` renamed to `popupClassName`
    🔧 [BREAKING] Prop `dropdownMatchSelectWidth` renamed to `popupMatchSelectWidth`

Total: 2 steps (2 auto-fixable, 0 manual)

`antd bug`

antd bug --title "DatePicker 选择日期时崩溃"
antd bug --title "..." --steps "1. 点击" --expected "正常" --actual "崩溃"
antd bug --title "..." --submit     # 通过 gh CLI 提交

`antd bug-cli`

antd bug-cli --title "info 命令在 v4 组件上崩溃"
antd bug-cli --title "..." --submit

`antd mcp`

启动 MCP（Model Context Protocol）stdio 服务，供 IDE Agent 集成。提供 8 个工具和 2 个提示词，支持 Claude Desktop、Cursor 等 IDE 原生集成。

antd mcp                                # 使用自动检测的版本启动
antd mcp --version 5.20.0 --lang zh     # 指定版本和语言

IDE 配置（claude_desktop_config.json）：

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

MCP 工具（8 个）： antd_list、antd_info、antd_doc、antd_demo、antd_token、antd_design_md、antd_semantic、antd_changelog

MCP 提示词（2 个）： antd-expert、antd-page-generator

`antd setup`

为本地 AI Agent 项目接入 Ant Design MCP 和/或内置的 skills/antd 指南。该命令可以写入对应客户端的 MCP 配置、安装适配客户端的技能或技能参考，并为 Agent 写入托管指令。

antd setup --client claude              # 写入 .mcp.json
antd setup --client cursor              # 写入 .cursor/mcp.json
antd setup --client vscode              # 写入 .vscode/mcp.json
antd setup --client codex               # 安装 Codex 项目技能
antd setup --client claude --dry-run    # 预览配置，不写入文件
antd setup --client claude --project ./my-app
antd setup --client claude --version 5.29.3 --lang zh
antd setup --client claude --check      # 校验已有配置
antd setup --client claude --mode skill # 安装 Claude 技能并写入指令
antd setup --client claude --mode both  # 写入 MCP 配置、安装技能并写入指令
antd setup --client claude --write-instructions

模式：

模式	行为
`mcp`	只写入客户端 MCP 配置。这是默认模式。
`skill`	为所选客户端安装内置 Ant Design 指南，并写入托管指令。
`both`	写入 MCP 配置、安装技能或技能参考，并写入托管指令。

支持的客户端：

客户端	配置文件	服务字段	技能位置	指令文件
`claude`	`.mcp.json`	`mcpServers`	`.claude/skills/antd/`	`CLAUDE.md`
`cursor`	`.cursor/mcp.json`	`mcpServers`	`.agents/skills/antd/` 共享技能	`AGENTS.md`
`vscode`	`.vscode/mcp.json`	`servers`	`.agents/skills/antd/` 共享技能	`AGENTS.md`
`codex`	-	-	`.agents/skills/antd/` 共享技能	`AGENTS.md`

生成的服务项：

```json { "mcpServers": { "antd": { "co

Extension points exported contracts — how you extend this code

DoctorContext (Interface)

Pre-read context shared across all checks to avoid repeated file I/O.

src/commands/doctor.ts

SnapshotIssue (Interface)

Check for components with API docs but no extracted props (extraction gap)

scripts/validate-data.ts

PropData (Interface)

(no doc)

src/types.ts

EnvInfoOptions (Interface)

(no doc)

src/types/envinfo.d.ts

AntdEnv (Interface)

(no doc)

src/utils/issue.ts

TokenOutputOptions (Interface)

(no doc)

src/output/formatter.ts

VersionInfo (Interface)

(no doc)

src/data/version.ts

McpContext (Interface)

(no doc)

src/mcp/tools.ts

Core symbols most depended-on inside this repo

src/output/formatter.ts

Shape

Function 325

Interface 77

Languages

TypeScript100%

Modules by API surface

src/commands/setup.ts31 symbols

src/commands/lint.ts23 symbols

src/commands/doctor.ts20 symbols

src/data/loader.ts18 symbols

scripts/sync.ts16 symbols

src/utils/issue.ts13 symbols

src/output/formatter.ts12 symbols

src/commands/migrate.ts12 symbols

src/commands/changelog.ts12 symbols

src/commands/env.ts11 symbols

scripts/fix-escaped-props.ts11 symbols

scripts/extractors/props.ts11 symbols

For agents

$ claude mcp add ant-design-cli \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact

github.com/ant-design/ant-design-cli @v6.5.0

Ant Design CLI

🤔 为什么

✨ 亮点

📦 安装

🤖 Agent 集成

MCP 服务

🚀 快速开始

📖 命令

📚 知识查询

🔍 项目分析

🐛 问题反馈

🔧 CLI 管理

antd list

antd info <Component>

antd doc <Component>

antd demo <Component> [name]

antd token [Component]

antd design.md

antd semantic <Component>

antd changelog [v1] [v2] [component]

antd doctor

antd env [dir]

antd usage [dir]

antd lint [target]

antd migrate <from> <to>

antd bug

antd bug-cli

antd mcp

antd setup

Extension points exported contracts — how you extend this code

Core symbols most depended-on inside this repo

Shape

Languages

Modules by API surface

For agents

Ask about this repo answers extend the page

`antd list`

`antd info <Component>`

`antd doc <Component>`

`antd demo <Component> [name]`

`antd token [Component]`

`antd design.md`

`antd semantic <Component>`

`antd changelog [v1] [v2] [component]`

`antd doctor`

`antd env [dir]`

`antd usage [dir]`

`antd lint [target]`

`antd migrate <from> <to>`

`antd bug`

`antd bug-cli`

`antd mcp`

`antd setup`