2025年末AI的爆发，颠覆了各行各业，尤其是对IT行业冲击力度相当之大，AI代替人工写代码、写方案，大大提高了效率。但是随机而来的负面消息就是是公司大批量裁员，用AI替代人工，如何在AI时代不被淘汰，程序员如何破局就显得尤为重要。AI的冲击势不可挡，与其抱怨不如拥抱AI，拥抱变化，与时俱进，成为掌握AI使用，指挥AI，成为AI的主人。接下来我将分享一下Figma MCP + Qoder的使用经验。

1. 环境配置准备

1.1注册Figma账号

自行注册，Figma服务器在海外，建议科学上网（你懂的）。

1.2获取Personal access tokens在qoder 中figma MCP工具中编辑使用)

登录Figma官网后，点击左上角头像进入Settings  > Security，在Personal access tokens区域生成新token。建议设置90天有效期，勾选所有权限范围。

这里有个小技巧：我习惯在token名称里加入项目代号和日期，比如"ProjectX_20240601"，方便后续管理。生成的token只会显示一次，建议立即粘贴到密码管理工具中保存。

1.3下载Qoder编译器工具

网上自行下载注册，个人版注册可免费送300额度试用，后续可根据需要自行升级购买。

2.在Qoder中配置MCP服务

2.1安装MCP Figma工具

安装好qoder 之后使用qoder打开自己的项目，点击用户设置（右上角头像）进入Qoder设置 > MCP 服务 > MCP广场 找到Figma点击安装。

2.2 qoder与figma 通过figma-api-key建立连接

回到我的服务点击Framelink Figma MCP的编辑按图标进入编辑状态，将在figma官网生成Personal access tokens放在“figma-api-key=”后面保存回到mcp服务也刷新等待连接成功即可。

2.3测试figma MCP

figma MCP连接成功之后，点击快速体验图标，按指示进行操作即可。

3.使用figma mcp 工具将设计图生成vue代码

一切准备工作就绪后，打开qoder的对话框，使用自然语言输入命令，“请严格按照我提供的 Figma 链接内容，调用相关的MCP工具，遵守项目规则，生成 vue 前端页面，尽量使用vue组件。UI 要严格还原设计稿，需要实现响应式设计。相关的资源要下载到当前目录，代码结构清晰，视觉细节、页面布局与设计稿一致，响应式布局，适配市面上大部分主流安卓机型和苹果设备，注意安卓和苹果设备兼容性问题。禁止擅自修改设计内容，确保忠实还原。Figma链接：https://www.figma.com/design/*************?node-id=234-397&m=dev”，按自己的需要，调整自然语言命令。执行命令，qoder 就会去figma 获取资源生成相应的代码。

Figma链接获取方法：在figma 上选中你要生成的页面，右键点击copu/parse as > Copy link to selection 复制页面链接即可。