Ant Design AI 新工具发布！用 CLI 和 Agent 打通组件开发工作流-育师

1. 从切屏查文档到 CLI 直出：antd 组件开发工作流的真实痛点

如果你正在用 Cursor、Claude Code 这类 AI 编辑器写 React 项目，大概率遇到过这种场景：写到一半忘了DatePicker的format到底接字符串还是 dayjs 对象，于是切浏览器、开官网、搜组件、滚 API 表格，再切回编辑器时思路已经断了。Ant Design 官方发布的@ant-design/cli就是冲着这个链路来的——它把 antd 的文档、示例、版本快照、迁移规则全部打包进本地命令行，敲一行antd info Button就能拿到属性表，antd demo Select basic直接吐示例代码，完全离线、毫秒级响应。

它适合三类人：一是日常用 AI 编辑器写 antd 的前端同学，二是维护 v4/v5 老项目、被废弃 API 和迁移清单折磨的全栈工程师，三是内网或断网环境下还要查组件用法的团队。核心检索词就三个：Ant Design CLI 怎么用、antd Agent 接入、antd 组件代码生成工作流。这篇不聊概念，直接给你可复制的初始化配置、Agent 接入步骤和本地验证动作，跑通从需求描述到 antd 组件代码生成的完整链路。

我试过把这套流程塞进一个真实的表单页开发里，从「帮我生成一个带范围选择的日期筛选」到拿到能跑的代码，中间没有打开过一次浏览器。下面按顺序拆开讲，每一步都能直接抄。

2. 前置准备：安装 @ant-design/cli 并接入 TaoToken 模型服务

2.1 安装 CLI 与验证本地文档库

第一步永远是装工具。@ant-design/cli是全局包，Node 版本建议 18 以上，装完直接可用，零配置：

npm install -g @ant-design/cli antd --version antd info Button

antd info Button会输出 Button 的全部 props、类型、默认值，数据来自本地打包的文档快照，不联网。如果你看到属性表格刷出来，说明 CLI 本体没问题。接着验证示例和版本能力：

antd demo Select basic antd changelog 4.24.0 5.0.0 Select

demo拉的是官方示例源码，changelog能精确到某个组件在两个版本之间的变更。55+ 个版本快照从 v4 覆盖到 v6，所以你可以查antd@5.3.0的 Button 长什么样，而不是「大概是 v5 的样子」。

2.2 为什么 Agent 场景要配 TaoToken

CLI 解决的是「查得准」，Agent 解决的是「写得对」。但 AI 编辑器默认的模型通道经常遇到两个问题：一是长上下文里 antd 版本信息混乱，二是请求不稳定导致生成中断。TaoToken 在这里的角色是统一的模型接入层，把 Claude、GPT 这类模型的调用收敛到一个 Base URL 和一把 Key 上，方便你在 Claude Code、Cline、Codex 之间切换而不用改一堆配置。

它的 API 地址是https://taotoken.net/api，控制台在https://taotoken.net/console，Key 在https://taotoken.net/api-keys生成。注意 API 地址不带任何查询参数，直接填 Base URL 即可。下面所有配置都围绕这个地址展开。

2.3 生成 API Key 与模型选择建议

进控制台后先建 Key，复制出来只显示一次，存好。模型 ID 方面，做 antd 组件生成这类任务，建议选长上下文、代码能力强的型号，比如 Claude 系列在结构化代码输出上比较稳。你不需要记具体型号名，在模型对话页https://taotoken.net/models能看到当前可用的列表，挑一个代码向的即可。

这里有个坑要提前说：很多人把 Base URL 填成https://taotoken.net，少了/api，结果请求 404。正确写法是https://taotoken.net/api，后面接/v1/messages或/v1/chat/completions由客户端自己拼。

3. 可复制配置：CLI 初始化、Agent Skill 与 settings 片段

3.1 把 CLI 注册为 Agent Skill

@ant-design/cli原生支持 Agent Skill 机制，一条命令挂上去：

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

执行后你的 AI 助手就多了一个「查 antd 官方知识库」的能力。当你在编辑器里问「Select 的 filterOption 怎么配」，Agent 会先调 CLI 拿准确 API，再生成代码，而不是凭记忆瞎编。这一步是整条链路的关键，没有它，AI 生成的 antd 代码经常用错属性名或传错类型。

3.2 Claude Code 接入配置（settings.json）

如果你用 Claude Code，配置文件在~/.claude/settings.json。把模型通道指向 TaoToken，同时保留 Skill：

