一、关系理解

1、Figma 是什么?
Figma 是一个 基于浏览器 的协作式 UI 设计工具，可以在线UI设计，原型、标注，团队协作等等。
2、MCP是什么?
MCP（Model Context Protocol，模型上下文协议） ，2024年11月底，由 Anthropic 推出的一种开放标准，旨在统一大型语言模型（LLM）与外部数据源和工具之间的通信协议。MCP 的主要目的在于解决当前 AI 模型因数据孤岛限制而无法充分发挥潜力的难题，MCP 使得 AI 应用能够安全地访问和操作本地及远程数据，为 AI 应用提供了连接万物的接口。

3、cursor是什么？
cursor是一款基于外部大语言模型的 AI 代码编辑器，类似于支持生成式 AI 聊天机器人的模型，如 OpenAI 的 GPT-4o 和 Claude 3.7 Sonnet。它提供了代码补全、解释、重构和基于自然语言描述的完整函数生成等功能。

本文是使用开源项目Cursor Talk to Figma MCP，通过 Model Context Protocol (MCP) 协议连接 AI 编程工具 Cursor 和设计软件 Figma

二、环境准备

1、安装cursor

浏览器搜索根据需要下载cursor，安装软件。官网：https://www.cursor.com/cn

2、获取 Figma Key

1）访问官网：https://www.figma.com，注册并登录

2）获取figma 的token

3、本地启动mcp服务

1）github上搜索Figma-Context-MCP，下载代码至本地启动，下载地址：https://github.com/GLips/Figma-Context-MCP

2）cursor与mcp服务关联设置，其中第四点填写的服务地址是上一步mcp服务启动后访问的地址。更多配置信息点击：配置

至此，环境配置已完成

三、实践

1、使用figma + mcp + cursor实现

1）figma中获取ui链接

2）cursor中ctrl + L 打开AI对话框，做问答

过程中需要一步步手动接受执行操作得到页面

2、结构化描述生成页面