Ant Design CLI

Was macht Ant Design CLI?

Sie haben Zugriff auf @ant-design/cli – ein lokales CLI-Tool mit gebündelten antd-Metadaten für v4/v5/v6 (plus Migrationsleitfäden für v3 → v4, v4 → v5, v5 → v6). Nutzen Sie es, um Komponentenwissen abzufragen, Projekte zu analysieren und Migrationen zu begleiten. Alle Daten sind offline, kein Netzwerk erforderlich.

Einrichtung

Prüfen Sie vor der ersten Nutzung, ob das CLI installiert ist. Falls nicht, installieren Sie es automatisch:

which antd || npm install -g @ant-design/cli

Wenn die Ausgabe nach einem Befehl einen Hinweis „Update available“ enthält, führen Sie antd upgrade aus, um vor dem Fortfahren zu aktualisieren.

Verwenden Sie immer --format json für strukturierte Ausgaben, die Sie programmatisch parsen können.

Szenarien

1. Schreiben von antd-Komponentencode

Bevor Sie einen antd-Komponentencode schreiben, fragen Sie zuerst die API ab – verlassen Sie sich nicht auf Ihr Gedächtnis.

# Prüfen, welche Props verfügbar sind
antd info Button --format json

# Ein funktionierendes Demo als Ausgangspunkt holen
antd demo Button basic --format json

# Semantische classNames/Styles für benutzerdefiniertes Styling prüfen
antd semantic Button --format json

# Komponenten-Design-Tokens für Theming prüfen
antd token Button --format json

# Die gesamte Designsprache abrufen (design.md): Farben, Typografie, Abstände, Radius + Prinzipien
antd design.md --format json

Arbeitsablauf: antd info → Props verstehen → antd demo → funktionierendes Beispiel holen → Code schreiben.

2. Vollständige Dokumentation abrufen

Wenn Sie umfassende Komponentendokumentation (nicht nur Props) benötigen:

antd doc Table --format json        # vollständige Markdown-Dokumentation für Table
antd doc Table --lang zh            # chinesische Dokumentation

3. Debuggen von antd-Problemen

Wenn Code nicht wie erwartet funktioniert oder der Benutzer einen antd-Fehler meldet:

# Vollständigen Umgebungs-Snapshot erfassen (System, Abhängigkeiten, Browser, Build-Tools)
antd env --format json

# Prüfen, ob das Prop für die antd-Version des Benutzers existiert
antd info Select --version 5.12.0 --format json

# Prüfen, ob das Prop veraltet ist
antd lint ./src/components/MyForm.tsx --format json

# Projekt-Konfigurationsprobleme diagnostizieren
antd doctor --format json

Arbeitsablauf: antd env → vollständige Umgebung erfassen → antd doctor → Konfiguration prüfen → antd info --version X → API anhand der genauen Benutzerversion verifizieren → antd lint → veraltete oder falsche Verwendung finden.

4. Migration zwischen Versionen

Wenn der Benutzer antd upgraden möchte (z. B. v3 → v4 oder v4 → v5):

# Vollständige Migrations-Checkliste abrufen
antd migrate 3 4 --format json    # v3 → v4
antd migrate 4 5 --format json    # v4 → v5

# Migration für eine bestimmte Komponente prüfen
antd migrate 4 5 --component Select --format json

# Agentenfreundlichen Auto-Migrations-Prompt generieren (ändert keine Dateien)
antd migrate 4 5 --apply ./src --format json

# Sehen, was sich zwischen zwei Versionen geändert hat
antd changelog 4.24.0 5.0.0 --format json

# Änderungen für eine bestimmte Komponente sehen
antd changelog 4.24.0 5.0.0 Select --format json

Arbeitsablauf: antd migrate → vollständige Checkliste holen → antd changelog <v1> <v2> → Breaking Changes verstehen → Korrekturen anwenden → antd lint → überprüfen, ob keine veraltete Verwendung mehr vorhanden ist.

