一：MCP是什么

MCP（Model Context Protocol）模型上下文协议，指的是 AI 和外部工具的通用交互协议。本质上它是 AI 链接各种工具的通用协议，通过MCP协议为AI赋能。它类似于API，只不过API是给程序员使用的，而MCP是给AI使用的。

MCP 的运行需要基本条件

• Node.js 运行环境：MCP Server 需基于 Node.js 启动，请安装最新版本。
• MCP Host：需安装支持 MCP Server 的客户端软件（如 Cursor、Trae 等）。

二：MCP网站大全

2.1 mcp.so

https://mcp.so/

2.2 smithery.ai

https://smithery.ai/

2.3 mcps.live

https://mcps.live/

2.4 cursor.directory

https://cursor.directory/mcp

三：Cursor中使用Figma MCP

根据Figma设计稿生成前端页面。

3.1 创建token

用户头像 - Settings - Security - Generate new token

给token起个名字，并设置token的有效期和允许操作的权限。

创建成功后一定要先复制出来 Copy this token. 关掉之后后面就看不到了。

3.2 复制Figma的页面地址

Figma默认就带了一个示例，右键拷贝对应的链接地址，如 https://www.figma.com/design/V3B3ZpAOIfMMICfbEoq8k8/Figma-basics?node-id=4368-321123&t=u1paVmIu82unuztY-4

3.3 搜索Figma MCP

在https://mcp.so/搜索Figma，这里选择一个热度较高的 Framelink Figma MCP Server，对应的Github地址为：https://github.com/GLips/Figma-Context-MCP?tab=readme-ov-file

3.4 配置cursor

根据不同的系统配置不同的值。注意：需要将YOUR-KEY替换成Figma中生成的token。

绿点表示成功。

3.5 使用MCP

输入提示语。

Figma UI设计稿：@https://www.figma.com/design/V3B3ZpAOIfMMICfbEoq8k8/Figma-basics?node-id=4368-321123&t=u1paVmIu82unuztY-4
你是一个大厂资深前端研发工程师，根据我提供的Figma UI设计稿，使用 HTML、Tailwind CSS实现前端页面，聊天框中使用中文显示对话

1. 先是调用了Figma MCP的 get_figma_data 工具获取了设计稿内容
2. 然后调用 download_figma_images 工具下载了图片
3. 最后资源准备完成后开始为我们生成前端代码

3.4 浏览效果

可以看到还原度还是很高的，比较了一下，下面的圆角按钮Figma中填充色为白色，并且数量后面有个 小笔编辑的图表缺失了，其它感觉完全一样。