引言
🤡 年初立过的Flag中包含一条：开发开源个人效率APP——惜命，这都半年过去了，搞得怎么样啦~
🤣 em... 有在做的啦~
就是进度有点慢，搞了这么久，还TM在 搞天气的模块，em... 光UI都改几次了，第二版UI：
第三版UI：
归根结底还是一个字 "乱+完美主义"，对自己想要的目标非常模糊，以往都是 产品经理捋清交互出原型，设计师出设计稿，我照葫芦画瓢写界面就好了。🐶 而现在这两个都要我自己来做，产品功能还好，我自己梳理清楚逻辑就行，但 UI设计 这块，我是真的一窍不通，完全无从下手。🤡 上面两个界面都是写提示词让 Cursor 直接写的页面，主打一个 随缘，但也带来了问题：页面风格的不一致，上一个页面是 Material 风格，下一个页面秒变 iOS 风格，🙃 让人有一种撕裂感。
🤔 一种解法是写一堆长篇大论的 rule 来严格限制 Cursor 生成的画面风格，另一种就是自己整 UI设计稿 (原型)，我选择了后者，学PS是不可能的🐶，周期太长了，搜了圈"简单UI设计工具"，很多人安利用 Figma，直接B站搜 "Figma速成"，选了这个快速看完：
《Figma新手教程2025｜30分钟高效掌握Figma基础操作与UI设计流程》
😄 照着Up主的视频走了一遍案例，工具操作确实不复杂，然后觉得自己强得可怕💪，新建惜命项目，然后对着空白页面，我又陷入了呆滞，TM该怎么开始 ？？？根本不知道要弄成什么样的页面...
🤡 归根结底：工具是"术"，设计理论是"道" ，关于道我一点 经验积累 都没有，这需要大量的看和模仿练习。自己画不出来，但是画得好不好看，我是能评判的，突然有一个想法：🤔 能不能让 AI 出 线框图，我再自己调整和细化？😳 Figma 是有AI功能的，但现在只有 付费用户 能用，白嫖教育版 没法耍咯：
😏 没法用官方的AI功能，但有 MCP Server 啊！官方有一个 Dev Mode MCP，试了下不太好用🤷♀️：
《Introducing our Dev Mode MCP server: Bringing Figma into your workflow》
《Guide to the Dev Mode MCP Server》
🐶 也可能不太符合我们的场景，直接在它的 插件商店 搜了下，发现这个：Cursor Talk To Figma MCP Plugin
👍 这插件还是开源的：
sonnylazuardi/cursor-talk-to-figma-mcp
插件效果视频：
😋 体验了一下，确实是我们想要的 嘴遁出Figma设计稿的MCP，接着详细介绍下怎么用~
安装
① Clone 项目到本地
git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git顺手让 Cursor 生成一份 详细的项目结构说明文档：
😄 不难看出这个MCP主要由三部分组成：MCP服务、WebSocket通信、Figma插件，对具体实现感兴趣的童鞋，可以自行看下生成的文档：
② 安装 Bun
安装完，重启下 PowerShell，键入 bun -v 查看版本号，确定是否安装成功：
③ 初始化项目
接着 cd 到项目的根目录，执行 bun setup 进行 初始化，🐶 理论上是这样，但 Windows 运行会直接报错，原因是系统 不支持直接运行.sh脚本文件：
🤡 解法就是：手动执行 setup.sh 脚本里的命令：
😶 其实就是创建下 .cursor/mcp.json文件 和 执行 bun install (😄 搞不定就问Cursor~)，安装完后：
④ 启动Websocket
键入 bun socket 启动 Websocket：
⑤ Cursor 配置 MCP
Chat Settings → MCP Tools →TalkToFigma (一般默认有的，没有自己就配下，很简单) → 启用
🤡 我这里启用完是红的 (正常是绿色的)，说明有问题：
试了下文档中提到的 windows wsl 要去掉这行的注释：
然后 Ctrl+C 停掉 WebSocket 服务，然后再执行 bun socket，依旧爆红... 🐶 折腾了一会儿发现，是 Cursor 终端没有更新 (装了Bun要重启)，重启下 Cursor 就好了：
⑥ 安装Figma桌面端 + 配置Figma 插件
点击用户头像，下拉找到 Get desktop app 进行下载安装：
打开桌面端，进入 要生成设计稿的Page，点击 Actions：
底下会有弹窗，依次点击：Plugins & widgets → Import from manifest..
然后按照下图中的路径选中 manifest.json 文件:
接着点击这个插件：
会弹窗，显示正在连接上面启动的 Websocket 服务 (如果失败的话，重启试试，在 Cursor 的终端直接执行 bun socket！)
这个 Channel ID 等下 Cursor 也要用到，终端也会输出：
Cursor 切 Agent 模式，输入提示词进行链接，示例：
- 使用channel: channel ID 连接服务和Figma进行对话Talk to Figma, channel [您的Channel ID]
连接后会有输出信息：
接着让它开始整设计稿，弄个 简单的登录页 看看效果，Cursor 疯狂输出：
另一边 Figma桌面端 也是热火朝天的堆砌UI：
最终输出结果：
🐶 左上角这个 表单区域 有点迷，还有登录按钮上那个 紫色半透明圆形，Shift + 鼠标 选中 这三组件：
Cursor 的回答：
完全不懂这什么设计...
接着让它删掉这三，移动下组件，添加一个同意隐私协议的组件：
最终效果：
🐂🍺，Cursor 通过这个 MCP，不止能读，还能操作设计稿 👍。另外，除了用 Cursor 外，其它支持 MCP 调用的工具也是可以用的，自己做下配置就好，如：Trae、Cursor，甚至是 Cherry Studio：
修改后的设计稿：
以上就是这个MCP的基本用法，🤔 感觉很适合初期，没什么灵感时，让它来搭建基本的主体框架，然后自己再此基础上做精细化的调整。一些常规命令示例：
- create_rectangle：创建一个新的矩形。create_ellipse：创建一个新的椭圆或圆形。create_text：创建一个新的文本元素。create_frame：创建一个新的框架。set_fill_color：设置节点的填充颜色。set_stroke_color：设置节点的描边颜色。move_node：移动节点到新位置。resize_node：调整节点大小。
- set_font_name：设置文本节点的字体名称和样式。set_font_size：设置文本节点的字体大小。set_font_weight：设置文本节点的字体粗细。set_letter_spacing：设置文本节点的字母间距。set_line_height：设置文本节点的行高。set_paragraph_spacing：设置文本节点的段落间距。
别人分享的提示词
💁♂️ 有 生成HTML页面 需求的童鞋，可以在提示词里让 Cursor 直接生成对应代码，这是别处的看到的提示词：
获取Profile的所有信息，并根据设计稿信息进行开发- 使用HTML，Tailwindcss- 苹果、google等大厂设计配色风格- 生成的文件保存到`figma-demo`目录下- 无法下载的图片可以使用`export_node_as_image`生成或者使用unsplash😶 没这个需求，就不尝试了，生成代码也是耗费点数的，Cursor Pro 一个月才500点，根本不够花，能省一点是一点🤷♀️。还看到一个更全提示词，也CV下，真正需要用到的时候参考着改就好了：
你是一名大厂资深UI/UX设计专家，拥有丰富的移动端应用设计经验，精通苹果人机界面设计指南。请帮我完成一款名为`百草集`iOS App的原型设计。请按照以下要求输出一套完整的高质量Figma APP原型图：1. 设计目标- 创建符合苹果人机界面指南(Human Interface Guidelines)的iOS原生风格设计- 面向中草药爱好者和自然探索者，设计简洁直观的界面- 确保原型图能直观展示APP的功能流程和用户体验2. 用户需求分析- 目标用户群体：对中草药、植物学、自然疗法感兴趣的用户，包括初学者和爱好者- 用户痛点：缺乏系统化的中草药知识、难以识别野外植物及其药用价值、无法记录和整理自己的植物观察- 用户期望：直观的植物识别功能、个性化学习路径和推荐、社区互动和知识分享3. 功能规划- 主页：提供快速访问草本图鉴、观察记录和社区的入口- 草本图鉴：分类别展示中草药，配有详细图文介绍和音频讲解- 观察记录：记录用户在野外的植物观察，支持拍照识别和地理位置标记- 配方推荐：基于用户兴趣推荐草本配方和使用方法- 社区互动：分享观察、交流经验、获取专业指导- 设置：个人信息管理、通知设置等4. 设计规范- 使用最新的iOS设计元素和交互模式- 遵循iPhone 6尺寸规格(宽度750px, 高度1624px)- 采用自然、清新的配色方案，符合草本主题氛围- 重视无障碍设计，确保文字对比度和交互区域大小合适- 使用简洁清晰的图标和插图风格，融入自然元素5. 原型图呈现要求- 使用Figma创建所有设计稿- 为每个功能设计一个到两个屏幕，如：登录/注册、主页、草本图鉴、观察记录、配方推荐、社区互动、设置- 每行最多排列三个屏幕，之后换行继续展示- 为每个屏幕添加设备边框和阴影，不要遮住屏幕内的内容- 为每个屏幕添加简短说明，解释其功能和设计考虑6. 关键用户旅程原型屏幕- 6.1 登录/注册屏幕- 功能：用户可以通过邮箱、手机号或社交媒体账号登录/注册- 设计考虑：使用简洁的表单设计，提供快速登录选项，符合iOS设计规范- 6.2 主页屏幕- 功能：展示主要功能入口，包括草本图鉴、观察记录、配方推荐和社区动态- 设计考虑：采用卡片式布局，突出视觉重点，使用自然色调- 6.3 草本图鉴屏幕- 功能：分类展示中草药，支持搜索和筛选- 设计考虑：使用网格布局，提供清晰的视觉层次，支持图片预览- 6.4 植物详情屏幕- 功能：展示植物的详细信息，包括图片、文字介绍、音频讲解- 设计考虑：采用上下滑动的单页布局，提供丰富的多媒体内容- 6.5 观察记录屏幕- 功能：记录用户的植物观察，支持拍照识别和地理位置标记- 设计考虑：使用时间线布局，提供直观的记录展示方式- 6.6 配方推荐屏幕- 功能：基于用户兴趣推荐草本配方，支持收藏和分享- 设计考虑：采用卡片式布局，突出配方的视觉吸引力- 6.7 社区互动屏幕- 功能：用户可以发布动态、浏览社区内容、与其他用户互动- 设计考虑：使用流式布局，支持点赞、评论等社交互动- 6.8 设计规范概述- 配色方案：主色调为自然绿色(#4CAF50)，辅助色为棕色(#795548)和黄色(#FFC107)- 图标：采用简洁的线性图标风格，融入自然元素- 无障碍设计：确保文字对比度符合WCAG 2.1标准，交互区域大小合适- 动效：使用微妙的过渡动画，提升用户体验但不干扰主要功能😄 设计效果看起还是挺不错的：
😏 Figma 免费版：适合个人或小型团队，支持无限文件存储，但只能创建3个项目，最多2人协作，版本历史仅保留30天，不能共享设计文件进行多人实时编辑，离线时无法使用。专业版：适合2人以上设计团队，取消项目和编辑者数量限制，版本历史无限，支持团队组件库、Slack集成、私人项目等高级协作功能，价格约12-16美元/月/人（年付较便宜），可按月或按年订阅。😄 限于篇幅，怎么 白嫖专业版 可以参见另外一篇文章~