5. Analyse der antd-Nutzung im Projekt

Wenn der Benutzer verstehen möchte, wie antd in seinem Projekt verwendet wird:

# Nutzungsstatistiken der Komponenten scannen
antd usage ./src --format json

# Auf eine bestimmte Komponente filtern
antd usage ./src --filter Form --format json

# Auf Best-Practice-Verstöße prüfen
antd lint ./src --format json

# Nur bestimmte Regelkategorien prüfen
antd lint ./src --only deprecated --format json
antd lint ./src --only a11y --format json
antd lint ./src --only performance --format json

6. Changelogs und Versionsverlauf prüfen

Wenn der Benutzer fragt, was sich in einer Version geändert hat:

# Bestimmter Versions-Changelog
antd changelog 5.22.0 --format json

# Versionsbereich (beide Enden inklusive)
antd changelog 5.21.0..5.24.0 --format json

7. Verfügbare Komponenten erkunden

Wenn der Benutzer auswählt, welche Komponente verwendet werden soll:

# Alle Komponenten mit Kategorien auflisten
antd list --format json

# Komponenten für eine bestimmte antd-Version auflisten
antd list --version 5.0.0 --format json

8. Umgebungsinformationen sammeln

Wenn Sie das antd-Setup des Projekts verstehen oder Informationen für einen Bug-Report vorbereiten müssen:

# Vollständiger Umgebungs-Snapshot (Text – in GitHub Issues einfügen)
antd env

# Strukturiertes JSON für programmatische Nutzung
antd env --format json

# Ein bestimmtes Projektverzeichnis scannen
antd env ./my-project --format json

