MCP
基本介绍
官方地址：
- https://modelcontextprotocol.io/introduction
“MCP 是一种开放协议，旨在标准化应用程序向大型语言模型（LLM）提供上下文的方式。可以把 MCP 想象成 AI 应用程序的 USB-C 接口。就像 USB-C 提供了一种标准化的方式，让你的设备能够连接各种外设和配件一样，MCP 也提供了一种标准化的方式，让 AI 模型能够连接不同的数据源和工具。”
● MCP 主机（MCP Hosts）：像 Claude Desktop、IDE 或 AI 工具等程序，它们希望通过 MCP 访问数据。
● MCP 客户端（MCP Clients）：维护与服务器 1:1 连接的协议客户端。
● MCP 服务器（MCP Servers）：轻量级程序，它们通过标准化的模型上下文协议（Model Context Protocol）公开特定的功能。
● 本地数据源（Local Data Sources）：你的计算机上的文件、数据库和服务，MCP 服务器可以安全地访问这些数据。
● 远程服务（Remote Services）：通过互联网可用的外部系统（例如 API），MCP 服务器可以与其连接。
https://www.anthropic.com/news/model-context-protocol
Figma
基本介绍
- https://www.figma.com/
Figma 是一款基于浏览器的设计工具，主打“实时协作”，它允许多个用户同时在同一个文件中设计、评论和修改内容，类似 Google Docs 对文字处理所做的事情。基于云的协作界面设计工具，支持多人实时编辑和评论功能。其核心优势在于无需下载安装，通过浏览器即可访问，同时支持 Windows、macOS 和 Linux 系统。
我们注册账号之后，可以看到有案例项目：
核心功能
Figma 提供矢量设计、原型制作、设计系统管理和开发者协作功能。内置的组件库和样式复用能力可显著提升团队设计效率，而自动布局功能简化了响应式设计的流程。
协作特性
支持多人同时编辑同一文件，所有修改实时同步。评论功能可直接附加到设计元素上，团队沟通更加精准高效。历史版本记录功能允许随时回溯到任意时间点的设计状态。
开发者支持
Figma 提供完善的开发者模式，支持自动生成 CSS、iOS 和 Android 代码片段。测量工具和资源导出功能让设计与开发的无缝对接成为可能。
配置Token
点击左上角的头像，点击 Settings：
进入到 Security 模块，创建一个 Personal access tokens（这里我略过，你也要保护好自己的Token）：
配置过程中，尽量把权限都给：
记得存好你的 Token！！！
NPM对比
插一句，平常我们会见到：
● npm
● pnpm
● cnpm
● npx
● pnpx
由于后续要用到，这里对比一下防止大家分不清：
启动插件
pnpx figma-developer-mcp --figma-api-key=
等待执行后，将先进行依赖的安装：
后续启动后可以看到端口 3333（保持窗口别关了）：
到这里就启动完成了，我们接着对 Cursor 进行配置。
Cursor
之前用的都是 Cline，基础的内容就不说了。这里换一个插件方式，我就直接使用 Cursor 了，（需要 Pro 订阅）。
Cline的配置大家都知道了，Cursor 的 MCP 配置也很简单，打开 Cursor 的设置（右上角），可以看到：
点击配置之后，我们将 JSON 改为如下内容（可以删除掉别的，主要是 figma）：
{
"mcpServers": {
"postgres": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-postgres",
"postgresql://localhost/postgres"
]
},
"wzkicu": {
"command": "/Users/wuzikang/.local/bin/mcp-proxy",
"args": ["http://127.0.0.1:8001/now"]
},
"figma": {
"url": "http://localhost:3333/sse"
}
}
}
保存之后，可以看到 MCP 列表中已经有了：
Cursor 简介
Cursor 是一款专为开发者设计的智能代码编辑器，结合了 AI 功能与高效的代码编写体验。其核心优势在于深度集成 AI 辅助编程，支持代码生成、自动补全、错误修复等功能，显著提升开发效率。
核心功能
- AI 驱动的代码生成与补全
Cursor 内置强大的 AI 模型，能够根据自然语言描述生成代码片段，或基于上下文提供智能补全建议。开发者可以通过简单注释快速生成复杂逻辑。
# 生成一个快速排序函数
def quick_sort(arr):
if len(arr) <= 1:
return arr
pivot = arr[len(arr) // 2]
left = [x for x in arr if x < pivot]
middle = [x for x in arr if x == pivot]
right = [x for x in arr if x > pivot]
return quick_sort(left) + middle + quick_sort(right)
跨语言支持与错误检测：支持 Python、JavaScript、Java 等主流语言，实时分析代码逻辑并标记潜在错误，提供优化建议。
集成终端与版本控制：内置终端和 Git 工具，无需切换窗口即可完成代码测试、提交和版本管理操作。
适用场景
- 快速原型开发
- 代码重构与优化
- 学习新技术栈
- 团队协作编程
Cursor 通过降低编码门槛和减少重复劳动，帮助开发者更专注于核心逻辑实现。其简洁的界面设计和可定制化配置，适合从初学者到资深工程师的不同需求。
测试项目
我们到 Figma 上，复制一个项目，来进行测试：
打开 Cursor，在右侧的对话框中输入如下
请你用HTML+CSS+JS实现页面，这里是我的figma项目：https://www.figma.com/design/lBVBhUyQsyOiHTpDhX80fN/KANG-KANG's-team-library?node-id=1-2&t=2O5S27WM2z3SiNu1-4
接着就是耐心等待任务的完成：
完成之后，会在目录下输出文件出来，我们在浏览器中：
