(2026)Claude接入Ant Design组件库MCP、Skill指南
核心价值让 Claude Code 具备 Ant Design 官方知识库实现✅ 实时查询最新组件 API 和示例✅ 智能生成符合 antd 规范的代码✅ 自动处理主题配置、表单表格等复杂场景Ant Design官方文档CLI - Ant Designstep1全局安装CILnpm install -g ant-design/clistep2创建项目级MCP在项目根目录执行claude mcp add antd --scope project -- antd mcp执行效果根目录下自动创建 .mcp.json 配置文件写入 MCP 服务器配置后续操作重启当前 Claude Code 会话或重新打开项目首次启动授权如提示是否信任项目 MCP选择允许可用 claude mcp list 命令查看是否加载了antdstep3安装 Skill 工作流文件npx skills add ant-design/ant-design-cli执行效果创建目录 .agents/skills/antd/生成文件 SKILL.md包含触发规则和使用指南✨核心机制对比维度MCPSkill本质外部工具 实时数据源能力说明 工作流规则作用主动查询官方 API、组件文档、设计 token指导 Claude 知道“何时做、怎么做”启动Claude Code 自动管理进程生命周期规则文件随会话加载典型能力• 获取最新组件文档• 查询版本变更• 读取示例代码• 识别 antd 相关任务• 规范代码生成模式• 处理特定场景表单/表格/主题依赖需要 MCP 协议支持无额外依赖