Sammelt: OS, Node, Paketmanager (npm/pnpm/yarn/bun/utoo), npm-Registry, Browser, Kernabhängigkeiten (antd/react/dayjs), alle @ant-design/* und rc-* Pakete sowie Build-Tools (umi/vite/webpack/typescript/etc.).

9. Melden von antd-Fehlern

Wenn der Benutzer Sie bittet, einen antd-Fehler zu melden:

# Schritt 0: Umgebungsinformationen als Referenz sammeln (optional – antd bug bettet bereits grundlegende Umgebungsinfos ein)
# Verwenden Sie die Ausgabe, um Versionen abzugleichen oder zusätzliche Details an den Fehlerbericht anzuhängen
antd env --format json

# Schritt 1: Vorschau zur Benutzerüberprüfung
antd bug --title "DatePicker stürzt beim Auswählen eines Datums ab" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. DatePicker öffnen 2. Ein Datum anklicken" \
  --expected "Datum wird ausgewählt" \
  --actual "Komponente stürzt mit Fehler ab" \
  --format json

# Schritt 2: Dem Benutzer zeigen, um Bestätigung bitten

# Schritt 3: Nach Bestätigung durch den Benutzer einreichen
antd bug --title "DatePicker stürzt beim Auswählen eines Datums ab" \
  --reproduction "https://codesandbox.io/s/xxx" \
  --steps "1. DatePicker öffnen 2. Ein Datum anklicken" \
  --expected "Datum wird ausgewählt" \
  --actual "Komponente stürzt mit Fehler ab" \
  --submit

10. Melden von CLI-Problemen

Wenn der Benutzer Sie bittet, einen CLI-Fehler zu melden, oder explizit darum bittet, einen zu erstellen:

# Vorschau des Fehlerberichts für den Benutzer
antd bug-cli --title "antd info Button gibt falsche Props für v5.12.0 zurück" \
  --description "Beim Abfragen der Button-Props für Version 5.12.0 enthält die Ausgabe Props, die in dieser Version nicht existieren" \
  --steps "1. Ausführen: antd info Button --version 5.12.0 --format json" \
  --expected "Props, die der antd 5.12.0 Button-API entsprechen" \
  --actual "Props enthalten 'classNames', das in 5.16.0 hinzugefügt wurde" \
  --format json

Zeigen Sie den Bericht dem Benutzer und holen Sie vor dem Einreichen die Bestätigung ein:

antd bug-cli --title "antd info Button gibt falsche Props für v5.12.0 zurück" \
  --description "..." \
  --steps "..." \
  --expected "..." \
  --actual "..." \
  --submit

Opt-out: Wenn die Umgebungsvariable ANTD_NO_AUTO_REPORT=1 gesetzt ist, überspringen Sie alle Vorschläge zur Fehlermeldung – schlagen Sie antd bug oder antd bug-cli nicht vor, es sei denn, der Benutzer fragt direkt danach.

11. Aktualisieren des CLI

Wenn der Benutzer @ant-design/cli auf die neueste Version aktualisieren möchte oder ein Hinweis „Update available“ erscheint:

# Auf die neueste Version aktualisieren (erkennt Paketmanager automatisch)
antd upgrade

Der Befehl erkennt, welcher Paketmanager das CLI installiert hat (npm, yarn, pnpm, bun, cnpm, utoo) und führt den entsprechenden Upgrade-Befehl aus. Falls die Erkennung fehlschlägt, wird der manuelle Befehl vorgeschlagen.

12. Verwendung als MCP-Server

Wenn Sie in einer IDE arbeiten, die MCP unterstützt (Claude Desktop, Cursor usw.), kann das CLI auch als MCP-Server ausgeführt werden, der alle Wissensabfrage-Tools direkt bereitstellt:

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

Dies stellt 8 Tools (antd_list, antd_info, antd_doc, antd_demo, antd_token, antd_design_md, antd_semantic, antd_changelog) und 2 Prompts (antd-expert, antd-page-generator) über das MCP-Protokoll bereit.

Globale Flags

Flag	Zweck
--format <format>	Ausgabeformat: json, text oder markdown (Agenten sollten json bevorzugen)
--version <v>	Auf eine bestimmte antd-Version abzielen (z. B. 5.20.0)
--lang zh	Chinesische Ausgabe (Standard: en)
--detail	Zusätzliche Felder einfügen (description, since, deprecated, FAQ)
-V, --cli-version	CLI-Version anzeigen und beenden

Wichtige Regeln

1. Immer vor dem Schreiben abfragen – Raten Sie keine antd-APIs aus dem Gedächtnis. Führen Sie zuerst antd info aus.
2. An die Version des Benutzers anpassen – Wissensabfragen (list/info/doc/demo/token/semantic/changelog) unterstützen antd v4+. Wenn das Projekt antd 4.x/5.x/6.x verwendet, übergeben Sie --version 4.24.0 / 5.24.0 / 6.x. Für antd v3-Projekte verwenden Sie zuerst antd migrate 3 4.
3. --format json verwenden – Jeder Befehl unterstützt es. Parsen Sie die JSON-Ausgabe anstatt Textausgabe mit Regex zu durchsuchen.
4. Vor dem Vorschlagen einer Migration prüfen – Führen Sie antd changelog <v1> <v2> und antd migrate aus, bevor Sie zu Versionsupgrades raten.
5. Nach Änderungen linten – Nachdem Sie antd-Code geschrieben oder geändert haben, führen Sie antd lint auf den geänderten Dateien aus, um veraltete oder problematische Verwendung zu erkennen.
6. Antd-Fehler melden – Wenn der Benutzer Sie bittet, einen antd-Fehler zu melden, verwenden Sie antd bug. Zeigen Sie immer eine Vorschau an, holen Sie die Bestätigung des Benutzers ein und reichen Sie es dann ein.
7. CLI-Probleme melden – Wenn der Benutzer nach einem CLI-Problem fragt, verwenden Sie antd bug-cli, um ihm beim Erstellen eines Berichts zu helfen. Zeigen Sie immer eine Vorschau an, holen Sie die Bestätigung des Benutzers ein und reichen Sie es dann ein.