{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_AUTH_TOKEN": "sk-你的TaoToken密钥", "ANTHROPIC_MODEL": "claude-sonnet-4-20250514" }, "permissions": { "allow": ["Bash(antd:*)", "Bash(npx skills:*)"] } }

三件套对齐：Base URL 是https://taotoken.net/api，Key 是控制台生成的sk-开头串，Model ID 填你选的代码向模型。permissions.allow里放行antd命令，Agent 才能自动调 CLI 查文档。改完重启 Claude Code 生效。

3.3 Cline / MCP 场景配置

Cline 走的是 OpenAI 兼容协议，在设置里选「OpenAI Compatible」，填：

{ "baseUrl": "https://taotoken.net/api/v1", "apiKey": "sk-你的TaoToken密钥", "model": "claude-sonnet-4-20250514" }

注意 Cline 的 Base URL 要带/v1，因为它的客户端会拼/chat/completions。如果你同时用 MCP，把 antd CLI 包一层 MCP server 也可以，但大多数场景下 Skill 机制已经够用，不必额外上 MCP 直连生产库那种重方案。

3.4 Codex auth.json 配置

Codex 用户改~/.codex/auth.json：

{ "OPENAI_BASE_URL": "https://taotoken.net/api/v1", "OPENAI_API_KEY": "sk-你的TaoToken密钥", "model": "claude-sonnet-4-20250514" }

同样三件套齐全。配完跑codex进交互模式，问一句「用 antd 写一个带搜索的 Select」，看它是否先调antd info Select再出代码。

4. 验证请求：从需求描述到 antd 组件代码生成

4.1 本地验证 CLI 输出

先确认 CLI 本身能给出结构化结果，这是 Agent 调用的基础：

antd info DatePicker | head -40 antd demo Table row-selection antd lint ./src

antd lint会扫出代码里的废弃 API，比如 v4 的dropdownClassName在 v5 已改名，它会直接标出来。这一步跑通，说明本地知识库和诊断能力都在。

4.2 用 curl 验证模型通道

在接 Agent 之前，先用 curl 确认 TaoToken 通道是通的，避免把网络问题误判成配置问题：

curl https://taotoken.net/api/v1/messages \ -H "x-api-key: sk-你的TaoToken密钥" \ -H "anthropic-version: 2023-06-01" \ -H "content-type: application/json" \ -d '{ "model": "claude-sonnet-4-20250514", "max_tokens": 256, "messages": [{"role": "user", "content": "用一句话说明 antd Select 的 filterOption 作用"}] }'

返回里能看到content数组带文本，说明通道正常。如果这里就报 401，先回去检查 Key 有没有复制全、有没有多余空格。

4.3 端到端：需求描述生成组件代码

通道和 CLI 都验证过之后，在 Claude Code 里输入：

帮我写一个 antd 的日期范围筛选组件，用 DatePicker.RangePicker，带预设快捷选项，受控用法，TypeScript。

Agent 的正常行为是：先调antd info DatePicker确认 RangePicker 的 props，再调antd demo DatePicker range-picker拿官方示例，然后生成代码。你拿到的结果里presets、onChange的类型都是对的，不会出现value传字符串这种低级错误。这就是「官方知识库 + 模型」和「纯模型瞎编」的区别。

4.4 迁移场景验证

老项目升级时，先诊断再迁移：

antd doctor antd migrate 4 5 --apply ./src

doctor给出项目整体健康度，migrate按内置的 25+ 个 v4→v5 步骤生成迁移脚本。跑完再antd lint ./src复查，确认废弃 API 清零。整个过程 Agent 可以照着迁移清单逐条改，比手动翻 Changelog 快一个量级。

5. 常见报错排查：401、local proxy failed、reading choices、OAuth

5.1 401 Unauthorized

最常见。原因通常是 Key 没填对或 Base URL 少了/api。检查顺序：控制台里 Key 是否还有效、配置里有没有把sk-前缀漏掉、Base URL 是不是写成了https://taotoken.net（缺/api）。Claude Code 用的是ANTHROPIC_AUTH_TOKEN，Cline 用的是apiKey，字段名别混。

5.2 local proxy failed

这个报错一般出现在客户端尝试走本地代理但代理没起来。先确认你没有在配置里填http://127.0.0.1:xxxx这类本地地址。TaoToken 是直连的，Base URL 直接写https://taotoken.net/api即可，不需要任何本地转发层。把配置里多余的 proxy 字段删掉，重启客户端。

5.3 reading 'choices' of undefined

这是 OpenAI 兼容协议下的典型错误，说明返回体不是预期的 chat completion 结构。多半是 Base URL 路径不对：Cline/Codex 需要https://taotoken.net/api/v1，而 Claude Code 需要https://taotoken.net/api。路径错了，服务端返回的是另一种格式，客户端解析choices就崩了。对照第 3 节的配置逐字核对。

5.4 OAuth 相关报错

如果你在 Claude Code 里看到 OAuth 登录提示或 token 刷新失败，说明它还在走官方账号通道，没读到你写的settings.json。检查文件路径是不是~/.claude/settings.json，JSON 有没有语法错误（多余逗号最常见），改完完全退出再重开。用ANTHROPIC_AUTH_TOKEN而不是ANTHROPIC_API_KEY，前者才是走自定义 Base URL 的正确字段。

5.5 Agent 不调 CLI

现象是 AI 直接凭记忆生成 antd 代码，属性名偶尔出错。原因是 Skill 没挂上或权限没放行。重新跑npx skills add ant-design/ant-design-cli，并确认permissions.allow里有Bash(antd:*)。挂上之后，Agent 在生成前会主动查文档，代码准确率明显提升。

6. 把这条链路固化进团队工作流

跑通之后，建议把几个动作固化成习惯。日常查 API 用antd info，拿示例用antd demo，提交前跑antd lint ./src卡废弃 API，升级前先antd doctor再antd migrate。Agent 侧把 Skill 和 TaoToken 通道配好，让「需求描述 → 查官方文档 → 生成代码」变成默认路径，而不是每次手动切浏览器。

模型通道这块，长期做编码和 Agent 任务的话，可以了解下 Coding Plan（https://taotoken.net/coding-plan），比按量调用更适合高频场景。需要看当前可用模型就去模型对话页（https://taotoken.net/models），Key 统一在 API Keys 页（https://taotoken.net/api-keys）管理，接入细节看文档（https://taotoken.net/doc）。Claude Code 用户如果对 Anthropic 协议接入有疑问，https://taotoken.net/claudecode-anthropic有专门说明。

最后留一个我踩过的坑：antd migrate生成的脚本一定要先在小分支上跑，确认 diff 没问题再合，别直接在主分支--apply。迁移规则覆盖 25+ 步骤，个别边界情况仍需人工确认，工具是加速器不是自动驾驶。