摘要：MCP 是最近比较火的概念，你可能在推特经常能看到。我用自己的话理解，简单讲就是一个开放给 AI 应用访问外部某某平台，某某应用的一个接口，AI 可以通过 MCP 来获取到更具体的相关数据。
前言
昨天朋友发给我一个开源项目 github.com/GLips/Figma… 是一个 Figma 的 MCP 服务。
MCP 是最近比较火的概念，你可能在推特经常能看到。我用自己的话理解，简单讲就是一个开放给 AI 应用访问外部某某平台，某某应用的一个接口，AI 可以通过 MCP 来获取到更具体的相关数据。
站内优秀文章更详细的可以看下这篇文章的介绍 juejin.cn/post/747830… (下图来源自互联网蛮形象的)
Cursor 不用介绍了吧。大名鼎鼎的 AI IDE Cursor 官网 他支持绑定 MCP 服务，我使用的 0.45 版本，应该此版本以上都支持。在 Setting 中找到 MCP Server 进行添加配置。
我直接使用了下这个 Figma MCP + Cursor 感觉很不错，感恩开源。下面介绍下使用教程。
按照项目 Readme 操作
在 Figma 点击头像然后进入 Setting 先创建一个 Figma api-key。
给予一些权限。我这里给可读可写了。可自行修改。应该是至少需要 Dev resources 可读的。
复制下来生成的 api-key 然后在终端执行命令。
pnpx figma-developer-mcp --figma-api-key=看到显示在本地 3333 端口启动服务了，就可以去 Cursor 链接了。
添加上亮小绿点就表示链接成功了。
在 Figma 复制选中的模块
指定要写入的文件，并提出相对应的要求。他就开始写了。（好像开启 agent 模式效果更佳，我直接使用的 nomal，朋友用 nomal 读取不到 Figma）
最后的成品 下方是设计稿，上方是他一次性就实现的界面。还是很赞的，调整下高度和边距就可以用了。
import ReactECharts from 'echarts-for-react';export default function LineChart { const data = [ { date: '周一', value: 150 }, { date: '周二', value: 230 }, { date: '周三', value: 224 }, { date: '周四', value: 218 }, { date: '周五', value: 135 }, { date: '周六', value: 147 }, { date: '周日', value: 260 }, ]; const option = { tooltip: { trigger: 'axis', backgroundColor: 'rgba(255, 255, 255, 0.9)', borderWidth: 0, textStyle: { color: '#333', }, }, grid: { left: '1%', right: '1%', bottom: '1%', top: '3%', containLabel: true, }, xAxis: { type: 'category' as const, boundaryGap: false, data: data.map((item) => item.date), axisLine: { lineStyle: { color: '#E5E7EB', }, }, axisLabel: { color: '#6B7280', }, }, yAxis: { type: 'value' as const, axisLine: { show: false, }, axisTick: { show: false, }, splitLine: { lineStyle: { color: '#E5E7EB', type: 'dashed', }, }, axisLabel: { color: '#6B7280', }, }, series: [ { name: '客服消息量', type: 'line', smooth: true, data: data.map((item) => item.value), symbol: 'circle', symbolSize: 6, itemStyle: { color: '#1677FF', }, lineStyle: { width: 2, color: '#1677FF', }, areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: 'rgba(22, 119, 255, 0.2)', }, { offset: 1, color: 'rgba(22, 119, 255, 0)', }, ], }, }, }, ], }; return (
);} 来源：墨码行者
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!
