摘要:首先我们需要找到 Cursor 的设置,在设置里面找到 MCP 这个 TAB,然后点击“New MCP Server”将下面的 Json 代码复制进去保存就行不需要做任何改动。
原文地址:https://www.uisdc.com/figmagpt
原文作者:歸藏
昨天刷到了新的 Figma 远程 MCP 服务,进行了一大堆升级,然后又看到 GPT-5 Codex 有 API 了。
于是就都研究了一下,没想到这么顶啊,这个美学表现直接拉满了,下面这是直接给 GPT-5 Codex 设计稿的链接,只修改了一次得到的结果。
另外我还用之前的提示词把 Qwen 3 MAX 的播客文章内容给到 GPT-5 Codex 生成了一个网页,也非常顶。
即使没有设计稿,单纯的提示词 Codex 的设计风格也跟其他模型有很大的区别,这图片你就让我照着画,也需要画一段时间的。
早上发了以后很多朋友问怎么用,刚好就写个教程,主要新的 Figma 远程 MCP 服务这部分需要介绍一下。
GPT-5 Codex 的话因为有了 API 所以常见的 AI IDE 比如 Cursor 等都加上了,选择后直接用就行。
Figma MCP 这次升级最大的一个更新就是不再需要原来复杂的添加流程和本地 Figma 客户端了。
你不需要管之前咋装,我们直接看现在就行,这里我先按 Cursor 的操作路径介绍一下。
首先我们需要找到 Cursor 的设置,在设置里面找到 MCP 这个 TAB,然后点击“New MCP Server”将下面的 Json 代码复制进去保存就行不需要做任何改动。
然后回到设置页面你就会看到多了一个 Figam 的 MCP,右边还有个“Connect”按钮,我们点击,系统会询问是不是要打开外部网站,你选择打开就行。
然后在打开的页面里面点击这个“Allow access”授权按钮就行,然后如果你没有登录的话需要登录 Figma 才行。
还有就是这个 Figma 的远程 MCP 服务需要订阅用户才行,如果你没有的话中国暗网“闲鱼”会帮你解决。
这时候我们看到设置里面 Figma 的 MCP 已经开启了,而且还可以看到里面包含的工具。
如果你用的 Claude Code,你可以直接在终端输入下面的命令。
claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp command in your terminal to add the Figma MCP to Claude Code
然后启动 Claude Code ,用 /MCP 命令选择登录选项,然后也是会弹出一个网页,点击授权按钮就可以。
然后我们就能找一个设计稿使用 Figma MCP 了,Figma 社区有非常多很好的组件库和设计稿,你可以找一个你喜欢的打开改一改。
然后页面最下方切换到开发者模式,选中你想要复刻的页面然后右键选择复制所选的链接。
在之后就可以在 Cursor 里面将模型换成 GPT-5 Codex ,然后让 Agent 调用 Figma MCP 查询对应链接的设计信息还原成网页了。
需要注意的是如果你只是想写 HTML 的话最好加上 Tailwind CDN 和 Apache ECharts 5 CDN 这种它可以节省一些 Token。
然后就是 Figma MCP 这次传输的信息相当多,连设计稿素材图都变成图片链接返回了。
如果你的页面超级复杂 AI 会不可避免的偷懒,可以让他一部分一部分完成,比如先把关键的组件和页面框架搭出来,然后再填充内容,这样的话不至于上下文一下被挤爆。
另外 Figma MCP 传输的信息跟设计稿本身质量也有关系,如果设计稿本身没有用自动布局以及层级关系有误的话,可能表面上看没啥问题,但是 Figma 传给 AI 的内容是够呛可以生成好的网页了。
可能很多朋友想要我前面 Qwen 3 那个网页的的提示词,我这里也写一下,另外这个网页是我用 Codex 的 Cursor 插件写的,如果你只有 GPT 会员的话,也可以试试用这种方式尝试 GPT-5。
直接在插件市场搜索 Codex 然后安装就行,或者点这里(developers.openai.com/codex/ide)这个简单,然后点击那个 Open AI 的图标启用,这时候登录后走的就是你 GPT 会员的 Token 额度了。
今天的教程就到这里了,从这次 Figma MCP 的更新来看,Vibe Coding 的基建还有非常多的增长空间。
无论是成熟的设计系统设计稿,还是对应的前端组件库,用好以后配合 MCP 都可以极大的降低 Token 的消耗,将上下文让给更有意义更需要智能的逻辑和数据部分。
同时 AI 接入以后不代表对设计稿或者对编程的人就没需求了,只是效率提高了,但是你该有的审美和你需要的基本功知识依然是需要的。
来源:梦想精通设计