让 AI 更懂 Ant Design：MCP 协议在前端领域的落地实践

2025-05-06 08:30 重庆

（💰金石瓜分计划回归，速戳上图了解详情🔍）

引言

当下 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 组件的更新记录

未来规划

[x] 实现监听 Ant Design 组件库的更新，自动进行数据提取发版

[x] 考虑为工具调用添加上下文感知，如前文已获取，则返回："请使用前文获取的内容"

通过 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