大语言模型 21 - MCP 自动操作 Figma+Cursor 实现将原型转换为代码

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 arrpivot = 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

接着就是耐心等待任务的完成：

完成之后，会在目录下输出文件出来，我们在浏览器中：