使用 figma mcp 生成代码

# 使用 figma mcp 生成代码

# 背景

1.岳阳、南京的官网，是react + tailwind 架构，比较适合AI生成 2.图片转代码的效果，还原度有所欠缺，使用figma mcp可以获取更多的信息，便于AI理解。 3.目前我们的UI稿都是放在 CoDesign ，没法直接获取设计稿的样式信息，只能使用图片来生成。

# 图片转AI生成

1.效果差强人意，主要是布局有出入

# 图片转figma再AI生成

1.由图片生成的figma文件，有信息丢失，颜色，布局等等 2.图片转figma需要借助 codeai to design 插件，而且限额，超出限额要付费

# 步骤

# 安装插件

插件安装，授权登录后，可以上传图片。

注意这里有付费的尺寸限制，可以通过截图，减少尺寸

以南京首页为例

转换后效果

# 登录桌面端

figma官方的mcp需要升级到专业版，需要付费，先排除。

# 利用 figma mcp 生成代码

1.效果最好。

2.需要figma源文件，不过我们设计稿的源码文件，可以找设计索取，然后上传到自己的账户 3.figma-developer-mcp完全开源免费。

# figma-developer-mcp

本地全局安装

npm install -g figma-developer-mcp

复制个人token

勾选权限

复制你的token

在cursor中配置mcp

{
  "mcpServers": {
    "figma": {
      "command": "figma-developer-mcp",
      "args": ["--stdio"],
      "env": {
        "FIGMA_API_KEY": "个人token"
      }
    }
  }
}

# 在个人账户中，上传figma文件

1.选择【back to files】

2.选择【import】

3.导入成功后，把链接投喂给 cursor

#

效果对比

1.使用figma效果更好，还原度更高些

2.最好是把文件导入个人账户下，配合个人的token，还原度更高。

# 首页

模块	figma （视觉稿）	设计师账户figma转代码效果	个人账户figma	图片转代码效果	分析

核心功能					figma的布局有误差。可以把截图也一起丢给agent，用来修正。
通关模式					Figma生成的布局更接近些。
路径引导					figma的还原度更高
合规之旅					figma的还原度更高

# 关于我们

模块	figma	figma生成效果	图片生成效果	对比分析
平台定位				图片生成细节更多
核心价值观				区别不大
组织架构				区别不大，跟UI稿有差距
发展历程				区别不大，跟UI稿有差距
服务亮点				图片生成的文案更加完整。图片元素的还原，figma较好。
联系我们				图片还原更好。