使用Cursor+Figma MCP生成UI搞，并根据UI稿生成网页和Android代码_figma mcp cursor
使用Figma MCP生成UI搞，并根据UI稿生成网页和Android代码
1. Figma MCP 有什么用？
Figma MCP ，让大模型可以调用Figma来生成UI稿，也可以获取Figma中的UI稿信息来生成代码。
市面上比较好的Figma MCP有这些 :
- cursor-talk-to-figma-mcp : 通过获取Figma API Key来实现Cursor和Figma的连接，更侧重精准控制，因为大多数Figma文件都会非常大，如果你想让Cursor精准链接到文件中的特定元素，选择这个MCP会更合适。 (选择某个元素后，鼠标右键或快捷键CMD+L复制元素的链接，就可以发给Cursor进行操作)
- Figma-Context-MCP : 通过Figma插件形式通过channel实现与Cursor的连接，更侧重从0到1的设计元素的生成，比较适合没有太多设计基础的用户。
- Figma官方MCP (Beta) : 还是Beta版本，但是幻觉现象有大幅度的改善，大家可以期待一波
2. 环境配置
安装必备工具
-
Node.js ≥ v18
-
Cursor IDE
-
包管理工具：npm/pnpm/yarn/bun
2.1 安装Node.js
Node.Js下载地址 : https://nodejs.org/zh-cn/download
2.2 安装Figma
这里不能使用网页版Figma，要安装电脑版Figma
2.3 下载 cursor-talk-to-figma-mcp
下载 cursor-talk-to-figma-mcp，并解压
2.4 Windows + WSL 指南
通过 powershell 安装 bun
powershell -c \"irm bun.sh/install.ps1|iex\"取消注释 src/socket.ts 中的主机名 0.0.0.0
// uncomment this to allow connections in windows wslhostname: \"0.0.0.0\",启动 websocket
bun socket2.5 在Cursor中配置talk-to-figma-mcp
{ \"mcpServers\": { \"TalkToFigma\": { \"command\": \"bunx\", \"args\": [\"cursor-talk-to-figma-mcp@latest\"] } }}
2.6 打开电脑版Figma
这里不能使用网页版Figma，如果没安装需要安装电脑版Figma
Figma官方下载地址
2.7 新建一个Figma空项目
新建一个Figma空项目，然后打开Figma插件配置
2.8 导入manifest文件
对应的是cursor-talk-to-figma-mcp-main/\\src\\cursor_mcp_plugin/manifest.json
2.9 TalkToFigma连接服务
点击Connect按钮
连接成功后，会显示端口号和channel ID
2. 生成figma UI稿
然后就可以和Cursor对话了
指明使用talk to figma，以及channel，这样Cursor会自动去连接Figma
talk to figma，Connected to server on port 3055 in channel: 8zwse639。帮我在figma画布中创建一个待办事项App的首页，极简风。
3. 根据Figma UI稿 生成代码
3.1 生成HTML页面
提示词，这里的端口号和Channel Id都需要改成你自己的
Connected to server on port 3055 in channel: f7y64bwy 查看选中的设计稿信息根据选中的设计稿，生成HTML页面
效果如下
3.2 生成Android页面
Connected to server on port 3055 in channel: f7y64bwy 查看选中的设计稿信息根据选中的设计稿，生成Android Compose页面
效果如下
4. AI编程系列
使用AI编程，让AI成为你的打工人
使用AI大模型+高德MCP规划旅游行程并生成网页
使用Cursor+Figma MCP生成UI搞，并根据UI稿生成网页和Android代码
