MCP（Model Context Protocol，模型上下文协议）是一种由 Anthropic 在 2024 年 11 月推出的开放标准协议，旨在解决大型语言模型（LLM）与外部数据源、工具之间的无缝集成问题。它为 AI 模型提供了一种安全、统一且标准化的方式来访问和操作各种资源，从而大幅扩展了模型的功能和应用场景。
MCP 采用客户端-服务器架构，主机应用程序可以同时连接多个服务器，各部分角色如下：
- MCP 主机：比如 Claude Desktop、IDE 或 AI 工具（如 Cursor），它们需要通过 MCP 获取数据。
- MCP 客户端：与服务器保持 1:1 连接的协议客户端。
- MCP 服务器：每个服务器都通过标准化协议公开特定功能，就像小助手一样帮你搞定工作。
- 本地数据源：你电脑上的文件、数据库等，MCP 服务器能安全访问这些资源。
- 远程服务：通过互联网连接的外部 API 或服务。
MCP（Model Context Protocol）可不只是个简单的“协议”——它像是万能接口，为不同应用和模型之间的协同提供各种超凡技能。根据官方示例，这些技能大致可以归纳为：
- 资源访问（Resources）
- 支持列出、检索和操作本地文件、数据库或云端数据。比如读取配置文件或批量下载素材图像，统统搞定！
- 提示词管理（Prompts）
- 统一传递管理各种提示词，确保模型准确理解你的意图，适用于多轮对话和长文本场景，让回答更精准。
- 工具调用（Tools）
- 允许客户端注册或调用工具，比如
get_figma_data、download_figma_images等。每个工具都像一项“技能”，随时待命为你出奇制胜。
- 抽样控制（Sampling）
- 提供温度、Top-K 等参数调节，控制生成内容的随机性和多样性。需要一点灵感火花？交给 Sampling 就对了！
- 根上下文管理（Roots）
- 类似项目的根目录概念，管理多文档、多文件夹间的复杂上下文，让模型始终保持条理清晰。
上面这五大能力，就像 MCP 的“钢铁五环”，合力为各种 AI 应用提供一个统一又灵活的协作接口。
从官方的“Feature support matrix”中可以看出，不同客户端对 MCP 的支持各有侧重：
- 有的仅支持 Tools，有的只玩 Resources，而像 Claude Desktop App 则是“全能王”。
- 这意味着不同客户端与 MCP 交互的方式和深度不同，开发者最好先明确需求，再选择合适的客户端或自行开发支持相应功能的 MCP Server。
-
安全性与数据隐私 通过本地部署 MCP 服务器，敏感数据无需上传至第三方平台，同时可以限制模型仅能调用预定义的安全接口，从而降低风险。
-
扩展性与标准化 类似于 USB-C 为硬件连接提供标准接口，MCP 为 AI 模型访问各种资源和工具提供了统一标准，使得开发者可以方便地构建和扩展各种应用。
-
灵活的集成方式 MCP 协议不仅适用于浏览器自动化、文件系统访问、数据库操作等场景，还能与社交、开发者工具、监测系统等多种服务无缝对接，从而让 AI 模型具备全局化的上下文感知能力。
废话不多说，直接上干货！下面介绍如何利用 Figma MCP Server，根据 Figma 链接生成精美页面。我已经在本地启动了 Figma MCP Server，并在 Cursor 中添加了相应配置。
Figma 页面截图：
Cursor 生成的页面渲染结果：
重磅提示：还原度高达 80%！
1. 提问与选择 Agent 模式
首先，输入类似 "根据 Figma 链接生成页面，下载 Figma 页面的图片在本地时，注意 windows 系统的路径，项目工程已经搭建好了，直接生成页面。链接：@https://www.figma.com/design/oM5p8HzW5qig5p4vFytz7I/Figma-basics?node-id=4368-321123&t=CtV5ON0OmEl65VQn-4 。"
2. 运行 get_figma_data 工具：
Cursor 在分析问题时，发现本地 Figma MCP Server 中的 get_figma_data 工具能轻松搞定数据采集任务。
点击“Run tool”按钮，让工具自动运行，数据采集就是这么简单！
3. 运行 download_figma_images 工具：
分析完数据后发现页面中还带图呢，正好匹配 Figma MCP Server 中的 download_figma_images 工具。
同样，点击“Run tool”按钮，图片下载任务交给它搞定。
4. 生成代码
最后一步，根据获取的 Figma 页面数据，自动生成前端代码。 代码生成过程简洁高效，仿佛点了个“魔法按钮”！
过去，我们从 Figma 设计稿到前端页面的转换，多少都得经历“复制 + 粘贴 + 手动调整 + 吐槽产品设计”的繁琐过程。现在，MCP 直接帮你把代码生成到位，甚至连图片都自动下载并正确引用，真正实现 “一键生成，高度还原”。
在示例中，我们使用了原生 HTML 与 CSS “硬撸”页面。但现实开发中谁还愿意从零开始写 CSS？现成的 组件库 可是提高效率的秘密武器。那么，Cursor 怎么知道该用哪个组件库呢？答案就是 —— cursorrules！
借助 cursorrules，MCP 能够智能选择合适的组件库，使生成的代码既专业又美观，大大减少后续调整的烦恼。
示例展示
示例 1：表格页
Figma 页面截图：
Cursor 生成的页面渲染结果：
Cursor 生成的代码：
示例 2：复杂购物页面
Figma 页面截图：
Cursor 生成的页面渲染结果：
Cursor 生成的代码：
生成效果评估
从上面两个示例可以看出，Cursor 生成的代码做到了比较高的还原度！
- 示例 1 使用的是
claude-3.5-sonnet模型 - 示例 2 使用的是
claude-3.7-sonnet-thinking模型
随着 AI 代码能力的不断提升，未来或许真的能实现 “Figma 设计稿 = 直接可用的前端代码”，彻底告别手工切图和样式调整的日子！
你是不是已经迫不及待想要试试 MCP Server 了？别急，下面就带你深入了解它的工作原理和开发方式！ 🚀
目前官方支持 Python、TypeScript、Java 和 Kotlin 四种语言的 SDK。这里以 TypeScript SDK 为例，带你领略如何开发一个 MCP Server。
-
创建项目 创建一个名为
link-doc-mcp的项目，通过npm init -y生成package.json，并做如下修改： -
添加 tsconfig.json 在项目根目录创建
tsconfig.json文件，内容如下：
1. 创建入口文件
在 src/index.ts 中导入所需的包：
2. 创建服务器实例
定义服务器名称和版本，同时声明其工具能力：
3. 定义工具逻辑
在这里创建一个获取文档平台文档信息的 tool，实现根据需求文档生成前端项目的功能：
4. 启动服务
支持两种启动方式：
Command 模式启动
sse 模式启动
1. 添加 Command 类型 MCP Server
在 Cursor 中配置命令行方式的 MCP Server，如下图所示：
2、 添加 SSE 类型 MCP Server
同样也可以配置 SSE 方式的 MCP Server：
在 Cursor 的 Agent 模式下输入类似：
“根据文档平台链接生成前端项目 @https://aio.llschain.com/businessCenter/add?id=1386302442482925065&onlyRead=true”，
你将看到如下惊喜：Cursor 先调用 Link DOC MCP Server 的 get_doc_info 工具获取文档详情，随后根据需求生成前端项目。是不是有点“科技感”十足？
