AI炼丹日志-22 - MCP 自动操作 Figma+Cursor 自动设计原型

article/2025/8/17 13:07:02

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

基本介绍

插件的仓库:https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp

项目实现了 Cursor AI 与 Figma 之间的「模型上下文协议(Model Context Protocol,简称 MCP)」集成,使得 Cursor 能够与 Figma 进行通信,从而以编程方式读取和修改设计内容。

项目架构

● src/talk_to_figma_mcp/ - TypeScript MCP server for Figma integration,TS的MCP服务,用于集成 Figma
● src/cursor_mcp_plugin/ - Figma plugin for communicating with Cursor,用来 Figma 和 Cursor 交互的
● src/socket.ts - WebSocket server that facilitates communication between the MCP server and Figma plugin,走ws协议,将 MCP 的服务和 Figma 的插件结合起来

环境依赖

对于这个项目,前置依赖需要 bun,我们需要先安装 bun,才可以进行后续的使用

curl -fsSL https://bun.sh/install | bash

安装完毕如下:
在这里插入图片描述

配置环境

我们需要克隆这个项目

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
cd  cursor-talk-to-figma-mcp

确认克隆完毕(后续需要用到)
在这里插入图片描述
通过 bun 安装依赖:

bun setup

依赖完毕:
在这里插入图片描述

启动插件

通过 bun 工具,启动服务

bun socket

此时控制台会等待,启动到3055端口:
在这里插入图片描述
PS:启动插件服务,这里不用执行,后续会配置到 Cursor 中

bunx cursor-talk-to-figma-mcp

确认可以正常运行之后,就可以中断服务了:
在这里插入图片描述

安装 Figma 插件

打开一个项目,选择:
● Plugins - Development - Import plugin from manifest.json

可以看到如图的菜单项目:
在这里插入图片描述
我们选择 你刚才克隆的项目的:
● src 目录 - manifest.json

PS:别选错了,是 cursor_mcp_plugin 目录!

在这里插入图片描述
选择完毕后,页面会接着就会出现如下的弹窗,我们需要点击 Connect:
在这里插入图片描述

配置Cursor

复制下面的 JSON(其实就是刚才的启动命令):

{"mcpServers": {"TalkToFigma": {"command": "bunx","args": ["cursor-talk-to-figma-mcp"]}}
}

复制到 mcp.json 中:
在这里插入图片描述
此时可以查看MCP的工具目录,就可以看到顺利连接到了 Figma:
在这里插入图片描述

测试效果

回到 Cursor 中,进行对话:

talk to Figma 

接着根据提示,会要求 Channel ID
我们复制这个ID,并发给 Cursor,这样 Cursor 就会自动连接并获取项目的信息:

我们复制这个ID,并发给 Cursor,这样 Cursor 就会自动连接并获取项目的信息:
在这里插入图片描述

我们可以要求是中文(英语也一样,看个人习惯)
在这里插入图片描述

我们提出一些要求让它进行工作:
在这里插入图片描述
可以看到 Figma 已经开始排版了:
在这里插入图片描述
经过一系列的沟通:
在这里插入图片描述
同时我让 Cursor 帮忙规整了目录:
在这里插入图片描述


http://www.hkcw.cn/article/OgAoVAUOFB.shtml

相关文章

数字化赋能风电未来:视频监控+应急管理系统破解边远基站无人值守难题

引言:风电行业的新挑战与数字化机遇 随着我国风电产业的高速发展,越来越多的风电场建在边远山区、荒漠或海上,这些区域环境恶劣、交通不便,传统人工巡检模式成本高、效率低,且存在安全隐患。如何实现风电基站的无人化…

45岁陈冠希咖啡店被偶遇 悠闲生活羡煞旁人

陈冠希和超模秦舒培结婚后,育有一个8岁的女儿。现在他们一家三口定居在日本东京中目黑。陈冠希经常光顾当地的一家咖啡店,多次被民众偶遇。5月31日,陈冠希再次出现在这家咖啡店,并被认出。当天他穿着自家潮牌设计的衣服,看起来很随性,但穿搭并不十分时尚。他的状态还不错…

关之琳62岁状态极佳 港圈传奇女神依旧风采

关之琳近日出席活动状态极佳,疑似与前任马清伟、刘銮雄同场也不尴尬,更与马清伟现任女友大方合影。62岁仍保持完美身材和冻龄美貌,不愧是港圈传奇女神!责任编辑:zx0001

UDOP:统一视觉、文本与版式的信息以实现通用文档处理

摘要 我们提出了通用文档处理(UDOP)模型,一种基础的文档人工智能模型,它将文本、图像和布局模态与多种任务格式统一在一起,包括文档理解和生成。UDOP利用文本内容与文档图像之间的空间关联,通过一种统一的…

新理财手段突然爆火 谷子经济引关注

谷子的授权溢价、金融化泡沫、炒作乱象以及涉黄等法律风险,成为产业升级道路上的现实难题。“一块‘吧唧’(徽章)被炒到7万多”登上热搜后,公众开始对谷子经济有了全新的认知和理解。这款在二手平台上被炒到7.2万元的“吧唧”,是《排球少年!!》里西谷夕的角色。这款徽章…

《全员加速中》苏醒最后一秒被抓 再就业男团欢乐互动

再就业男团再次给观众带来欢乐。《快乐再出发》第三季结束后,他们合体次数不多,但苏醒的分享欲很强,在社交账号上频繁更新与成员们的互动消息,总能逗乐大家。最近,苏醒参加了新一期《全员加速中》的录制。他本想好好表现一番,结果刚一开工就被猎人抓到中止间,体验感直接…

