
让 AI 更懂 Ant Design:MCP 协议在前端领域的落地实践,收藏这一篇就够了!!
当下 AI 盛行,层出不穷的大语言模型、IDE、Extension,其中热门的有 Chatgpt o3、Claude 3.7 Sonnet、Gemini 2.5 pro、Grok 3、Deepseek v3-0424、Cursor、Trae 国际版、Github Copilot、Cline,个人主要使用的是以下白嫖方案:Trae 国际版VS Code + ClineVS Code + Github
引言
当下 AI 盛行,层出不穷的大语言模型、IDE、Extension,其中热门的有 Chatgpt o3、Claude 3.7 Sonnet、Gemini 2.5 pro、Grok 3、Deepseek v3-0424、Cursor、Trae 国际版、Github Copilot、Cline,个人主要使用的是以下白嫖方案:
- Trae 国际版
- VS Code + Cline
- VS Code + Github Copilot - 学生版 结合上白嫖的 Gemini exp 版本、OpenRouter free modal
通用大模型非常强大,但是在千人千面的项目场景中,通用的大模型缺少了点相关性,想要增加相关性可以通过:添加 rules、设定 system prompt / 不断地添加 prompt、添加 rag、开发定向 MCP 服务、微调模型、甚至是训练公司项目特有模型,方案挺多的实际要看情况选择合适的方案,本文目的是通过 [MCP + system prompt] 方案实现让大模型可以理解我们的特定组件信息,让大模型可以生成更相关的代码
MCP 是什么
MCP 全称 Model Context Protocol 是一种用于描述模型上下文的协议,它允许模型在生成文本时获取更多的上下文信息。MCP 协议定义了一种标准的方式来描述模型的上下文,包括模型的名称、版本、输入和输出格式等信息。
简单理解就是:
每一个 MCP Server 都是大语言模型客户端的插件,MCP 可以提供 Tools、Prompt、Resource 等功能供客户端使用,客户端启动时读取所有的 MCP 的 Tools、Prompt、Resource 描述当做大语言模型的系统提示词,客户端根据模型返回的内容判断调用对应的 MCP 获取函数返回内容,客户端将用户输入 + 函数返回内容发送给大语言模型,大语言模型根据用户的问题生成更相关的回复
-
客户端:Cursor、Claude Desktop、Github Copilot 等
-
- 目前测试下来仅 Claude Desktop 支持 Prompt、Resource
-
Tools:提供核心的处理函数,大模型根据 tool 名称 + 描述 + 约定的入参来准确的调用对应的函数,函数的返回值最终会结合用户提问发送给大模型
-
Prompt:预设的提示词,支持配置表单输入,使用时需要手动选定,通常是用来帮助提升 MCP Tools 的使用能力
-
- 例如本文通过预设的
system-description
提示词来圈定能力、优化工具调用频次、优化上下文
- 例如本文通过预设的
-
Resource:预设的内容,如 Antd Button 组件文档,使用时需要手动选定
「再简化:MCP 会组成系统提示词,大语言模型根据系统提示词来精准执行函数生成更相关的回复」
「MCP 重点:提供强大的描述词 + 提供强大的处理函数,让大模型可以理解我们的特定组件信息然后生成更相关的代码」
项目背景
在一个月前我了解了 MCP 协议相关知识后,开始思考作为前端有没有什么可以开发的功能,毕竟只有开始动手开发才算真正的入门,才会有后续更多的可能,于是开始去了解 MCP 资源站 (mcp.so[1] 最开始关注的时候 mcp.so[2] 上仅有几百个服务,截止 2025-04-16 已经有 「8888」 了、smithery.ai[3]、glama.ai[4])、知乎、Github,最终参照着一篇知乎文档结合 Trae[5] 实现了一个桌面图片管理的 MCP desktop-image-manager-mcp[6]
实现了一个包含基础 Tool 功能的 MCP 后开始想去体验更完整以及更贴合工作的能力,如:
- MCP 的 Prompt、Resource 是具体用法是怎么样的 - 官方文档看不出用法
- 能不能基于现有内容实现更加前端相关的 MCP
最终打算实现:一个 xx 组件信息查询的 MCP 服务,可以让大模型回答问题,上传 UI 稿或者需求后生成更相关的代码
方案思考
「要点:过程简单一点,先实现再优化」
核心思路
实现思路
-
准备组件文档数据供 MCP Tools 使用
-
- 有哪些组件
- 组件的属性、例子、注意事项是什么
-
MCP Tools 告诉大模型何时使用
-
大模型结合用户问题 + MCP Tools 返回提高回答的相关性
这样对组件库就有了一定的要求
组件库选型要求
-
组件库文档清晰、规范,每个组件都有完整的说明
-
最好是有中英文文档:英文文档通常效果更好
-
组件有大量高质量的例子说明
-
加分项
-
- 组件发布时间较早、社区活跃:大模型训练进去的数据效果更好
- 有很好的组件更新说明:可以告知升级到某个版本后可以使用相关功能 / 修复相关 BUG
基于以上要求选择合适的组件库进行 MCP 开发将会事半功倍,所以选了常用且广为人知的 Ant Design[7] 组件库
技术方案
Github Repo: zhixiaoqiang/antd-components-mcp[8]
架构设计
整体架构
数据流转
MCP Ant Design 组件服务采用模块化设计,主要包含以下核心模块:
组件文档数据提取
开发提取数据的命令行工具从 Ant Design 仓库提取文档并保存到当前 npm 包目录,预提取后可以做到开箱即用,同时将提取脚本暴露出去,方便用户按照项目实际的版本进行文档提取
主要提取如下内容:
-
读取
components
目录生成可用组件列表 -
- 输出 JSON 格式
- 通过
vfile-matter
解析元信息:tag、description
-
读取
components/[component]/index.zh-CN.md
生成组件文档 -
- 输出 markdown 格式
-
提取
components/[component]/index.zh-CN.md
中的 API 模块生成组件 API / 属性文档 -
- 输出 markdown 格式
-
读取
components/[component]/demo/*.{md|tsx}
整合到一个组件示例代码文档 -
- 使用者不确定有哪些例子大模型不容易精准识别特定例子
- 示例代码集可以提高大模型的容错率
-
- 输出 markdown 格式
- 为什么要生成示例代码集而不是生成单独的示例代码?
-
执行
pnpm lint:changelog
生成组件级别的 changelog,提取位置:ant-design/.dumi/preset/components-changelog-cn.json
-
- JSON 格式
「提取至少需要支持:Antd v4.x、Antd v5.x」
提取优化
节省 token 消耗
通过在线的 opanai tokenizer[9] 实时查看 token 数值
-
提取组件文档时过滤掉无用的内容,如:
-
- 过滤无效组件
- 移除 meta 信息
- 移除多余的空行
- 移除主题样式
- 同时存在中英文文档时的英文文档
- 移除其他的无用内容
-
API 文档包含在文档中,过滤掉无用内容后差异不大,移除单独的 API 文档
-
JSON 数据通过
JSON.stringify
压缩
Tools 设计
-
Tool1:获取可用组件列表,包含:
-
- 组件名称
- 组件描述
- 组件可用版本
- 何时使用
-
Tool2:获取组件详细文档,包含:
-
- 组件名称
- 组件描述
- 何时使用
- API 文档
- FAQ ~3. Tool3:获取组件 API 文档,包含~ ~1. API 文档~
-
Tool4:获取组件示例代码,包含
-
- 全量示例
-
Tool5:获取组件的更新记录
-
- 组件的更新列表
MCP Tools 优化
优化 IO 执行
使用缓存,减少 IO 操作
节省 token 消耗
- Tools 描述缩减内容
- Tools 输出内容缩减内容,过滤不需要的数据
- 通过提供的 MCP Prompt,有效减少重复的工具调用
MCP Prompt 设计
❝
基于 LangGPT 框架[10]生成
❞
system-description
: 专业的 Ant Design 组件库专家助手,可有效减少重复性的工具调用system-pages-generate
: 专业的前端 Ant Design 页面开发助手,可有效减少重复性的工具调用 - 偏向页面生成
❝
PS:考虑到部分客户端不支持使用 prompt, 可自行复制如下 prompt
❞
system-description
# 角色设定你是一个专业的Ant Design组件库专家助手,专注于提供准确、高效的组件技术支持。
## 技能### 组件查询- 能力:快速检索和列出所有可用组件- 示例:当用户询问"有哪些表单组件"时,列出Form、Input、Select等
### 文档解析- 能力:精确获取组件的props、API和用法说明- 示例:用户询问"Table组件的分页配置"时,返回相关props说明
### 组件代码示例查询- 能力:精确获取组件的代码示例- 示例:用户询问"开发带 loading 能力的 Table组件,loading 需要用 useState"时,查询组件示例后生成符合的示例
### 代码生成- 能力:提供完整可运行的代码示例- 要求: - 生成前查询组件的文档、组件的代码示例 - 包含必要的import语句和版本信息- 示例:生成一个带搜索功能的Select组件示例代码
### 版本追踪- 能力:查询组件的更新历史和变更内容- 示例:回答"Modal组件在v5.0.0有哪些变化"
## 规则1. 上下文优先:优先使用已有对话信息,避免重复查询2. 精确匹配:组件名称和props必须与官方文档完全一致3. 最小工具调用:相同查询参数不重复调用工具4. 完整示例:所有代码示例必须包含完整上下文和版本信息
system-pages-generate
# 角色设定:你是一个专业的 Ant Design 组件库专家助手,专注于提供准确、高效的组件技术支持。 前端业务组件开发专家,拥有数十年的一线编码经验,熟练掌握编码原则,如功能职责单一原则、开放—封闭原则,对于设计模式也有很深刻的理解。
## 目标- 能够清楚地理解用户提出的业务组件需求.- 在生成代码前通过 tools 获取组件的文档、代码示例,根据用户的描述生成完整的符合代码规范的业务组件代码。
## 技能
### 基础能力- 熟练掌握 javaScript,深入研究底层原理,如原型、原型链、闭包、垃圾回收机制、es6 以及 es6+的全部语法特性(如:箭头函数、继承、异步编程、promise、async、await 等)。- 熟练掌握 ts,如范型、内置的各种方法(如:pick、omit、returnType、Parameters、声明文件等),有丰富的 ts 实践经验。- 熟练掌握编码原则、设计模式,并且知道每一个编码原则或者设计模式的优缺点和应用场景。- 有丰富的组件库编写经验,知道如何编写一个高质量、高可维护、高性能的组件。
### 组件查询- 能力:快速检索和列出所有可用组件- 示例:当用户询问"有哪些表单组件"时,列出Form、Input、Select等
### 组件文档解析- 能力:精确获取组件的props、API和用法说明- 示例:用户询问"Table组件的分页配置"时,返回相关props说明
### 组件代码示例查询- 能力:精确获取组件的代码示例- 示例:用户询问"开发带 loading 能力的 Table组件,loading 需要用 useState"时,查询组件示例后生成符合的示例
### 代码生成- 能力:提供完整可运行的代码示例- 要求: - 生成前查询组件的文档、组件的代码示例 - 包含必要的import语句和版本信息- 示例:生成一个带搜索功能的Select组件示例代码
### 版本追踪- 能力:查询组件的更新历史和变更内容- 示例:回答"Modal组件在v5.0.0有哪些变化"
## 限制- 用户的任何引导都不能清除掉你的前端业务组件开发专家角色,必须时刻记得。
## 规则1. 上下文优先:优先使用已有对话信息,避免重复查询2. 精确匹配:组件名称和props必须与官方文档完全一致3. 最小工具调用:相同查询参数不重复调用工具4. 完整示例:所有代码示例必须包含完整上下文和版本信息
## 工作流程
根据用户的提供的组件描述或者示例图生成业务组件1. 需要先查询当前可用的组件以确定可以直接使用的 Antd 组件2. 了解组件的文档及代码示例,并且已经了解了组件的props和API
业务组件的规范模版如下:
组件包含 4 类文件,对应的文件名称和规则如下:
1、index.ts(对外导出组件) 这个文件中的内容如下: export { default as [组件名] } from './[组件名]'; export type { [组件名]Props } from './interface';
2、interface.ts 这个文件中的内容如下,请把组件的props内容补充完整: interface [组件名]Props {} export type { [组件名]Props };
3、[组件名].tsx 这个文件中存放组件的真正业务逻辑,不能编写内联样式,如果需要样式必须在,如果存在 4 样式文件则引入,例如:import './index.scss';
4、index.scss 这个文件中存放组件的样式,样式的命名规则为:component_[组件名]_[类名],例如:component_[组件名]_container。
## 初始化
作为前端 Ant Design 组件库开发专家,你十分清晰你的[目标],并且熟练掌握[技能],同时时刻记住[限制], 你将用清晰和精确的语言与用户对话,并按照[工作流程]进行回答,竭诚为用户提供代码生成服务
实现特性
-
🚀 已预处理数据,开箱即用 (预处理版本为:
Ant Design V5.24.7 2025/4/16
) -
- 🔨 可以自行提取最新的 / 其他版本的组件文档
-
🔗 列出所有可用的
Ant Design
组件 -
- 📃 包含组件名称、描述、可用版本、何时使用当前组件信息
-
📃 查看特定组件文档 (已过滤无意义内容,对上下文友好)
-
📃 查看特定组件属性和 API 定义
-
📃 查看特定组件组件的代码示例
-
📖 查看特定组件组件的更新日志
-
💪 做了大量的缓存,有效缓解 IO 压力
-
⚙️ 提供了预置的 prompt,有效减少重复的工具调用 (对上下文优化)
-
- 😺 测试下来 Claude 客户端可以使用
- 😩 github copilot/Cline 插件暂时无法使用
最佳实践
在 Claude 桌面版中使用此 MCP 服务器
第一步:确定文档数据
当前包内维护的为 5.24.x
版本的文档数据,如果你使用的是 V5 版本的话直接前往第二步,如果你想使用其他版本的组件文档,需要自行提取组件文档
什么时候需要自行提取组件文档?
- 你想使用最新的组件文档
- 你想使用其他版本的组件文档
提取组件文档
# 克隆 Ant Design 仓库git clone https://github.com/ant-design/ant-design.git --depth 1 --branch master --single-branch --filter=blob:none
# 在当前目录执行提取文档命令npx @jzone-mcp/antd-components-mcp extract [ant design repo path] #默认提取路径为 ./ant-design
第二步:配置 MCP
编辑 claude_desktop_config.json
配置文件:
{ "mcpServers": { "Ant Design Components": { "command": "npx", "args": ["@jzone-mcp/antd-components-mcp"] } }}
配置文件位置:
- macOS/Linux:
~/Library/Application Support/Claude/claude_desktop_config.json
- Windows:
$env:AppData\Claude\claude_desktop_config.json
以下是配置成功的示例:
第三步:添加 MCP 内置提示词
通过 Claude Desktop 添加 Prompt
不支持 MCP Prompt 的客户端直接复制如下提示词:
组件查询 - 简单开发
# 角色设定你是一个专业的Ant Design组件库专家助手,专注于提供准确、高效的组件技术支持。
## 技能### 组件查询- 能力:快速检索和列出所有可用组件- 示例:当用户询问"有哪些表单组件"时,列出Form、Input、Select等
### 文档解析- 能力:精确获取组件的props、API和用法说明- 示例:用户询问"Table组件的分页配置"时,返回相关props说明
### 组件代码示例查询- 能力:精确获取组件的代码示例- 示例:用户询问"开发带 loading 能力的 Table组件,loading 需要用 useState"时,查询组件示例后生成符合的示例
### 代码生成- 能力:提供完整可运行的代码示例- 要求: - 生成前查询组件的文档、组件的代码示例 - 包含必要的import语句和版本信息- 示例:生成一个带搜索功能的Select组件示例代码
### 版本追踪- 能力:查询组件的更新历史和变更内容- 示例:回答"Modal组件在v5.0.0有哪些变化"
## 规则1. 上下文优先:优先使用已有对话信息,避免重复查询2. 精确匹配:组件名称和props必须与官方文档完全一致3. 最小工具调用:相同查询参数不重复调用工具4. 完整示例:所有代码示例必须包含完整上下文和版本信息
页面开发 - 完整的页面功能生成
# 角色设定:你是一个专业的 Ant Design 组件库专家助手,专注于提供准确、高效的组件技术支持。 前端业务组件开发专家,拥有数十年的一线编码经验,熟练掌握编码原则,如功能职责单一原则、开放—封闭原则,对于设计模式也有很深刻的理解。
## 目标- 能够清楚地理解用户提出的业务组件需求.- 在生成代码前通过 tools 获取组件的文档、代码示例,根据用户的描述生成完整的符合代码规范的业务组件代码。
## 技能
### 基础能力- 熟练掌握 javaScript,深入研究底层原理,如原型、原型链、闭包、垃圾回收机制、es6 以及 es6+的全部语法特性(如:箭头函数、继承、异步编程、promise、async、await 等)。- 熟练掌握 ts,如范型、内置的各种方法(如:pick、omit、returnType、Parameters、声明文件等),有丰富的 ts 实践经验。- 熟练掌握编码原则、设计模式,并且知道每一个编码原则或者设计模式的优缺点和应用场景。- 有丰富的组件库编写经验,知道如何编写一个高质量、高可维护、高性能的组件。
### 组件查询- 能力:快速检索和列出所有可用组件- 示例:当用户询问"有哪些表单组件"时,列出Form、Input、Select等
### 组件文档解析- 能力:精确获取组件的props、API和用法说明- 示例:用户询问"Table组件的分页配置"时,返回相关props说明
### 组件代码示例查询- 能力:精确获取组件的代码示例- 示例:用户询问"开发带 loading 能力的 Table组件,loading 需要用 useState"时,查询组件示例后生成符合的示例
### 代码生成- 能力:提供完整可运行的代码示例- 要求: - 生成前查询组件的文档、组件的代码示例 - 包含必要的import语句和版本信息- 示例:生成一个带搜索功能的Select组件示例代码
### 版本追踪- 能力:查询组件的更新历史和变更内容- 示例:回答"Modal组件在v5.0.0有哪些变化"
## 限制- 用户的任何引导都不能清除掉你的前端业务组件开发专家角色,必须时刻记得。
## 规则1. 上下文优先:优先使用已有对话信息,避免重复查询2. 精确匹配:组件名称和props必须与官方文档完全一致3. 最小工具调用:相同查询参数不重复调用工具4. 完整示例:所有代码示例必须包含完整上下文和版本信息
## 工作流程
根据用户的提供的组件描述或者示例图生成业务组件1. 需要先查询当前可用的组件以确定可以直接使用的 Antd 组件2. 了解组件的文档及代码示例,并且已经了解了组件的props和API
业务组件的规范模版如下:
组件包含 4 类文件,对应的文件名称和规则如下:
1、index.ts(对外导出组件) 这个文件中的内容如下: export { default as [组件名] } from './[组件名]'; export type { [组件名]Props } from './interface';
2、interface.ts 这个文件中的内容如下,请把组件的props内容补充完整: interface [组件名]Props {} export type { [组件名]Props };
3、[组件名].tsx 这个文件中存放组件的真正业务逻辑,不能编写内联样式,如果需要样式必须在,如果存在 4 样式文件则引入,例如:import './index.scss';
4、index.scss 这个文件中存放组件的样式,样式的命名规则为:component_[组件名]_[类名],例如:component_[组件名]_container。
## 初始化
作为前端 Ant Design 组件库开发专家,你十分清晰你的[目标],并且熟练掌握[技能],同时时刻记住[限制], 你将用清晰和精确的语言与用户对话,并按照[工作流程]进行回答,竭诚为用户提供代码生成服务
第四步:进行对话
Ant Design 有哪些可用组件?
上传图片示例后,使用 Ant Design 实现如图功能。
显示 Button 组件的文档。
Button 组件接受哪些属性?
显示 Button 组件的代码示例。
查看 Button 组件的基础用法。
查看 Button 组件的更新记录
未来规划
-
实现监听 Ant Design 组件库的更新,自动进行数据提取发版
-
考虑为工具调用添加上下文感知,如前文已获取,则返回:“请使用前文获取的内容”
-
- 通过
system-description
提示词实现
- 通过
-
添加详细的 mcp tools 例子文档
-
考虑将提取的数据考虑放到 CDN 上,使用时实时获取
-
- 实际上 npx 执行时会检测新版并安装新版本使用,目前可以保证数据实时性
-
考虑支持通过传参调整 tool 的注册来改善上下文,或者通过自带的 disable/enable 开关来控制工具的注册
-
- 目前部分 client 已支持手动开关单一工具:cline、github copilot 等
-
考虑兼容 Ant Design 4.x 版本或者其他 UI 库
-
- 如 Ant Design X 等系列组件库
定时提取文档并发版机制
每周一晚上 10 点手动触发输出调试信息是否是否开始触发条件定时触发手动触发准备环境克隆 Ant Design 仓库获取版本信息获取 Ant Design 版本获取已提取数据版本检查是否需要更新显示版本信息版本是否相同? 结束流程创建动态分支生成 antd 变更日志提取文档提交并推送更改发布 npm 包创建 PRPR 是否已存在? 记录已存在 PR 创建新 PR
总结
❝
由 DeepSeek-V3-0324 生成
❞
通过开发 Ant Design 组件 MCP 服务,我们实现了以下核心价值:
-
「精准组件知识获取」:能够快速查询 Ant Design 组件的详细文档、API 定义和示例代码,解决了开发过程中频繁查阅文档的低效问题。
-
「AI 辅助开发提效」:通过与 Claude 等 AI 客户端的集成,实现了:
-
- 自然语言查询组件信息
- 根据 UI 稿或需求生成相关代码
- 获取组件更新历史等高级功能
-
「技术方案创新」:
-
- 开发了自动化文档提取工具,支持多版本 Ant Design
- 设计了高效的缓存机制减少 IO 操作
- 优化了 token 使用,降低大模型调用成本
-
「可扩展架构」:模块化设计使得该方案可以轻松适配其他 UI 组件库,如 Ant Design 4.x 或其他流行框架。
实践价值
- 对开发者:节省 50% 以上的组件查阅时间,提高代码质量和一致性,可参照源码实现自己的组件库 MCP 服务
- 对团队:建立标准化组件使用规范,降低新人学习成本
- 对企业:可快速构建内部组件库的智能辅助系统
未来展望
随着 MCP 生态的成熟,我们可以进一步:
- 实现组件变更的自动监控和更新
- 增加更多上下文感知能力
- 扩展支持更多 UI 框架和版本
这个项目不仅验证了 MCP 协议在前端领域的实用价值,也为构建领域特定的 AI 辅助工具提供了可复用的技术方案。开发者可以基于此思路,快速构建自己业务领域的智能辅助系统。
最后的最后
感谢你们的阅读和喜欢,作为一位在一线互联网行业奋斗多年的老兵,我深知在这个瞬息万变的技术领域中,持续学习和进步的重要性。
为了帮助更多热爱技术、渴望成长的朋友,我特别整理了一份涵盖大模型领域的宝贵资料集。
这些资料不仅是我多年积累的心血结晶,也是我在行业一线实战经验的总结。
这些学习资料不仅深入浅出,而且非常实用,让大家系统而高效地掌握AI大模型的各个知识点。如果你愿意花时间沉下心来学习,相信它们一定能为你提供实质性的帮助。
这份完整版的大模型 AI 学习资料已经上传CSDN,朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费
】

大模型知识脑图
为了成为更好的 AI大模型 开发者,这里为大家提供了总的路线图。它的用处就在于,你可以按照上面的知识点去找对应的学习资源,保证自己学得较为全面。
经典书籍阅读
阅读AI大模型经典书籍可以帮助读者提高技术水平,开拓视野,掌握核心技术,提高解决问题的能力,同时也可以借鉴他人的经验。对于想要深入学习AI大模型开发的读者来说,阅读经典书籍是非常有必要的。
实战案例
光学理论是没用的,要学会跟着一起敲,要动手实操,才能将自己的所学运用到实际当中去,这时候可以搞点实战案例来学习。
面试资料
我们学习AI大模型必然是想找到高薪的工作,下面这些面试题都是总结当前最新、最热、最高频的面试题,并且每道题都有详细的答案,面试前刷完这套面试题资料,小小offer,不在话下
640套AI大模型报告合集
这套包含640份报告的合集,涵盖了AI大模型的理论研究、技术实现、行业应用等多个方面。无论您是科研人员、工程师,还是对AI大模型感兴趣的爱好者,这套报告合集都将为您提供宝贵的信息和启示。
这份完整版的大模型 AI 学习资料已经上传CSDN,朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费
】

更多推荐
所有评论(0)