让 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 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、ResourceTools提供核心的处理函数大模型根据 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.jsonJSON 格式「提取至少需要支持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{defaultas[组件名]}from./[组件名];exporttype{[组件名]Props}from./interface;2、interface.ts 这个文件中的内容如下请把组件的props内容补充完整 interface[组件名]Props{}exporttype{[组件名]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 --filterblob: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.jsonWindows:$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{defaultas[组件名]}from./[组件名];exporttype{[组件名]Props}from./interface;2、interface.ts 这个文件中的内容如下请把组件的props内容补充完整 interface[组件名]Props{}exporttype{[组件名]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大模型当下⼈⼯智能市场迎来了爆发期并逐渐进⼊以⼈⼯通⽤智能AGI为主导的新时代。企业纷纷官宣“ AI ”战略为新兴技术⼈才创造丰富的就业机会⼈才缺⼝将达 400 万DeepSeek问世以来生成式AI和大模型技术爆发式增长让很多岗位重新成了炙手可热的新星岗位薪资远超很多后端岗位在程序员中稳居前列。与此同时AI与各行各业深度融合飞速发展成为炙手可热的新风口企业非常需要了解AI、懂AI、会用AI的员工纷纷开出高薪招聘AI大模型相关岗位。最近很多程序员朋友都已经学习或者准备学习 AI 大模型后台也经常会有小伙伴咨询学习路线和学习资料我特别拜托北京清华大学学士和美国加州理工学院博士学位的鲁为民老师给大家这里给大家准备了一份涵盖了AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频全系列的学习资料这些学习资料不仅深入浅出而且非常实用让大家系统而高效地掌握AI大模型的各个知识点。这份完整版的大模型 AI 学习资料已经上传CSDN朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】AI大模型系统学习路线在面对AI大模型开发领域的复杂与深入精准学习显得尤为重要。一份系统的技术路线图不仅能够帮助开发者清晰地了解从入门到精通所需掌握的知识点还能提供一条高效、有序的学习路径。但知道是一回事做又是另一回事初学者最常遇到的问题主要是理论知识缺乏、资源和工具的限制、模型理解和调试的复杂性在这基础上找到高质量的学习资源不浪费时间、不走弯路又是重中之重。AI大模型入门到实战的视频教程项目包看视频学习是一种高效、直观、灵活且富有吸引力的学习方式可以更直观地展示过程能有效提升学习兴趣和理解力是现在获取知识的重要途径光学理论是没用的要学会跟着一起敲要动手实操才能将自己的所学运用到实际当中去这时候可以搞点实战案例来学习。海量AI大模型必读的经典书籍PDF阅读AI大模型经典书籍可以帮助读者提高技术水平开拓视野掌握核心技术提高解决问题的能力同时也可以借鉴他人的经验。对于想要深入学习AI大模型开发的读者来说阅读经典书籍是非常有必要的。600AI大模型报告实时更新这套包含640份报告的合集涵盖了AI大模型的理论研究、技术实现、行业应用等多个方面。无论您是科研人员、工程师还是对AI大模型感兴趣的爱好者这套报告合集都将为您提供宝贵的信息和启示。AI大模型面试真题答案解析我们学习AI大模型必然是想找到高薪的工作下面这些面试题都是总结当前最新、最热、最高频的面试题并且每道题都有详细的答案面试前刷完这套面试题资料小小offer不在话下这份完整版的大模型 AI 学习资料已经上传CSDN朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】