欢迎大家加 jianzhangg 进群一起讨论 AI。本文涉及的所有文件均在群中。
今天演示如何使用 talk-to-figma 用大白话生成设计稿，本教程目的是提效，能快速从 0 到 1 生成大致的设计稿，后续人工或者 AI 针对细节调整都很方便。我们最开始用的 SVG 设计图，但是对非编程人员，太过复杂不好迭代，样式也不好改。
以下用 Cursor + MCP + Windows 演示。
本文所需的四个文件
- Cursor 软件。
- Figma 桌面端软件。
- Github talk-to-figma 源码，也是 Figma 的插件。
- Bun 软件，使用 PowerShell 安装。
- Node 软件，win 可以用 nvm 安装。
nvm 可以方便的切换 Node 版本，比直接在 Node 官网安装更加方便快捷。
打开 nvm-windows ，下载 nvm-setup.exe。
注意别点错了，是 Assets 里面的。
安装后关闭所有 PowerShell 再重新打开，依次执行 和 ，都安装完成后执行 ，出现下图所示的版本号说明安装成功。
使用 PowerShell 按照 Bun。你可以用快捷键 Win+X，再按 A 。再输入 。稍等片刻，直到安装完成。
打开 Figma 官网登录自己账号后，点击如图所示的按钮下载。
打开软件后跳转浏览器继续登录自己的 Figma 账号。
打开cursor-talk-to-figma-mcp的 github 地址，下载文件。
进入解压后的文件夹，在此目录按住 Shift 再右键，打开 PowerShell 执行 ，出现下图情况说明成功。
再打开 Figma 客户端，随便打开或者创建个设计文档，在文档上右键，依次点到 omport plugin from mainfest...
选择解压目录中的 mainfest.json。
这时设计文件就会出现此插件，点击打开。
注意有个 channel lf99dj4w，这是让 Cursor 定位 Figma 涉及文件用的，每次重启 channel 都会变，下面会用到。
打开设置，依次点击 MCP、Add new....
首次没有文件点击编辑器中的创建文件，把以下内容复制到文件夹中。
<p data-line="90">这是 Windows 的配置，和 Mac 不一样，Mac 用 talk-to-figma github 中的。</p> 保存文件后再次进入设置，如果像我一样这里有个绿色小点，下面有一堆指令，还打开了个 cmd 说明安装成功。
不行就多点几次刷新，重启下 Cursor，还不行进群里问。
打开 Cursor agent，开始聊天，先连上 channel。
用大白话让他随意画几张图，以下是 demo 演示。
手机 App 的也能做。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/216779.html