Ant Design CLI

Ant Design CLI

이 가이드는 @ant-design/cli를 사용해 Ant Design 컴포넌트 지식을 조회하고, 프로젝트 사용 현황을 분석하며, 커맨드 라인에서 마이그레이션을 안내받는 방법을 설명해요.

출처: 문서

본문

Ant Design CLI란 무엇인가요?

@ant-design/cli는 Ant Design 지식을 터미널로 가져오는 공식 커맨드라인 도구예요. 모든 메타데이터를 로컬에 함께 내장해서 — antd v3 / v4 / v5 / v6의 모든 prop, 토큰, 데모, 체인지로그 항목을 밀리초 단위로, 완전히 오프라인에서 조회할 수 있어요.

특징 (Highlights)

• 완전 오프라인 (Fully offline) — 모든 메타데이터가 패키지에 함께 내장돼요. 네트워크 호출도, 지연도, API 키도 없어요.
• 버전 정확 (Version-accurate) — v3/v4/v5/v6에 걸쳐 55개 이상의 마이너 버전 스냅샷을 제공해요. 어떤 버전의 정확한 API 표면도 조회할 수 있어요.
• 에이전트 최적화 (Agent-optimized) — 모든 명령에 --format json을 지원하고, 코드와 제안이 포함된 구조화된 오류를 반환해요.
• 이중 언어 (Bilingual) — 모든 컴포넌트 이름·설명·문서가 영어와 중국어를 모두 가져요. --lang zh로 전환할 수 있어요.
• 스마트 매칭 (Smart matching) — Buttn 같은 오타도? CLI가 Levenshtein 거리를 사용해 Button을 제안해 줘요.
• 18개 명령 (18 commands) — prop 조회부터 프로젝트 전반의 lint, 디자인 토큰부터 MCP/Skill 설정까지.

설치 (Install)

npm install -g @ant-design/cli

Node.js >=20.0.0가 필요해요. pnpm add -g @ant-design/cli나 bun add -g @ant-design/cli로 전역 설치할 수도 있어요.

빠른 시작 (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 to 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)

antd design.md {#design-md}

antd design.md는 google-labs-code/design.md 스펙에 부합하는 Ant Design의 디자인 언어 설명 파일을 출력해요. 이 파일은 AI 디자인 도구(Figma Make, Google Stitch 등)가 Ant Design의 비주얼 언어를 따르는 UI를 생성할 수 있게 하기 위한 것이에요.

antd design.md                # Output the full design.md content
antd design.md --format json  # JSON format output
antd design.md --lang zh      # Chinese descriptions

이 파일에는 다음이 포함돼요.

• YAML front-matter — 색, 타이포그래피, 라운드 코너, 간격, 핵심 컴포넌트에 대한 구조화된 토큰 정의 ({path.to.token} 참조 문법 포함)
• Overview — Ant Design의 네 가지 디자인 가치 (Natural, Certain, Meaningful, Growing)
• Colors — 기능 색, 프리셋 팔레트, 중성색에 rgba()를 쓰는 이유
• Typography — 14px 기본 폰트 크기, 폰트 스택, 두 가지 두께 제약
• Layout — 4px 그리드, 간격 스케일, 3계층 표면 모델
• Elevation & Depth — 네 가지 그림자 단계, 모션 지속시간과 easing
• Shapes — 6px 기본 반지름과 컴포넌트별 분류
• Components — 핵심 컴포넌트 원형(archetype)과 상태에 대한 스타일 설명
• Do's and Don'ts — 디자인 가이드 규칙

이 파일은 또한 ant.design/design.md로 게시되어 있어서 AI 도구가 URL로 직접 읽을 수 있어요.

프로젝트 분석 (Project Analysis)

이슈 보고 (Issue Reporting)

CLI 관리 (CLI Management)

antd mcp 명령은 Model Context Protocol 서버를 실행해 AI 어시스턴트가 Ant Design 지식에 직접 접근할 수 있게 해 줘요. 전체 상세 내용과 설정은 MCP 서버 가이드를 참고하세요.

antd setup 명령은 MCP 설정을 작성하거나, 내장된 Ant Design 스킬을 설치하거나, 둘 다 할 수 있어요.

antd setup --client claude
antd setup --client cursor --mode both
antd setup --client vscode --write-instructions
antd setup --client codex
antd setup --client claude --dry-run
antd setup --client claude --check

전역 플래그 (Global Flags)

버전 자동 감지 순서: --version 플래그, node_modules/antd, package.json 의존성, 그다음 fallback.

환경 변수 (Environment Variables)

AI 도구와 함께 사용하기

CLI는 코드 에이전트에게 각 명령을 언제, 어떻게 사용하는지 가르치는 내장 스킬 파일과 함께 배포돼요.

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

skills 프로토콜을 지원하는 모든 에이전트와 함께 동작해요.

더 알아보기

• GitHub의 @ant-design/cli
• npm의 @ant-design/cli
• Ant Design LLMs.txt 가이드
• Ant Design MCP 서버