Ant Design CLI

Ant Design on your command line.
Query component knowledge, analyze project usage, and guide migrations — fully offline.

English · 中文 · Changelog

🤔 Why

Code agents (Claude Code, Codex, Gemini CLI) write better antd code when they have instant access to the right API data. This CLI gives them exactly that — every prop, token, demo, and changelog entry for antd v3 / v4 / v5 / v6, bundled locally, queryable in milliseconds.

npx skills add ant-design/ant-design-cli    # install as an agent skill

✨ Highlights

• 📦 Fully offline — All metadata ships with the package. No network calls, no latency, no API keys.
• 🎯 Version-accurate — 55+ per-minor snapshots across v3/v4/v5/v6. Query the exact API surface of antd@5.3.0, not just “latest v5”.
• 🤖 Agent-optimized — --format json on every command. Structured errors with codes and suggestions. Clean stdout/stderr separation.
• 🌍 Bilingual — Every component name, description, and doc has both English and Chinese. Switch with --lang zh.
• 🔮 Smart matching — Typo Buttn? The CLI suggests Button using Levenshtein distance, with first-letter preference.
• 🧩 18 commands — From prop lookup to project-wide lint, from design token queries to cross-version API diffing.
• 🔌 MCP server — antd mcp starts a stdio server for native IDE integration (Claude Code, Cursor, VS Code, etc.).

📦 Install

npm install -g @ant-design/cli

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

🤖 Agent Integration

The CLI ships with a skill file that teaches code agents when and how to use each command:

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

Or simply tell your code agent:

Install @ant-design/cli and the antd skill from ant-design/ant-design-cli

The agent will handle npm install, npx skills add, and start using the CLI automatically.

Works with Claude Code, Cursor, Codex, Gemini CLI, and any agent supporting the skills protocol.

MCP Server

For IDEs that support Model Context Protocol, the CLI can run as an MCP server:

{
  "mcpServers": {
    "antd": {
      "command": "npx",
      "args": ["-y", "@ant-design/cli", "mcp"]
    }
  }
}

Or if you have the CLI installed globally (npm i -g @ant-design/cli):

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

To pin a specific antd version, add "--version", "5.20.0" to the args array.

This exposes 8 tools (antd_list, antd_info, antd_doc, antd_demo, antd_token, antd_design_md, antd_semantic, antd_changelog) and 2 prompts (antd-expert, antd-page-generator) for native IDE integration.

🚀 Quick Start

antd list                           # All components with versions
antd info Button                    # Component props, types, defaults
antd doc Button                     # Full markdown documentation
antd demo Select basic              # Runnable demo source code
antd token DatePicker               # Design Token values (v5+)
antd design.md                      # Design-language document (design.md)
antd semantic Table                 # classNames / styles structure
antd changelog 4.24.0 5.0.0 Select  # API diff across versions
antd doctor                         # Diagnose project issues
antd env                            # Collect env info for bug reports
antd usage ./src                    # Analyze antd imports in project
antd lint ./src                     # Check deprecated APIs & best practices
antd migrate 3 4                    # v3 → v4 migration guide
antd migrate 4 5 --apply ./src      # Agent-ready migration prompt
antd mcp                            # Start MCP server for IDE integration
antd setup --client claude          # Set up MCP/Skill for AI agents
antd upgrade                        # Upgrade CLI to latest version

📖 Commands

📚 Knowledge Query

🔍 Project Analysis

🐛 Issue Reporting

🔧 CLI Management

antd list

antd list                           # all components
antd list --version 5.0.0           # components available in 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 table
antd info Button --detail           # + descriptions, since, deprecated, FAQ
antd info Button --version 4.24.0   # v4 API snapshot

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                     # full markdown docs to stdout
antd doc Button --format json       # { name, doc }
antd doc Button --lang zh           # Chinese documentation

antd demo <Component> [name]

antd demo Button                    # list all available demos
antd demo Button basic              # get demo source code

antd token [Component]

antd token                          # global tokens (colorPrimary, borderRadius, ...)
antd token Button                   # component-level tokens

antd design.md

Output the antd design-language document (design.md) — a curated description of antd’s default light theme, conformant with the google-labs-code/design.md spec. Where antd token lists individual token names, antd design.md describes the design language as a whole (color/typography/spacing/radius values plus the principles behind them), so AI design tools (Figma Make, Stitch, etc.) and agents can consume antd’s design language directly.

antd design.md                      # design.md for the detected version
antd design.md --version 6.4.0      # design.md for a specific version
antd design.md --format json        # { doc }

design.md is major-grained (antd rewrites it only across major releases), so it is resolved by major version. A design.md is currently published only for antd v6 — requesting a major without one (v3/v4/v5) returns UNSUPPORTED_VERSION_FEATURE. It mirrors the canonical DESIGN.md published at https://ant.design/design.md.

antd semantic <Component>

antd semantic Table

Table Semantic Structure:
├── header    # Table header area
├── body      # Table body area
├── footer    # Table footer area
├── cell      # Table cell
├── row       # Table row
└── wrapper   # Outer wrapper

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

antd changelog [v1] [v2] [component]

antd changelog 5.22.0               # single version
antd changelog 5.21.0..5.24.0       # version range (inclusive)
antd changelog 4.24.0 5.0.0         # API diff between two versions
antd changelog 4.24.0 5.0.0 Select  # API diff for Select only

antd doctor

Runs 10 checks against your project: antd installed and bundled known-bug version data, React version compat, duplicate antd/dayjs/cssinjs installs, peer dependency satisfaction, theme config, babel-plugin-import usage, and CSS-in-JS setup. All checks use bundled/local data and do not make network calls.

antd doctor
antd doctor --format json

antd env [dir]