雷军透露小米YU7预计7月量产 全力准备中

6月1日,雷军在微博上宣布,2025年5月小米SU7的交付量将超过28000台。他同时透露,公司正在全力准备小米YU7的大规模量产,预计将在7月份开始。雷军还提到,他刚学会了一句莫言的名言:诋毁,本身就是一种仰望。此前一天,小米集团合伙人、总裁卢伟冰也引用了这句名言。他表示,…

俄罗斯桥梁坍塌 火车脱轨扭成麻花 事故致7死数十伤

俄罗斯西部布良斯克州一座桥梁于5月31日晚发生坍塌,导致一列客运火车脱轨。布良斯克州长博戈马兹表示,该事件已造成至少7人死亡,另有数十人受伤。救援现场的照片显示了事故后的紧急救援情况。责任编辑:zx0001

小米多位高管集体发声 全力准备小米yu7量产

6月1日,雷军发文称,小米正在全力为小米yu7的大规模量产做准备,预计在7月份实现量产。他还引用了莫言的一句话:诋毁,本身就是一种仰望。5月31日,卢伟冰表示,无论是SU7的热销还是YU7获得比SU7更高的关注和期待,都是基于强大的产品力。他强调,小米汽车的成功源于小米的价…

德约科维奇3-0横扫进法网16强 轻松晋级展现实力

北京时间6月1日,法网男单第三轮比赛中,赛会6号种子德约科维奇对阵世界排名153位的米索里奇。德约科维奇全程占据优势,以3-0轻松战胜对手晋级。比赛开始后,德约科维奇率先保发。第二局中,尽管他逼出了三个破发点但未能把握住机会,双方经过多次平分后米索里奇艰难保发。德约…

歼20垂直起降 假照片引发热议

近日,在国内知名军事资讯节目《军武次位面》的评论区,有网友分享了一张据称是“歼-20垂直起降型战机试飞”的照片。许多自媒体和营销号也借此机会大做文章,声称中国的歼-20垂直起降版本已经进行了试飞。这张照片展示了一架歼-20战机的外形,并且可以看到一个类似F-35B垂直起…

日本水产品想恢复入华?中方回应 技术交流取得进展

5月30日,外交部发言人林剑主持例行记者会。有记者提问,据了解,5月28日,中国海关总署同日方就日本水产品安全问题进行了技术交流,希望了解相关情况。林剑表示,今年中方在持续开展对福岛核污染水排海国际监测并独立取样检测结果没有异常的基础上,与日方就日本水产品安全问…

国际奥委会发盛李豪霹雳舞视频 射击冠军跨界热舞

6月1日,奥林匹克运动会发布了一段盛李豪跳霹雳舞的视频。视频中,他表示希望能与巴黎奥运会霹雳舞B-Girls铜牌得主刘清漪一起跳舞。盛李豪2004年出生于江苏苏州张家港市,13岁开始接触射击。2018年他入选江苏省射击队,次年又进入了国家队。在2020年的东京奥运会上,首次参赛的…

余承东:不能为低成本而牺牲质量 质量是生命线

华为常务董事、终端BG董事长余承东在今日的未来汽车先行者大会上表示,华为采用的宁德时代电池已经提前五年达到了新的国家标准。他强调,在华为的质量标准体系下,有些车企甚至无法出货一台车。余承东呼吁大家重视产品质量,不要为了过分追求低成本而牺牲质量。他认为,质量是…

李健演唱会遇暴雨全程不打伞 敬业精神感动歌迷

李健的巡回演唱会在各地都受到了热烈欢迎。然而,在5月31日晚嘉兴站的演出中,天空突然下起了大雨。尽管如此,李健依然坚持在雨中完成表演,他的敬业精神让人感动。当晚,暴雨如注,李健的衣服和头发都被淋湿,雨水顺着脸颊流下,但这些都没有影响他与歌迷的热情互动。李健的妻…

消费者从黄金“转战”铂金 投资新宠崛起

陈女士是一位热衷于投资的人,最近她在铂金市场上进行了大额投资。她认为铂金市场出现了缺货和抢货现象,且铂金价格在底部徘徊多年,上涨概率较大。4月2日,她以接近120万元的资金购买了10斤铂金条和铂金板料。5月下旬,铂金价格迅速上涨,纽约商品交易所的铂金期货主力合约一…

作业长度与页号位数的关系

作业长度(6 页)与页号位数的关系:页号位数≥最大页号所需位数 作业长度 6 页意味着页号范围是 0~5(共 6 页),理论上 3 位二进制(28≥6)即可表示。但由题目算得页号占 5 位&#xff…

【科研绘图系列】R语言绘制词云图(wordcloud plot)

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载导入数据画图系统信息介绍 本文介绍使用R语言绘制词云图的方法。首先通过devtools从GitHub安装wordcloud2包,加载tidyverse、openxlsx等必要库。教程提供了示例数…

AI自动生成的:科技造假攻防趋势信息图

一、信息图简介 信息图(Infographics,是“信息”和“图形”的合成词)是一种数据、信息或知识的可视化表现形式。它通过图表、图像、符号、标记和少量文本的组合,将复杂、枯燥或大量的信息以清晰、直观、引人入胜的方式呈现出来&a…

男子遭精神病邻居砸门咒骂 报警近200次无果

刁先生向媒体透露,自2022年12月以来,他一家长期受到楼下精神病邻居的骚扰,对方经常上门砸门咒骂,导致他们的生活受到了严重影响。除了做饭,他们几乎只能待在阁楼里生活。刁先生说:“你倒水刷牙她都骂你,现在有点动静就怪我们家。她之前用擀面杖、木棍等工具砸我们家门,…