1. 为什么 Claude Code 装了 Ant Design MCP 还是查不到组件很多人第一次给 Claude Code 配 Ant Design 知识库时会卡在一个很隐蔽的地方命令全跑通了.mcp.json也生成了SKILL.md也躺在.agents/skills/antd/里但一提问「antd 的 Table 怎么配虚拟滚动」Claude 还是凭记忆瞎编甚至给你一个三年前就废弃的 API。问题不在 MCP 装错了而在于 Claude Code 这个会话本身要消耗 Token 去调用模型而模型通道你根本没配。我先把这套东西拆成两层来看。MCPModel Context Protocol是外部工具加实时数据源它负责让 Claude 能主动去查 Ant Design 官方文档、组件 API、设计 tokenSkill 是一份能力说明加工作流规则它告诉 Claude「什么时候该去查、查完怎么写代码」。这两者都是「能力」但能力要跑起来得有一个会消耗 Token 的模型会话在背后驱动。Claude Code 每次对话、每次工具调用都是通过一个 Base URL 加一个 Key 去请求模型的。你只装了 MCP 和 Skill却没告诉 Claude Code「模型从哪来」那它要么报鉴权错误要么退化成纯本地瞎猜。所以正确的顺序是先解决模型通道拿 Key、填 Base URL再装 Ant Design CLI再注册 MCP最后加 Skill。原文那三条命令没错但它们前面缺了一步。这篇就把这一步补上并且把三条命令的每一步执行结果、验证方式、常见报错都写清楚让你照着做就能让这套 Ant Design MCP 加 SKILL.md 的工作流真正跑在会消耗 Token 的会话里。适合谁看已经在用 Claude Code、想让它在 Ant Design 项目里少写错代码的前端或者刚听说 MCP 和 Skill 想上手试试的开发者。不需要你懂 MCP 协议细节跟着命令走就行。2. 先办模型通道TaoToken 的 Key 和 Base URL 填在哪Claude Code 的模型请求走的是环境变量或配置文件里的 Base URL 加 API Key。你要做的第一件事是拿到一个能用的 Key并把请求地址指向正确的端点。打开https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end注册账号进控制台创建一个 API Key。这个 Key 就是 Claude Code 会话消耗 Token 的凭证。创建入口在控制台的 API Keys 页面建议单独建一个给 Claude Code 用方便后面按项目区分额度。拿到 Key 之后关键是 Base URL 怎么填。这里有个高频坑Base URL 填https://taotoken.net/api不要带/v1也不要加任何查询参数。很多人习惯性写成https://taotoken.net/api/v1结果请求 404 或者路径拼接错乱。记住这个端点就是https://taotoken.net/apiClaude Code 会自己在后面拼它需要的路径。配置方式有两种选一种就行。第一种是环境变量适合临时会话export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEY你创建的Key第二种是写进 Claude Code 的配置文件适合长期用。Claude Code 会读取用户目录下的配置把这两个值写进去之后每次启动都生效。如果你同时管多个项目建议用环境变量加 shell 脚本切换避免串号。注意TaoToken 在这里只负责发 Key 和提供 Base URL 这个模型通道它不代替 MCP 去查 Ant Design 组件文档也不代替 Skill 去写规则。MCP 和 Skill 是 Claude Code 侧的能力模型通道是另一回事两者别混。配好之后先别急着装 antd先验证模型通道通不通。随便在 Claude Code 里问一句「你好」如果它能正常回说明 Key 和 Base URL 生效了。如果报 401检查 Key 有没有复制全如果报连接错误检查 Base URL 是不是多写了/v1。3. 三条命令照跑装 CLI、注册 MCP、加 Skill模型通道通了接下来才是原文那三条命令。我按执行顺序拆开每一步都写清楚预期结果。3.1 全局安装 Ant Design CLInpm install -g ant-design/cli这一步装的是 Ant Design 官方命令行工具MCP 服务器就是通过它启动的。装完可以用antd --version确认一下。如果提示权限不足Linux 或 macOS 上加sudoWindows 上用管理员终端。装不上多半是 npm 源的问题换一个能连通的源再试。3.2 在项目根目录注册项目级 MCP先cd到你的 Ant Design 项目根目录也就是有package.json的那一层然后执行claude mcp add antd --scope project -- antd mcp这条命令的含义是添加一个名为antd的 MCP 服务器作用域是 project项目级启动命令是antd mcp。执行成功后项目根目录会自动生成.mcp.json里面写入了 MCP 服务器配置。你可以打开看一眼结构大概是服务器名加 command 加 args。--scope project这个参数很关键。它意味着这个 MCP 只对当前项目生效配置跟着项目走团队其他人拉下代码也能用同一份配置。如果你写成 user 级就变成全局生效换项目容易冲突。3.3 安装 Skill 工作流文件npx skills add ant-design/ant-design-cli这一步会创建.agents/skills/antd/目录并生成SKILL.md。这个文件里包含触发规则和使用指南告诉 Claude 在遇到 antd 相关任务时该怎么处理比如识别表单、表格、主题配置这些场景并规范代码生成模式。MCP 和 Skill 的分工可以这样理解MCP 是「能查」Skill 是「知道何时查、查完怎么写」。只有 MCP 没有 SkillClaude 可能不知道该主动去查只有 Skill 没有 MCP规则有了但拿不到实时文档。两个都装上才是完整的工作流。4. 验证重启会话、授权、确认 antd 已加载三条命令跑完还不算完。MCP 是进程级的当前会话不会自动加载新配置必须重启。先退出当前 Claude Code 会话重新打开项目。首次启动时Claude Code 会提示是否信任项目 MCP选择允许。这一步是安全机制防止你 clone 一个陌生项目就自动跑它的 MCP 命令。授权之后用这条命令确认 antd 是否加载claude mcp list预期输出里应该能看到antd这一项状态是已连接或已加载。如果列表里没有 antd说明.mcp.json没被读到检查你是不是在项目根目录启动的 Claude Code以及.mcp.json是否真的生成在根目录。确认加载后做一次真实提问验证。比如问「用 antd 的 Form 加 Table 写一个带分页和搜索的用户列表页要求符合 antd 最新规范。」如果 MCP 和 Skill 都生效Claude 会去查官方文档给出的代码里组件 API 是当前的不会出现废弃属性。你可以对比一下没装之前它给的代码差异很明显。再验证一下 Skill 的触发。问一个明显属于 antd 场景的问题比如「这个 Table 的 columns 怎么配固定列和排序」看它是否按 SKILL.md 里的规则来组织回答。如果它开始引用官方示例的结构说明 Skill 在工作。5. 本篇常见错排查配这套东西踩坑的概率不低我把高频问题列出来对着查。报 401 或鉴权失败模型通道没配好。检查ANTHROPIC_API_KEY是不是创建的那个 Key有没有多余空格检查ANTHROPIC_BASE_URL是不是https://taotoken.net/api多写/v1会出问题。claude mcp list里没有 antd要么不在项目根目录启动要么.mcp.json没生成。回到项目根目录重新执行claude mcp add antd --scope project -- antd mcp确认文件生成后再重启会话。MCP 显示已加载但查不到文档先确认antd mcp这个命令能单独跑起来。在终端直接执行antd mcp看它是否正常启动、有没有报错。如果 CLI 本身有问题MCP 自然拿不到数据。Skill 不触发检查.agents/skills/antd/SKILL.md是否存在且内容完整。有时候npx skills add因为网络问题只创建了目录没写文件重新跑一次。改了配置不生效MCP 和 Skill 都是会话级加载改完必须重启 Claude Code。别指望热更新。多个项目串配置如果你在 A 项目配了 project 级 MCP又去 B 项目B 项目不会自动有。每个项目单独跑一次claude mcp add或者把配置复制过去。Token 消耗异常MCP 每次查询官方文档都会消耗 TokenSkill 加载规则也占上下文。如果发现额度掉得快检查是不是每次提问都触发了大量文档查询。可以适当收窄问题范围别一次让它查整个组件库。6. 把 Key 和 MCP 一次配对工作流才真正跑起来回到最开始那个问题为什么装了 MCP 还是查不到组件因为模型通道和 MCP 是两条线缺一条都跑不通。正确的顺序是先在 TaoToken 拿 Key、把 Base URL 填成https://taotoken.net/api再装 Ant Design CLI、注册项目级 MCP、加 Skill最后重启会话授权并用claude mcp list确认。这套配好之后你在 Ant Design 项目里的体验会明显不一样问组件 API 它能查到最新的写表单表格它会按规范来主题配置这种复杂场景也有章法。MCP 负责实时数据Skill 负责工作流规则模型通道负责驱动整个会话三者各司其职。如果你还没创建 Key可以从模型对话或 API Keys 页面进去建一个长期在项目里用 Claude Code 写代码、跑 Agent 的可以看看 Coding Plan 的额度方案接入过程中遇到鉴权或路径问题接入文档里有更细的说明。把 Key 填对、MCP 授权、会话重启这三步做扎实剩下的就是正常写代码了。