Collect all antd-related environment information — system, Node, package managers, browsers, dependencies, ecosystem packages (@ant-design/*, rc-*), and build tools — in one shot.

antd env                            # text output (paste into GitHub Issues)
antd env --format json              # structured JSON for AI consumption
antd env --format markdown          # markdown tables
antd env ./my-project               # scan a specific project directory

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                          # scan current directory
antd usage ./src                    # scan specific directory
antd usage -f Button                # filter to one component

antd lint [target]

Four rule categories: deprecated, a11y, usage, performance. Deprecation rules are derived from metadata at runtime, so they’re always version-accurate.

antd lint ./src
antd lint ./src --only deprecated
antd lint ./src --only a11y
antd lint ./src --only usage
antd lint ./src --diff              # check changed files only
antd lint --staged                  # check staged files only
antd lint ./src --only deprecated --format json --antd-alias @shared-components

usage checks include antd-specific prop/API mistakes such as Form.Item conflicts, Upload controlled value conflicts, static feedback APIs that should use App.useApp() in v5+, and v5+ Select children APIs that should use options.

Use --antd-alias <source> to treat additional package names as aliases of antd. Repeat the flag for multiple wrapper packages; antd remains enabled by default.

Use --diff [base] to lint changed git files only. By default it compares with origin/main‘s merge-base, falling back to HEAD; pass a base ref such as main to override it. Use --staged to lint only staged files.

Files that cannot be read or parsed are reported as skipped instead of being silently ignored. JSON output includes skippedFiles, partial, and summary.skipped; text and markdown output include a skipped-files section.

antd migrate <from> <to>

v3→v4 covers 15+ migration steps; v4→v5 covers 25+ migration steps; v5→v6 covers 30+. Each step includes component name, breaking flag, search pattern, and before/after code.

antd migrate 3 4                    # v3 → v4 migration
antd migrate 4 5                    # full checklist
antd migrate 4 5 --component Select # component-specific
antd migrate 4 5 --apply ./src      # generate agent migration prompt

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 crashes with dayjs 2.0"
antd bug --title "..." --steps "1. Click" --expected "Works" --actual "Crashes"
antd bug --title "..." --submit     # submit via gh CLI

antd bug-cli

antd bug-cli --title "info command crashes on v4"
antd bug-cli --title "..." --submit

antd mcp

Start an MCP (Model Context Protocol) stdio server for IDE agent integration. Exposes 8 tools and 2 prompts for native IDE integration (Claude Code, Cursor, VS Code, Codex, etc.).

antd mcp                                # start with auto-detected version
antd mcp --version 5.20.0 --lang zh     # pin version and language

Configuration:

{
  "mcpServers": {
    "antd": {
      "command": "npx",
      "args": ["-y", "@ant-design/cli", "mcp"]
    }
  }
}

MCP Tools (8): antd_list, antd_info, antd_doc, antd_demo, antd_token, antd_design_md, antd_semantic, antd_changelog

MCP Prompts (2): antd-expert, antd-page-generator

antd setup

Configure a local AI agent project with Ant Design MCP and/or the bundled skills/antd guidance. The command can write the client-specific MCP config file, install a client-appropriate skill or skill reference, and add managed instructions for agents.

antd setup --client claude              # write .mcp.json
antd setup --client cursor              # write .cursor/mcp.json
antd setup --client vscode              # write .vscode/mcp.json
antd setup --client codex               # install Codex project skill
antd setup --client github-actions      # write .github/workflows/antd-cli.yml
antd setup --client claude --dry-run    # preview without writing files
antd setup --client claude --project ./my-app
antd setup --client claude --version 5.29.3 --lang zh
antd setup --client claude --check      # verify existing config
antd setup --client claude --mode skill # install Claude skill and write instructions
antd setup --client claude --mode both  # write MCP config, install skill, and write instructions
antd setup --client claude --write-instructions

Modes:

Supported clients:

Generated server entry:

{
  "mcpServers": {
    "antd": {
      "command": "npx",
      "args": ["-y", "@ant-design/cli", "mcp", "--version", "5.29.3", "--lang", "zh"]
    }
  }
}

Skill instructions are written to the selected client’s instruction file: Claude uses CLAUDE.md; Cursor, VS Code, and Codex use AGENTS.md. Claude gets a native project skill under .claude/skills/antd/; Cursor, VS Code, and Codex get the same bundled guidance under .agents/skills/antd/ and an instruction block telling agents when to use it.

Codex setup currently supports skill installation only. Use antd setup --client codex --mode skill, or omit --mode because Codex defaults to skill.

GitHub Actions setup writes an advisory pull-request workflow that runs npm ci, npm run build, npx -y @ant-design/cli doctor --format json, and npx -y @ant-design/cli lint ./src --format json. Use --check to verify that the workflow matches the generated content.

Use --check to validate an existing setup without writing files. It exits with code 0 when the selected mode is configured, and 1 when config, skill files, or instructions are missing or different.

Use --write-instructions with the default mcp mode to also add an idempotent managed block to the selected agent instructions file, telling agents to use the configured antd MCP server before generating Ant Design code. With --check, it also verifies that instruction block.

antd upgrade

Upgrade the CLI itself to the latest version published on npm. Automatically detects which package manager installed the CLI (npm, yarn, pnpm, bun, cnpm, utoo) and runs the corresponding upgrade command.

antd upgrade                        # upgrade to latest version

Upgrading @ant-design/cli: v6.4.3 → v6.4.4
Running: npm install -g @ant-design/cli@latest
... (passthrough package manager output) ...
Successfully upgraded to v6.4.4

⚙️ Global Flags

Version auto-detection: --version flag → node_modules/antd → package.json dependencies → fallback 5.24.0

Environment Variables

📄 License

MIT © Ant Design